JsHint (W083)：不要在循环中创建函数。 - 使用 [].forEach();

Question

我收到这个错误：

JsHint (W083): Don't make functions within a loop.

使用以下代码时：

for (var prop in cmd.properties) {
  Object.keys(meta[prop].data).forEach(function (rule) {
    rules.data[rule] = meta[prop].data[rule] ? true : false;
  }.bind(this));
}

基本上我正在遍历对象 meta[prop].data 的属性，对于每个属性，我正在使用 ternary 运算符设置 true/false 其他另一个对象属性。

正在阅读我看到的一些文档：

JSHint and ESLint encounter a function expression in a for, while or do statement body.

这个错误是合法的吗？
如果是，如何更好地重写这些行？
如果不是，如何使用 JsHint 禁用此特定错误验证？

Answer 1

Is this error legitimate one?

是的，您是在循环中声明一个函数。最重要的是，bind 可能非常昂贵，因为它每次都必须创建一个新的词法作用域，并且 return 附加到该作用域的 "new" 函数。

If yes, how to better re-write these lines?

如果可以，在循环之前声明函数并绑定一次或使用简单的闭包来避免显式绑定调用：

var scope = this;
var ruleFunc = function (rule) {
  rules.data[rule] = meta[prop].data[rule] ? true : false;
}

for (var prop in cmd.properties) {
  Object.keys(meta[prop].data).forEach(ruleFunc);
}

不过，我没看到您在函数中的什么地方使用了 this，因此您可以完全删除它：

var ruleFunc = function (rule) {
  rules.data[rule] = meta[prop].data[rule] ? true : false;
}

for (var prop in cmd.properties) {
  Object.keys(meta[prop].data).forEach(ruleFunc);
}

这两个都需要重构您的代码，因为您正在使用闭包从循环中获取 prop 变量。您可以使用 bind 来解决这个问题，但性能会受到影响：

var ruleFunc = function (prop, rule) {
  rules.data[rule] = meta[prop].data[rule] ? true : false;
}

for (var prop in cmd.properties) {
  Object.keys(meta[prop].data).forEach(ruleFunc.bind(this, prop));
}

您还对 return true/false 使用了条件句，这是一种常见的味道。您通常希望将其转换为布尔值，!! 是惯用的 JS 方式：

rules.data[rule] = !!(meta[prop].data[rule]);

如果可以，避免 for ... in 循环通常会让您的生活更美好，因此您可能也想重构它：

Object.keys(cmd.properties).forEach(function (prop) {
  Object.keys(meta[prop].data).forEach(function (rule) {
    rules.data[rule] = !!(meta[prop].data);
  });
});

您或许可以进一步改进。

JsHint (W083)：不要在循环中创建函数。 - 使用 [].forEach();

JsHint (W083): Don't make functions within a loop. - Using [].forEach();

javascript

jshint

eslint