在JavaScript中循环遍历数组

2019-09-10 23:39:06 阅读：203 来源： 互联网

在Java中,您可以使用for循环遍历数组中的对象,如下所示：

String[] myStringArray = {"Hello", "World"};
for (String s : myStringArray)
{
    // Do something
}

你能用JavaScript做同样的事吗？

解决方法:

你有几个选择：

1.循环顺序：

var myStringArray = ["Hello","World"];
var arrayLength = myStringArray.length;
for (var i = 0; i < arrayLength; i++) {
    console.log(myStringArray[i]);
    //Do something
}

优点

>适用于各种环境
>您可以使用break和continue流控制语句

缺点

>太冗长了
>势在必行
>容易拥有off-by-one errors

2. Array.prototype.forEach

ES5规范.介绍了很多非常有用的数组方法,其中之一是Array.prototype.forEach,它为我们提供了一种迭代数组的简短方法：

const array = ["one", "two", "three"]
array.forEach(function (item, index) {
  console.log(item, index);
});

在编写ES5规范的时候差不多9年了.发布时间(2009年12月),它已经被桌面,服务器和移动环境中的几乎所有现代引擎实现,因此使用它们是安全的.

使用ES6箭头函数语法,它更简洁：

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

Arrow功能也正在广泛实施,除非您计划支持非常旧的平台(例如IE11),您也可以安全使用.

优点

>非常短暂和娴熟.
>陈述性

缺点

>不能使用break / continue

通常,您可以通过在迭代数组元素之前过滤数组元素来替换打破命令循环的需要,例如：

array.filter(item => item.condition < 10)
     .forEach(item => console.log(item))

请记住,如果您正在迭代一个数组以从中构建另一个数组,那么您应该使用map,我已经多次看到过这种反模式.

反模式：

const numbers = [1,2,3,4,5], doubled = [];

numbers.forEach((n, i) => { doubled[i] = n * 2 });

适当的地图用例：

const numbers = [1,2,3,4,5];
const doubled = numbers.map(n => n * 2);

console.log(doubled);

此外,如果您尝试将数组减少为某个值,例如,您想要对数字数组求和,则应使用reduce方法.

反模式：

const numbers = [1,2,3,4,5];
const sum = 0;
numbers.forEach(num => { total += num });

正确使用reduce：

const numbers = [1,2,3,4,5];
const sum = numbers.reduce((total, n) => total + n, 0);

console.log(sum);

3. ES6 for-statement

ES6标准引入了可迭代对象的概念,并定义了一个用于遍历数据的新构造,即for … of语句.

此语句适用于任何类型的可迭代对象以及生成器.

根据定义,数组对象是ES6中内置的可迭代对象,因此您可以对它们使用此语句：

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

优点

>可以迭代各种各样的对象.
>可以使用正常的流量控制语句(中断/继续).
>用于迭代串行异步值.

缺点

>如果您将旧版浏览器定位为已转换的输出might surprise you.

不要用于… in

@zipcodeman建议使用for … in语句,但是应该避免迭代数组for-in,该语句用于枚举对象属性.

它不应该用于类似数组的对象,因为：

>不保证迭代的顺序,可能无法按数字顺序访问数组索引.
>还枚举了继承的属性.

第二点是它可以给你带来很多问题,例如,如果你扩展Array.prototype对象以包含一个方法,那么该属性也将被枚举.

例如：

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

上面的代码将控制“a”,“b”,“c”和“foo！”.

如果你使用一些严重依赖原生原型增强的库(例如MooTools),这尤其成问题.

我前面说过的for-in语句是枚举对象属性,例如：

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])
      }
    }

在上面的示例中,hasOwnProperty方法允许您只枚举自己的属性,就是它,只有对象物理上具有的属性,没有继承属性.

我建议你阅读以下文章：

> Enumeration VS Iteration

标签：javascript,arrays,loops,for-loop
来源： https://codeday.me/bug/20190910/1802163.html

本站声明： 1. iCode9 技术分享网（下文简称本站）提供的所有内容，仅供技术学习、探讨和分享；
2. 关于本站的所有留言、评论、转载及引用，纯属内容发起人的个人观点，与本站观点和立场无关；
3. 关于本站的所有言论和文字，纯属内容发起人的个人观点，与本站观点和立场无关；
4. 本站文章均是网友提供，不完全保证技术分享内容的完整性、准确性、时效性、风险性和版权归属；如您发现该文章侵犯了您的权益，可联系我们第一时间进行删除；
5. 本站为非盈利性的个人网站，所有内容不会用来进行牟利，也不会利用任何形式的广告来间接获益，纯粹是为了广大技术爱好者提供技术内容和技术思想的分享性交流网站。

ICode9

在JavaScript中循环遍历数组