JavaScript陣列的5種迭代方式
阿新 • • 發佈:2019-02-12
ECMAScript 5 為陣列定義了5個迭代方法。每個方法都接收兩個引數: 要在每一項上執行的函式和(可選的)執行該函式的作用域物件–影響this的值。 傳入的這些方法中的函式會接收三個引數: 陣列項的值, 該項在陣列中的位置和陣列物件本身。 根據使用的方法不同,這個函式執行後的返回值可能會也可能不會影響訪問的返回項。一下是這5個迭代方法的作用。
every() : 對陣列中的每一項執行給定的函式,如果該函式對每一項都返回true,則返回true。
filter() : 對陣列中的每一項執行給定的函式, 返回該函式會返回true的項組成的陣列。
forEach() : 對陣列中的每一項執行給定的函式。這個方法沒有返回值。
map() : 對陣列中的每一項執行給定的函式, 返回每次函式呼叫的結果組成的陣列。
some() : 對陣列中的每一項執行給定的函式,如果該函式對任一項返回true,則返回true。
請看下面的例子:
ES5:
var numbers = [1,2,3,4,5,4,3,2,1]
var everyReault = numbers.every(function(item, index, arr){
return item > 2;
})
console.log(everyResult); //false
var someResult = numbers.some(function(item, index, arr){
return item >2;
})
console.log(someResult) //true
ES6:
var numbers = [1,2,3,4,5,4,3,2,1];
var everyResult = numbers.every((item, index, arr)=>{
return item >2;
})
console.log(everyResult);
var someResult = numbers.some((item, index, arr)=>{
return item > 2;
})
console.log(someResult)
以上程式碼呼叫了every()
和some()
,傳入的函式只要給定項大於2就會返回true
。對於every()
,它返回的是false
,因為只用部分陣列項符合條件。對於some()
,結果就是true
,因為至少有一項是大於2的。
下面來看filter()
函式,它利用指定的函式確定是否在返回的陣列中包含的某一項。
ES5:
var numbers = [1,2,3,4,5,4,3,2,1];
var filterResult = numbers.filter(function(item. index, arr){
return item > 2;
})
console.log(filterResult); //[3,4,5,4,3]
var mapResult = numbers.map(function(item, index, arr){
return itme * 2;
})
console.log(mapResult); //[2,4,6,8,10,8,6,2]
ES6:
var numbers = [1,2,3,4,5,4,3,2,1];
var filterResult = numbers.filter((item, index, arr)=>{
return item > 2;
})
console.log(filterResult)
var mapResult = numbers.map((item, index, arr)=>{
return item * 2;
})
console.log(mapResult);
呼叫filter()
方法建立並返回[3,4,5,4,3],因為傳入的函式對它們每一項都是true
。
呼叫map()
方法也返回一個數組,而這個陣列的每一項都是在原始陣列中對應項上執行傳入函式的結果。
最後一個方法是forEach()
,它只對陣列中的每一項執行傳入的函式。這個方法沒有返回值,本質上和for迴圈迭代陣列一樣。
ES5:
var numbers = [1,2,3,4,5,4,3,2,1]
numbers.forEach(function(item, index, arr){
//this it options
})
ES6:
var numbers = [1,2,3,4,5,4,3,2,1]
numbers.forEach((item. index, arr)=>{
//options
})