js中我最常用的幾種遍歷處理資料的方法梳理

https://blog.csdn.net/wanwan5856/article/details/79618024

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