javascript foreach 如何处理多维数组?

声明:本页面是StackOverFlow热门问题的中英对照翻译,遵循CC BY-SA 4.0协议,如果您需要使用它,必须同样遵循CC BY-SA许可,注明原文地址和作者信息,同时你必须将它归于原作者(不是我):StackOverFlow 原文地址: http://stackoverflow.com/questions/5329746/
Warning: these are provided under cc-by-sa 4.0 license. You are free to use/share it, But you must attribute it to the original authors (not me): StackOverFlow

提示:将鼠标放在中文语句上可以显示对应的英文。显示中英文
时间:2020-08-23 16:42:13  来源:igfitidea点击:

How javascript foreach works with multi-dimensional arrays?

javascriptarrays

提问by Jan Zyka

I was playing a bit with javascript and found out (at least for me) strange behaviour when dealing with multi-dimensional arrays via a foreach loop. So I have this piece of code:

我在玩 javascript 时发现了(至少对我而言)通过 foreach 循环处理多维数组时的奇怪行为。所以我有这段代码:

<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>

The output is:

输出是:

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

I would expect the first and second will be the same. Can you please explain me what I am missing?

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

Note: please do not advice to iterate over the array via jQuery or somehow else. I don't have coding troubles, I am just curious about this particular situation. Thanks!

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

回答by Jan Zyka

There were some good point from Erick Mickelsen pointed out but so sum it up.

埃里克·米克尔森 (Erick Mickelsen) 指出了一些优点,但总结一下。

  1. for (... in ...)loop iterates over object properties
  2. arrayIS an object in Javascript so you may iterate over an array with it. But it will be slower and it is generaly not recommended (see why is that)
  3. The fact that it iterates over properties rather than values means, that it returns indexes rather than array values (this may be handy when you have associative arrays)
  4. The example in the question may be solved with for (... in ...)loop
  1. for (... in ...)循环遍历对象属性
  2. array在 Javascript 中是一个对象,所以你可以用它迭代一个数组。但它会更慢,一般不推荐(看看为什么
  3. 它迭代属性而不是值的事实意味着它返回索引而不是数组值(当您有关联数组时,这可能很方便)
  4. 问题中的例子可以用for (... in ...)循环解决

as follows:

如下:

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

In the associative array example the for (... in ...)loop will be handy:

在关联数组示例中,for (... in ...)循环将很方便:

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

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

回答by Eric Mickelsen

for (... in ...)iterates over the properties of an object, not the elements of an array. w3schools, javascript garden

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

回答by Tim Joyce

I use this dump() function all the time to debug my multi-dimensional arrays.

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

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

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

If you have questions about implementing it, let me know.

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