JavaScript 的 for...in 循环如何处理多维数组？答案

【问题标题】：How does JavaScript's for...in loop work with multi-dimensional arrays?JavaScript 的 for...in 循环如何处理多维数组？
【发布时间】：2011-03-16 18:08:22
【问题描述】：

我玩了一点 JavaScript，发现（至少对我来说）通过 for...in 循环处理多维数组时出现了奇怪的行为。所以我有这段代码：

<script type="text/javascript">
  var arr = [['a', 'b'], ['c','d']];

  var first='';

  for (var singleArray in arr) {
    first += ' ' + singleArray[0] + ' ' + singleArray[1];
  }

  var second = '';
  for (var i=0;i<arr.length; i++) {
    second += ' ' + arr[i][0] + ' ' + arr[i][1];
  }

  console.log('First: ', first);
  console.log('Second: ', second);
</script>

输出是：

First: 0 undefined 1 undefined
Second: a b c d

我希望第一个和第二个是一样的。你能解释一下我缺少什么吗？

注意：请不要建议通过 jQuery 或其他方式遍历数组。我没有编码问题，我只是对这种特殊情况感到好奇。

【问题讨论】：

如果不使用forEach，则不应将其命名为forEach。例如这：arr.forEach(function(is) { is.forEach( function (his) { console.log(his) } ) } ); 做正确的事。
@CrisStringfellow 我还发现问题的标题具有误导性，因为我正在寻找有关 forEach 循环的信息。那么这个问题的标题应该是什么？

标签： javascript arrays

【解决方案1】：

埃里克·米克尔森指出了一些好的观点，但总结一下。

for (... in ...) 循环遍历对象属性
array 是 Javascript 中的一个对象，因此您可以使用它遍历数组。但是会比较慢，一般不推荐（见why is that）
它迭代属性而不是值的事实意味着它返回索引而不是数组值（当您有关联数组时，这可能很方便）
问题中的例子可以用for (... in ...)循环解决

如下：

var third = '';
for (var arrayIndex in arr) {
  third += ' ' + arr[arrayIndex][0] + ' ' + arr[arrayIndex][1];
}

在关联数组示例中，for (... in ...) 循环会很方便：

var person = [];
person["id"] = 1;
person["born"] = 2009;
person["favourite_meal"] = "chicken"; 

var fourth = '';
for (var arrayIndex in person) {
  fourth += ' ' + person[arrayIndex];
}

【讨论】：

在 JavaScript 中，不使用术语“关联数组”。您的第二个示例显示的事实是，除了数组之外，数组还是对象，并且 for...in 迭代键。正如您在第 2 点中所说，最好在第一行使用var person = {};。

【解决方案2】：

for (... in ...) 迭代对象的属性，而不是数组的元素。 w3schools, javascript garden

【讨论】：

嗯，但我看过几次并验证了自己 for (... in ...) 适用于单维数组。这是偶然的吗？
@Jan：它适用于数组，但它仍然迭代属性名称/索引，而不是值。不过要小心，因为它会迭代所有属性，而不仅仅是索引，包括添加到 Array.prototype 的函数。 JavaScript 的 for/in 真的不是为数组设计的，它只是碰巧工作（有点）。
刚刚在某个地方发现它对数组工作得很好，但这里的区别在于它不返回值而是返回索引......
Eric，你能链接到除 w3schools 之外的其他资源吗？提及for(...in...) 而不提及hasOwnProperty 是有害的。 bonsaiden.github.com/JavaScript-Garden/#object.forinloop

【解决方案3】：

我一直使用这个 dump() 函数来调试我的多维数组。

http://binnyva.blogspot.com/2005/10/dump-function-javascript-equivalent-of.html

如果您对实施有任何疑问，请告诉我。

【讨论】：