Chrome 示例扩展中的 Javascript for...in 循环

Question

我正在编辑 Chrome 的示例 oauth contacts extension

当我在 contacts.js 第 7 行遇到一个有趣的 for 循环时:

for (var i = 0, contact; contact = contacts[i]; i++) {

变量i从未在for循环体中使用过，所以它看起来像一个典型的“for...in”循环。我尝试将 for 循环替换为

for (contact in contacts) {

但是当我运行扩展程序时，我的所有联系人都返回未定义

这是扩展中的完整 for 循环

for (var i = 0, contact; contact = contacts[i]; i++) {
  var div = document.createElement('div');
  var pName = document.createElement('p');
  var ulEmails = document.createElement('ul');

  pName.innerText = contact['name'];
  div.appendChild(pName);

  for (var j = 0, email; email = contact['emails'][j]; j++) {
    var liEmail = document.createElement('li');
    liEmail.innerText = email;
    ulEmails.appendChild(liEmail);
  }

  div.appendChild(ulEmails);
  output.appendChild(div);
}

Answer 1

给出的代码的作用

它的作用是评估 contacts[i] 是什么以及它是否真实，同时缓存适用索引的数组元素。

它相当于以下代码(请注意，在此示例中 ++i 与 i++ 具有相同的副作用):

for (var i = 0; contacts[i]; ++i)
{   var contact = contacts[i];
    // use contact
}

这可以解释为如下所示:

• 如果 !contacts[i] 为 false(即为 true)，则继续循环。
• 否则，结束循环(这是错误的)。

如果该代码的目标是迭代整个数组，那么问题是，如果您想迭代一个元素但它是假的，它将结束整个循环，而不是执行(可能)预期的操作影响。举个例子:

var foo = [1, 3, 5, 7, 9, 0, 2, 4, 6, 8];

// example for-loop given
for (var i = 0; foo[i]; ++i)
{   var bar = foo[i];
    console.log('example: ' + bar);
}

// "normal" way of iterating through array
for (var i = 0, l = foo.length; i < l; ++i)
{   var bar = foo[i];
    console.log('normal: ' + bar);
}

您会发现该示例仅记录到数字 9，而“正常”方式会遍历整个数组。当然，如果您可以保证数组中的所有值都是真实的(例如，所有数组元素都是对象)，那么这就不是什么大问题了。

for-in 的作用以及为什么不起作用

您尝试用以下代码替换该代码:

for (contact in contacts) { /*code here*/ }

但是，由于多种原因，这不起作用:

1. contact 是属性名称的字符串，而不是它的值。举个例子:

   var foo =
       { bar1: 1
       , bar2: 2
       , bar3: 3
       , bar4: 4
       , bar5: 5 };
   for (var i in foo) console.log(i);
   

   您返回的是属性名称(即“bar1，bar2...”)而不是值。要对对象执行此操作，您必须执行如下操作:

   for (var i in foo)
   {   var bar = foo[i];
       console.log(bar);
   }
   

   现在您应该在不同的行上返回“1,2,3,4,5”。如果你明白了这一点，以及其他一些事情，你可能已经在 Object.prototype 上定义了项目 - 这就是为什么它通常是一个坏主意，除非它确实使代码更清晰，并且有大量的内容这样做的目的。要过滤掉这些内容，请添加 hasOwnProperty() 检查:

   for (var i in foo) if (foo.hasOwnProperty(i))
   {   var bar = foo[i];
       console.log(bar);
   }
   

   即将推出的 ECMAScript 版本(JavaScript 的“标准”版本，减去 DOM)将具有称为 for-of 循​​环的功能，这将使执行此类操作变得更加容易。

2. For-in 循环通常不适用于数组(它是可能的，但通常不是一个好主意)。如果您需要使用 for-in，您可能应该使用对象 - 所有数组都是对象，只是数组具有特殊的内部 length 属性和一些其他内容。

   <

3. contact 是一个隐含的全局性大禁忌。事实上，隐含的全局变量 are banned in strict mode 。使用变量声明(在 for-in 循环内部或外部，无关紧要)来解决此问题。

它只是学习 JavaScript 的工作原理以及在哪里应用它的各种方法来完成任务 - 有些方法比其他方法更适合特定情况。