飞码网-免费源码博客分享网站

点击这里给我发消息

如何遍历JavaScript中的数组|-Javascript教程

飞码网-免费源码博客分享网站 爱上飞码网—https://www.codefrees.com— 飞码网-matlab-python-C++ 爱上飞码网—https://www.codefrees.com— 飞码网-免费源码博客分享网站

问题:

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

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

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

回答:

1.顺序for循环:

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

优点

  • 适用于各种环境
  • 您可以使用breakcontinue流控制语句

缺点

  • 太冗长
  • 势在必行
  • 容易出现一对一错误(有时也称为栅栏错误

2. 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));

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

优点

  • 非常简短。
  • 陈述式

缺点

  • 无法使用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);

 

3. ES6for-of声明

所述ES6标准引入了迭代对象的概念,并且限定用于遍历数据时,一个新的构建for...of的语句。

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

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

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

优点

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

缺点

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

不使用 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方法仅允许您枚举自己的属性就是这样,只有对象物理上具有的属性,没有继承的属性。

飞码网-免费源码博客分享网站 爱上飞码网—https://www.codefrees.com— 飞码网-matlab-python-C++ 爱上飞码网—https://www.codefrees.com— 飞码网-免费源码博客分享网站
赞 ()
内容页底部广告位3
留言与评论(共有 0 条评论)
   
验证码: