Array的 every、some、filter、map的區別，以及和reduce的區別

這幾個方法有時候老是傻傻分不清，尤爲map，老是一會兒有點懵逼記不清和其餘方法的區別，每次都須要查一下API，他們的相同點都是須要遍歷數組中的每一項，重點是他們的區別，不要搞混了，搞清楚他們的返回結果有什麼區別。

every、some

這兩個比較好理解，測試數組的元素是否都經過了指定函數的測試，測試一個數組是否符合某個條件，every表示每一項都必須經過纔會返回true，some表示只要數組元素某一項知足便可，好比下面的例子，分別用 every 和 some 調用。

 

var arr = [1, 12, 32, 2, 3, 44, 120, 3, 5];

var res1 = arr.every(function(item, index){

    return item > 20;

});

console.log(res1); // false

var res2 = arr.some(function(item, index){

    return item > 20;

});

console.log(res2); // true

filter

調用 filter 的結果是建立一個新數組，數組的元素是經過所提供函數經過測試的全部元素

var res3 = arr.filter(function(item, index, array){

  return item > 20;

});

console.log(res3); // 32,44,120

 

var res33 = arr.filter(function(item, index, array){

  return item * 2;

});

console.log('res33', res33); // 1, 12, 32, 2, 3, 44, 120, 3, 5

 

 

若是處理表達式是運算，將無效，返回元素組成員組成的數組

 

這個一點能夠和 map 比較一下

map

調用map 的結果也是建立一個新數組，不一樣的是：

• 若是給定的處理函數的表達式是邏輯判斷，它返回的是布爾值組成的數組

   

  var res4 = arr.map(function(item, index, array){
  
    return item > 20;
  
  });
  
  console.log(res4); // false,false,true,false,false,true,true,false,false

   

• 若是給定處理函數的表達式是運算表達式，它返回的是每一項運算後的結果的數組

   

  var res5 = arr.map(function(item, index, array){
  
    return item * 2;
  
  });
  
  console.log(res5); // 2,24,64,4,6,88,240,6,10

   

reduce

reduce方法對累加器和數組中的每一個元素（從左到右）應用一個函數，將其減小爲單個值。回調函數有兩個必須的參數：

• accumulator，累加器累加回調的返回值; 它是上一次調用回調時返回的累積值
• currentValue，數組中正在處理的元素。

• var res6 = arr.reduce(function(accumulator, item){
  
    return accumulator + item;
  
  });
  
  console.log(res6); // 222

   

reduce的最重要點就是利用累加器參數(accumulator)了，若是值操做第二個參數 item, 將會只處理數組最後一項，跟for循環中的i的效果同樣

var arr = [1, 12, 32, 2, 3, 44, 120, 3, 5];

var res66 = arr.reduce(function(accumulator, item){

  return item * 2;

});

console.log('res66', res66); // 10

上面的代碼試圖只操做 item ，結果只是返回了數組最後一項的處理結果：5 * 2 = 10

如下是對各個參數的解讀和例子

arr.reduce(callback,[initialValue])

callback （執行數組中每一個值的函數，包含四個參數）
 
    一、previousValue （上一次調用回調返回的值，或者是提供的初始值（initialValue））
    二、currentValue （數組中當前被處理的元素）
    三、index （當前元素在數組中的索引）
    四、array （調用 reduce 的數組）
 
initialValue （做爲第一次調用 callback 的第一個參數。）

第一個例子：

1. var arr = [1, 2, 3, 4];

2. var sum = arr.reduce(function(prev, cur, index, arr) {

3. console.log(prev, cur, index);

4. return prev + cur;

5. })

6. console.log(arr, sum);

打印結果：
1 2 1
3 3 2
6 4 3
[1, 2, 3, 4] 10

上面的例子index是從1開始的，第一次的prev的值是數組的第一個值。數組長度是4，可是reduce函數循環3次。

再看第二個例子：

1. var arr = [1, 2, 3, 4];

2. var sum = arr.reduce(function(prev, cur, index, arr) {

3. console.log(prev, cur, index);

4. return prev + cur;

5. }，0) //注意這裏設置了初始值

6. console.log(arr, sum);

 打印結果：
0 1 0
1 2 1
3 3 2
6 4 3
[1, 2, 3, 4] 10

這個例子index是從0開始的，第一次的prev的值是咱們設置的初始值0，數組長度是4，reduce函數循環4次。

 

結論：若是沒有提供initialValue，reduce 會從索引1的地方開始執行 callback 方法，跳過第一個索引。若是提供initialValue，從索引0開始。若是這個數組爲空，要是咱們設置了初始值就不會報錯.

以上我的總結，有不對的地方請指正。