js有很多總迭代方法，ES6之后又新增了幾個；

這里主要討論數組迭代遍歷的方法所以不會細講for...in...

ES5、ES6數組迭代方法有：

• forEach
• map
• filter
• some
• every
• reduce/reduceRight
• find/findIndex? ?(ES6新增)
• for...of...? (ES6新增)

forEach

forEach對數組的每個元素執行一次提供的函數。forEach方法無法中斷執行總是會將所有成員遍歷完，如果希望符合某種條件時就中斷的話遍歷時要使用傳統for循環，forEach無法 使用break,continue跳出循環，使用return時效果和在for循環中使用continue一樣。最為重要的一點是可以添加第二個參數，為一個數組而且回調函數中的this會指向這個數組而如果沒有第二個參數則this會指向window，嚴格模式下是undefined。

1 var arr = [1, 2, 3]; 2 3 arr.forEach(function (element, index, array) { 4 console.log(element, index, array) 5 }) 6 7 //output 8 1 0 [1, 2, 3] 9 2 1 [1, 2, 3] 10 3 2 [1, 2, 3]

map

map方法的作用就是將原數組按照一定的規則映射成一個新的數組。再將其返回，是返回一個新的數組，而不是將原數組直接改變。使用方法和參數都跟forEach相似。值得注意的是map需要有返回值，

沒有的話某些情況下返回數組中元素為undefined

1 var data = [1, 2, 3]; 2 var arrayOfSquares = data.map(function (element) { 3 return element * element; 4 }); 5 console.log(arrayOfSquares); //[1, 4, 9]

filter

filter返回過濾后的新數組。用法和參數跟map差不多。與map方法不同的是，filter方法的callback函數需要返回弱等于true或false的值。如果為true，則通過，否則，不通過。

1 var arr = [0, 1, 2, 3]; 2 var newArr = arr.filter(function (element, index, array) { 3 return e; 4 }) 5 var newArr2 = arr.filter(function (element, index, array) { 6 return e>=2; 7 }) 8 console.log(newArr); // [1, 2, 3] 9 console.log(newArr2); // [2, 3]

some

some方法是只要數組中的某個值，符合你給定的判斷條件就返回true；否則，返回false。用法和參數跟前面的方法一樣。

1 function isBigEnough(element, index, array) { 2 return element >= 4; 3 } 4 var passed = [1, 2, 3].some(isBigEnough); 5 var passed2 = [1, 2, 3, 4].some(isBigEnough); 6 7 console.log(passed); // false 8 console.log(passed2); // true

every

every方法與some方法相對，every方法是數組中的所有值都符合你給定的判斷條件的時候才會返回true，否則就返回false。

1 function isBigEnough(element, index, array) { 2 return element >= 3; 3 } 4 var passed = [2, 3, 4].every(isBigEnough); 5 var passed2 = [3, 4, 5].every(isBigEnough); 6 7 console.log(passed); // false 8 console.log(passed2); // true

reduce/reduceRight

reduce/reduceRight相對比較復雜，其接收兩個參數，第一個是回調，第二個是初始值初始值不寫的話默認就是回調中的第一個參數。

array.reduce(callback,[initialValue])

其中callback可以依次接受四個參數：

• accumulator上一次調用回調返回的值，或者是提供的初始值（initialValue）

• currentValue數組中正在處理的元素

• currentIndex數組中正在處理的元素索引，如果提供了initialValue?，從0開始；否則從1開始。

• array數組對象本身

1 var sum = [0,1,2,3,4].reduce(function(accumulator, currentValue, currentIndex, array){ 2 console.log(accumulator, currentValue, currentIndex, array) 3 return accumulator + currentValue; 4 }); 5 console.log(sum); 6 7 // output 8 0 1 1 [0, 1, 2, 3, 4] 9 1 2 2 [0, 1, 2, 3, 4] 10 3 3 3 [0, 1, 2, 3, 4] 11 6 4 4 [0, 1, 2, 3, 4] 12 10

傳入第二個參數的時候

1 var sum = [0,1,2,3,4].reduce(function(accumulator, currentValue, currentIndex, array){ 2 console.log(accumulator, currentValue, currentIndex, array) 3 return accumulator + currentValue; 4 }, 10); 5 console.log(sum); 6 7 // output 8 10 0 0 [0, 1, 2, 3, 4] 9 10 1 1 [0, 1, 2, 3, 4] 10 11 2 2 [0, 1, 2, 3, 4] 11 13 3 3 [0, 1, 2, 3, 4] 12 16 4 4 [0, 1, 2, 3, 4] 13 20

從上面的情況可以看出：不提供initialValue?，reduce方法會從索引1的地方開始執行callback方法，跳過第一個索引。提供?initialValue，從索引0開始。
同時，是否提供initialValue對于回調函數第一次執行時，accumulator和currentValue的取值有兩種情況：調用reduce時提供initialValue，accumulator取值為initialValue，currentValue取數組中的第一個值；沒有提供initialValue?，accumulator取數組中的第一個值，currentValue取數組中的第二個值。

reduceRight與reduce類似，不同之處在于它是從最后一個值開始計算的。

find / findIndex

find方法用于找出第一個符合條件的數組成員。它的參數跟forEach方法是一樣的；所有數組成員依次執行回調函數，直到找出第一個返回值為true的成員，然后返回該成員。如果沒有符合條件的成員，則返回undefined。findIndex方法和find相似；不過它返回數組中符合條件的元素的索引。如果所有成員都不符合條件，則返回-1。

find

1 var value = [1, 5, 10, 15].find(function(element, index, array) { 2 return element > 9; 3 }); 4 var value2 = [1, 5, 10, 15].find(function(element, index, array) { 5 return element > 20; 6 }); 7 8 console.log(value); // 10 9 console.log(value2); // undefined

findIndex

1 var value = [1, 5, 10, 15].findIndex(function(element, index, array) { 2 return element > 9; 3 }); 4 var value2 = [1, 5, 10, 15].findIndex(function(element, index, array) { 5 return element > 20; 6 }); 7 8 console.log(value); // 2 9 console.log(value2); // -1

for...of...

for...of...是ES6新增的一個循環遍歷方式用法跟for...in...差不多但是這個常用于數組操作

1 var arr = [0, 1, 2, 3]; 2 3 for(let i of arr) { 4 console.log(i*2) 5 } 6 //0 7 //2 8 //4 9 //6

for...of...也可以遍歷字符串

1 var str = "string" 2 3 for(let s of str) { 4 console.log(s) 5 } 6 // s 7 // t 8 // r 9 // i 10 // n 11 // g

以上就是常見一些數據(基本上是數組)迭代遍歷的一些API，有不對的歡迎大家指正

?

轉載于:https://www.cnblogs.com/leungUwah/p/8481681.html

總結

以上是生活随笔為你收集整理的JavaScript数据迭代方法差别的全部內容，希望文章能夠幫你解決所遇到的問題。

如果覺得生活随笔網站內容還不錯，歡迎將生活随笔推薦給好友。