JS数组与对象遍历方法：for、forEach、map、filter、reduce等详解

本文通过具体示例，详细解析JavaScript中数组与对象的常见遍历实现方式，供开发者参考学习。

数组的遍历方式

一、数组的遍历方式

首先创建一个测试数组。


arr=['snow','bran','king','nightking'];

1、使用for循环，该方法需要预先明确数组的长度。

2、使用foreach方法，此方法不返回具体值，且无需获取数组长度即可执行。


arr.forEach(function(ele,index){
console.log(index);
console.log(ele)
})

3、使用map函数，该方法遍历数组每个元素并执行回调，需要返回处理结果，最终将所有返回值组成新数组，原数组保持不变。


var newarr=arr.map(function(i){
  return "hello "+i
});
console.log(newarr)

4、使用filter函数：用于筛选符合特定条件的元素并组成新数组，原数组内容不变。


var newarr=arr.filter(function(i){
  return i == "bran"
});
console.log(newarr)

5、使用some函数，用于检查数组中是否存在至少一个符合条件的元素，返回布尔值。


var yy=arr.some(function(i){
  return i.length>4
});
console.log(yy)       //true

6、使用every函数，用于判断数组中是否每个元素都符合特定条件，返回布尔值。


var xx=arr.every(function(i){
  return i.length>4
});
console.log(xx)       //false

7、使用reduce函数，用于对数组中的每一个元素依次执行指定的回调函数。

其语法结构如下：


arr.reduce(callback, initialValue)


[0,1,2,3,4].reduce(function(previousValue, currentValue, index, array){
 return previousValue + currentValue;
});

callback: 这是一个执行数组中每个值的函数，接收四个参数；

previousValue：上一次调用回调返回的值，或者是提供的初始值(initialValue)；
currentValue: 当前正在处理的元素值；
index：当前元素在数组中的索引位置；
array：调用reduce方法的源数组；
initialValue：作为第一次调用callback时的第一个参数。

具体应用示例如下：


var total = [0, 1, 2, 3].reduce(function(a, b) {
  return a + b;
});
// total == 6
var flattened = [[0, 1], [2, 3], [4, 5]].reduce(function(a, b) {
  return a.concat(b);
});
// flattened is [0, 1, 2, 3, 4, 5]

若需指定initialValue参数，示例如下：


var total = [0, 1, 2, 3].reduce(function(a, b) {
   return a + b;
},4);
console.log(total); //10

对象的遍历方法

二、对象的遍历方法


var obj={snow:1,bran:2,king:3,nightking:4};
for(let i in obj){
  console.log(i+','+obj[i])
}

in关键字同样可用于遍历数组，不过此时i对应于数组的key值（即索引）。


for(let i in arr){
  console.log(i+','+arr[i])
}

PS：这里再为大家推荐一款JS数组遍历方式分析对比工具供大家参考：

在线JS常见遍历方式性能分析比较工具：http://tools.jb51.net/aideddesign/js_bianli

更多关于JavaScript相关内容感兴趣的读者可查看本站专题：《JavaScript数组操作技巧总结》、《JavaScript遍历算法与技巧总结》、《javascript面向对象入门教程》、《JavaScript数学运算用法总结》、《JavaScript数据结构与算法技巧总结》及《JavaScript错误与调试技巧总结》

希望本文所述对大家JavaScript程序设计有所帮助。

JavaScript数组与对象遍历方法详解

数组的遍历方式

对象的遍历方法

实用工具推荐