遍历JavaScript中的数组-问答-阿里云开发者社区-阿里云

开发者社区> 问答> 正文

遍历JavaScript中的数组

保持可爱mmm 2020-01-08 13:40:28 90

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

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

您可以在JavaScript中做同样的事情吗?

JavaScript 前端开发 Java
分享到
取消 提交回答
全部回答(1)
  • 保持可爱mmm
    2020-01-08 13:40:49
    已采纳

    您有几种选择: 1.顺序for循环:

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

    优点

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

    缺点

    太冗长
    势在必行
    容易出现一对一错误(有时也称为栅栏错误)
    
    1. Array.prototype.forEach

    ES5规范引入了许多有益的数组方法,其中之一是,Array.prototype.forEach它为我们提供了一种遍历数组的简洁方法:

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

    ES5规范发布时(截至2009年12月)已经有将近十年的时间,它已经由台式机,服务器和移动环境中的几乎所有现代引擎实现,因此可以安全地使用它们。

    借助ES6箭头函数语法,它更加简洁:

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

    除非计划支持古老的平台(例如IE11),否则箭头功能也得到了广泛的实现。你也很安全。

    优点

    非常简短。
    陈述式
    

    缺点

    无法使用break/continue
    

    通常,您可以break通过在迭代数组元素之前对其进行过滤来替换命令式循环,例如:

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

    map的正确用例:

    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 => { sum += num });

    正确使用reduce:

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

    console.log(sum);

    1. ES6 for-of声明

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

    该语句适用于任何种类的可迭代对象,也适用于生成器(任何具有[Symbol.iterator]属性的对象)。

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

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

    优点

    它可以遍历各种各样的对象。
    可以使用普通的流控制语句(break/ continue)。
    对迭代串行异步值很有用。
    

    缺点

    如果您以较旧的浏览器为目标,则转换后的输出可能会让您感到惊讶。
    

    不使用 for...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方法仅允许您枚举自己的属性,仅枚举对象物理上具有的属性,而没有枚举属性。

    问题来源于stack overflow

    0 0
开发与运维
使用钉钉扫一扫加入圈子
+ 订阅

集结各类场景实战经验,助你开发运维畅行无忧

推荐文章
相似问题
推荐课程