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

Javascript for...in Loops in Chrome Sample Extension

本文关键字：扩展 循环 for Chrome Javascript      更新时间：2023-09-26

我正在编辑Chrome的示例oauth联系人扩展程序

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

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

变量i从未在 for 循环的主体中使用过，因此它看起来像一个典型的"for...在"循环中。我尝试将 for 循环替换为

for (contact in contacts) {

但是当我运行扩展程序时，我所有的联系人都恢复了undefined

这是扩展中的完整 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);
}

给出的代码的作用

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

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

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

这可以解释为如下所示：

  • 如果!contacts[i]是假的(即它是真的(，继续循环。
  • 否则，结束循环(它是假的(。

如果该代码的目标是遍历所有数组，那么问题在于，如果您想遍历一个元素，但它是伪造的，它将结束整个循环，而不是执行(可能的(预期效果。 举个例子：

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是一个隐含的全球大禁忌。 事实上，隐含的全局变量在严格模式下是被禁止的。 使用变量声明(在 for-in 循环内部或外部，没关系(来解决此问题。

它

只是学习JavaScript是如何工作的，以及在哪里应用它的各种做事方法 - 有些在特定情况下比其他方法更适合。

这里你使用的是数组，而不是对象。

虽然用于..在输出中的结果与法线 for 循环相同，这将是我的答案。

我的推荐：

使用 for..in 遍历对象：

为。。in 迭代对象的属性。

注意：迭代顺序是任意的。

var Myobj = {
    a: 1,
    b: 2,
    c: 3
};
for ( var prop in Myobj ) {
    console.log(prop);      // a...b...c
    console.log(Myobj[prop]); // 1...2...3
}

但问题是它将继续在原型链上搜索可枚举的属性。因此，除非您不使用hasOwnProperty，否则它将遍历本地对象及其附加到的原型。

 //Improved version of above code:
for (var prop in Myobj) {
    if ( Myobj.hasOwnProperty(prop) ) {
        // prop is actually obj's property (not inherited)
        console.log(prop);      // a...b...c
        console.log(Myobj[prop]); // 1...2...3
    }
}

使用 for loop 对数组进行迭代

for 循环以顺序方式遍历数组。

相关文章：