簡述forEach()、map()、filter()、every()、some()的用法

hst❀發表於2020-11-24

1.forEach()

用於遍歷陣列,無返回值。

var arr = [1,-2,3,4,-5];
arr.forEach(function(item,index,array){
    array[index] = item * 2;
});
console.log(arr);   // [2,-4,6,8,-10]

可以看到,forEach()可以傳入一個匿名函式作為引數,而該匿名函式有含有三個引數,其依次代表陣列遍歷時的當前元素item,陣列遍歷時的當前元素的索引index,以及正在遍歷的陣列array。有了這三個引數,可以方便我們做很多事情,比如說示例當中將每一項陣列元素翻倍,這時需要用到第一個引數item。但是,僅僅只是將item乘以2可不行,我們還得將其賦值給原來的陣列,這時我們就得用到後面兩個引數index和array。

根據上述可知,array[index]是全等於item的。

arr.forEach(function(item,index,array){
    console.log(array[index] === item);   // true
});

2.map()

用於遍歷陣列,返回處理之後的新陣列,處理陣列後不會影響到原有陣列。

var arr = [1,-2,3,4,-5];
var newArr = arr.map(function(item,index,array){
    return item * 2;
});
console.log(newArr);   // [2,-4,6,8,-10]

3.filter()

用於篩選陣列中滿足條件的元素,返回一個篩選後的新陣列,不會影響到原有陣列。

var arr = [1,-2,3,4,-5];
var minus = arr.filter(function(item,index,array){
    return item < 0;
});
console.log(minus);   // [-2, -5]

4.every()

用於判斷陣列中的每一項元素是否都滿足條件,返回一個布林值。

var arr = [1,-2,3,4,-5];
var isEvery = arr.every(function(item,index,array){
    return item > 0;
});
console.log(isEvery);   // false

5.some()

用於判斷陣列中的是否存在滿足條件的元素,返回一個布林值。

var arr = [1,-2,3,4,-5];
var isSome = arr.some(function(item,index,array){
    return item < 0;
});
console.log(isSome);   // true

補充

以上五大方法除了傳遞一個匿名函式作為引數之外,還可以傳第二個引數,該引數用於指定匿名函式內的this指向,例如:

// 只傳一個匿名函式
arr.forEach(function(item,index,array){
    console.log(this);  // window
});
// 傳兩個引數
arr.forEach(function(item,index,array){
    console.log(this);  // [1, -2, 3, 4, -5]
},arr);

總結

  • forEach()無返回值,map()和filter()返回新陣列,every()和some()返回布林值;
  • 匿名函式中this指向預設為window,可通過傳第二引數來更改之;
  • 五種遍歷方法均為ES5方法,IE8及其以下瀏覽器均不相容。

相關文章