在 JavaScript 中循环遍历数组

沉浮于社会

在 Java 中，你可以用for循环遍历数组中的对象如下：
! T2 h: t& ?+ m: YString[] myStringArray = {"Hello","World"};for (String s : myStringArray){    / Do something}你能在 JavaScript 做同样的事吗？
                                                               
$ w1 i; [: ]( T2 R" }    解决方案:                                                               
3 N& K: d9 V) a, r  R                                                                三大选项：
' Z3 i( P! o' @' a1 }$ k[ol]for (var i = 0; i
' `$ q( z2 Y+ D/ H9 mxs.forEach((x,i) => console.log(x));
for (const x of xs) { console.log(x); }[/ol]详细示例如下。
1.顺序for循环：

• var myStringArray = ["Hello","World"];var arrayLength = myStringArray.length;for (var i = 0; i 优点
    k" X: g' V# a/ m% }, Z4 K
• 
  
• 适用于各种环境
  : B5 r3 p3 Y8 H7 h
• 您可以使用break和continue流控制语句缺点
  . v  z  k9 `& e* U& @) ?4 \
• 
  6 O' d! {- N+ e( ?; |; k
• 太冗长
  
• 至关重要的
  
• 一个错误很容易出现(有时也被称为一个错误)栅栏柱错误）2 Array.prototype.forEach.：所述ES说明书介绍了许多有益的阵列方法。其中之一，Array.prototype.forEach，给我们一个迭代数组的简单方法：[code]const array = ["one","two","three"]array.forEach(function (item,index) {  console.log(item,index);});
  

距离编写 ES5 标准发布时间(2009年 12 月)近十年，几乎所有现代引擎都在桌面、服务器和移动环境中实现，使用安全。
8 A' P/ z- X  r$ K1 y+ M. [  N! `2 ^并且使用 ES6 箭头函数语法更简洁：
1 ^. R3 J7 F& W) o" k

array.forEach(item => console.log(item));

除非您计划支持古老的平台（例如，Internet Explorer 11)，否则箭头函数也会被广泛实现；你也可以安全地去。
优点
非常简短和简洁。
  Q# n' y/ X9 d声明式缺点
- d! `0 [# |+ I$ F; a不能使用break/continue通常，你可以break通过在迭代数组元素之前过滤数组元素来替换退出命令循环的需要，例如：

array.filter(item => item.condition  console.log(item))
0 t6 v+ {" F7 V3 N9 P: j' k

请记住，如果您正在迭代一个数组构建另一个数组，您应该使用map. 我多次看到这种反模式。
反模式：

• const numbers = doubled = [];numbers.forEach((n,i) => { doubled = n * 2 }code]*地图的*正确用例：[code]const numbers = [1，2，3，4，5]；const doubled = numbers.map(n => n * 2);console.log(doubled);
  

另外，如果你想的话降低例如，要总结数字数组，你应该使用它减少方法。
反模式：

) p& ^* g8 g; a; C& G1 {& d9 z
• const numbers = [1，2，3，4，5]；const sum = 0;numbers.forEach(num => { sum  = num(//code]正确使用*reduce*：[code]const numbers = [1，2，3，4，5]；const sum = numbers.reduce((total,n) => total   n,0);console.log(sum);
  

3. ES6for-of声明：所述ES6标准引入了迭代对象的概念，并限制了新的构建for...of的语句。
+ v- ~1 `* t9 x1 l: J. ^0 y该语句适用于任何类型的可迭代对象和生成器(任何具有\[Symbol.iterator\]属性对象)。
1 v. G4 a6 u# ~, M: H/ [1 A6 m数组对象是 ES内置可迭代对象在6 中定义，因此您可以使用以下句子：
: s! w; m! Y% m+ s3 B

let colors = ['red','green','blue'];for (const color of colors){    console.log(color);}

优点
它可以迭代各种对象。
可以使用正常的流控制语句（break/ continue）。
对迭代串行异步值非常有用。缺点
' C9 s, P8 g7 X$ @2 q, ?/ Y9 Y) E如果你的目标是旧浏览器，转译后的输出可能会让你大吃一惊。不使用 for...in@zipcodeman 建议使用这个for...in语句，但for-in该语句旨在避免迭代数组枚举对象属性。
由于：
不保证迭代顺序；数组索引可能不会按数字顺序访问。
还列出了继承的属性。第二点是，如果你扩展，它会给你带来很多问题。Array.prototype如果对象包含一种方法，则该属性也将被列举。
& A; S0 U% Q' y例如：

Array.prototype.foo = "foo!";var array = ['a','b','c'];for (var i in array)    console.log(array);}

控制台记录上述代码a”、“b”、“c”和“foo！”。
如果使用一些严重依赖原型增强的库(如MooTools），这可能是一个特殊的问题。
6 Y& Q! k1 l5 w8 I' h5 n& Zfor-in正如我之前所说，这句话是用来用的枚举例如：
4 `8 X6 V. d8 Q* y[code]var obj =    "a": 1,   "b": 2,   "c": 3};for (var prop in obj)    if (obj.hasOwnProperty(prop))        // or if (Object.prototype.hasOwnProperty.call(obj,prop)) for safety...        console.log("prop: "   prop   " value: "   obj[prop])  code]在上面的例子中，该hasOwnProperty方法只允许您枚举自己的属性。这样，只有对象物理的属性，没有继承的属性。