在 JavaScript 中循环遍历数组

沉浮于社会

在 Java 中，你可以用for循环遍历数组中的对象如下：
String[] myStringArray = {"Hello","World"};for (String s : myStringArray){    / Do something}你能在 JavaScript 做同样的事吗？
6 m2 t$ t  }+ J  ?$ @6 H$ {5 x                                                               
    解决方案:                                                               
                                                                三大选项：
[ol]for (var i = 0; i
xs.forEach((x,i) => console.log(x));
" I% u7 B$ E, N& F: Ifor (const x of xs) { console.log(x); }[/ol]详细示例如下。
  P9 s! u7 s/ l6 A9 b( S% {. o1.顺序for循环：

, s( Q% V) q/ b" g) `# B$ I- n/ `
• var myStringArray = ["Hello","World"];var arrayLength = myStringArray.length;for (var i = 0; i 优点
  % u( X+ H4 _6 ~: ?. ]( |
• 
  
• 适用于各种环境
  / i1 E& o8 e+ S5 j+ k' R
• 您可以使用break和continue流控制语句缺点
  
• 
  1 R6 c% y, j$ R  c/ G
• 太冗长
  $ k/ l) p2 O# ^0 }* ]
• 至关重要的
  $ H6 u# s$ E* F
• 一个错误很容易出现(有时也被称为一个错误)栅栏柱错误）2 Array.prototype.forEach.：所述ES说明书介绍了许多有益的阵列方法。其中之一，Array.prototype.forEach，给我们一个迭代数组的简单方法：[code]const array = ["one","two","three"]array.forEach(function (item,index) {  console.log(item,index);});
  6 M: C* d, }( x  n

距离编写 ES5 标准发布时间(2009年 12 月)近十年，几乎所有现代引擎都在桌面、服务器和移动环境中实现，使用安全。
并且使用 ES6 箭头函数语法更简洁：

array.forEach(item => console.log(item));
; n" Z" _  G! o) d. q& k

除非您计划支持古老的平台（例如，Internet Explorer 11)，否则箭头函数也会被广泛实现；你也可以安全地去。
优点
# Q4 X9 o& D" S  t3 j; G1 E非常简短和简洁。
声明式缺点
不能使用break/continue通常，你可以break通过在迭代数组元素之前过滤数组元素来替换退出命令循环的需要，例如：

array.filter(item => item.condition  console.log(item))
- \/ s2 A6 I# E" [

请记住，如果您正在迭代一个数组构建另一个数组，您应该使用map. 我多次看到这种反模式。
$ p5 l# g& L! f/ n9 s0 ^8 ~! H反模式：
' {0 \7 w+ t# V

+ Q3 c+ \) H' n
• 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);
  9 X& M2 @/ `% b4 A+ M% R; [; T

另外，如果你想的话降低例如，要总结数字数组，你应该使用它减少方法。
' }, R* P- Y+ d: e反模式：

• 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的语句。
该语句适用于任何类型的可迭代对象和生成器(任何具有\[Symbol.iterator\]属性对象)。
9 ^# n# Q! y" B) w* F2 I! x数组对象是 ES内置可迭代对象在6 中定义，因此您可以使用以下句子：

let colors = ['red','green','blue'];for (const color of colors){    console.log(color);}
9 u/ ^( q3 W6 ~; t" J) f

优点
它可以迭代各种对象。
5 T+ n; K( G  ]4 ?) q( P可以使用正常的流控制语句（break/ continue）。
对迭代串行异步值非常有用。缺点
5 v' P3 i. U1 i" Z3 Z( v如果你的目标是旧浏览器，转译后的输出可能会让你大吃一惊。不使用 for...in@zipcodeman 建议使用这个for...in语句，但for-in该语句旨在避免迭代数组枚举对象属性。
由于：
不保证迭代顺序；数组索引可能不会按数字顺序访问。
还列出了继承的属性。第二点是，如果你扩展，它会给你带来很多问题。Array.prototype如果对象包含一种方法，则该属性也将被列举。
4 i* B: [: A( k7 z  x, p' z例如：

Array.prototype.foo = "foo!";var array = ['a','b','c'];for (var i in array)    console.log(array);}
' J) B" T% O* Z( J

控制台记录上述代码a”、“b”、“c”和“foo！”。
如果使用一些严重依赖原型增强的库(如MooTools），这可能是一个特殊的问题。
  Q' F) }5 L5 R' {4 W8 Kfor-in正如我之前所说，这句话是用来用的枚举例如：
/ d" [/ X9 o- r$ h& N) V+ f[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方法只允许您枚举自己的属性。这样，只有对象物理的属性，没有继承的属性。