js中常用的几种遍历处理数据的方法梳理

forEach，Object.keys，map，for in ，for of，reduce，every

1，forEach 用于遍历【数组】

data.forEach(( item, index ) => {
    console.log('元素：', item ,'；下标：', index)
})
 

2, Object.keys() 和 forEach() 结合遍历【对象】

Object.keys返回一个数组，数组元素是输入对象所有的键名的集合

Object.keys(testData).forEach((key)=>{    
    console.log(key) //键
    console.log(testData[key]) //值
}) 

注意：Object.keys出来的顺序不一定是对象属性原来的顺序，顺序和for..in相同。

另外Object.keys还有一个妙用就是获取对象的长度，在js中数组长度可用length得到，对象长度用length获取的结果是undefined，使用Object.keys(obj).length就可以得到对象长度了。
 

3，for...of  （es6）用于遍历【数组】内的【元素】，不包括原型属性和索引名

let myArray = [1,2,4,11,6,7]
for (let value of myArray) {
    console.log(value)  //一次输出元素1、2、4、11、6、7
}
 

4，for...in  （es5）用于遍历【对象/数组】内的【键名】，包括原型属性  （所以慎用！）

let myArray = ['a',123,{a:'1',b:'2'}] //或为对象myArray = {a:'1',b:'2'}
for(let index in myArray){
    console.log(index,myArray[index]) //输出键名 和 元素值
}

注意1：for..in会把某个类型的原型（prototype）中的方法与属性遍历出来，用代码解释如下：
let obj = {a: {aa: '123', b: {1,2,3} } }
Object.prototype.test = () => { console.log('123') }
for (let value in obj) {
    console.log(value)  //a, b,  test
}

不想遍历原型方法和属性的话，可以在循环内部使用hasOwnPropery方法可以判断某属性是否是该对象的实例属性
if(!array.hasOwnProperty(i)){
    continue;
}

注意2：for..in遍历对象{}时出来的顺序不一定是对象属性原来的顺序，顺序和Object.keys相同。
 

5，map 用于遍历【数组】产生一个新的元素值，返回一个新数组为这些新值的集合

 

 

6，reduce 用于遍历【数组】进行累计计算，返回结果是一个计算后最终的值

其实玩法很多，完整参数如下：
myArray.reduce((countOrFirst,curr,currindex,arr) => {
    console.log('第一个值/上次计算结果',countOrFirst,  '当前要计算的值',curr,  '当前元素的索引',currindex)
    console.log('当前元素所属的数组对象',arr)
    return countOrFirst + curr
}, firstValue)
 

7，every 用于遍历【数组】并且为数组元素调用callbackfn，返回结果是boolean值

当每一次callbackfn返回true时every返回true，否则false

 

原文链接：https://blog.csdn.net/qq_20069429/article/details/81568046