1 reduce方法同時實現map和filter

假設現在有一個數組，然後遍歷它的每一項（map的功能）然後篩選出其中的一部分（filter的功能）。如果使用map和filter的話，我們需要遍歷這個陣列兩次。

在下面的程式碼中，我們將數列中的值翻倍，然後挑選出那些大於50的數：

const numbers = [10, 20, 30, 40];
const numOver50 = numbers.reduce((finalArr, num) => {
  num = num * 2;
  if (num > 50) {
    finalArr.push(num);
  }
  return
 
 finalArr;      //finalArr為最後符合篩選條件的陣列
}, []);
numOver50;            // [60, 80]

2 統計陣列中相同項的個數

很多時候，我希望統計陣列中重複出現項的個數然後用一個物件表示。那麼我們可以使用reduce方法處理這個陣列。

下面的程式碼將統計每一種car的數目然後把總數用一個物件表示。

var cars = ['BMW','Benz', 'Benz', 'Tesla', 'BMW', 'Toyota'];
var carsObj = cars.reduce(function (obj, name) {
  obj[name] 
 
= obj[name] ? ++obj[name] : 1;
  return obj;
}, {});
carsObj; // => { BMW: 2, Benz: 2, Tesla: 1, Toyota: 1 }

3 使用解構來交換引數數值

有時候我們會將函式返回的多個值放在一個數組裡。我們可以使用陣列解構來獲取其中每一個值。

let param1 = 1;
let param2 = 2;
[param1, param2] = [param2, param1];
console.log(param1) // 2
console.log(param2) // 1
//當然還有其他的方法進行交換之，例如
 

　　b = [a, a = b][0]；                   

　　a = a + b; b = a - b; a = a - b  ；    

 var temp = a; a = b; b = temp ；

4 接收函式返回的多個結果

在下面的程式碼中，我們從/post中獲取一個帖子，然後在/comments中獲取相關評論。由於我們使用的是async/await，函式把返回值放在一個數組中。而我們使用陣列解構後就可以把返回值直接賦給相應的變數。

async function getFullPost(){

  return await Promise.all([

     fetch('/post'),

     fetch('/comments')

  ]);

}

const [post, comments] = getFullPost();

5 將陣列平鋪到指定深度

使用遞迴，為每個深度級別 depth 遞減 1 。 使用 Array.reduce() 和 Array.concat() 來合併元素或陣列。 基本情況下，depth 等於 1 停止遞迴。 省略第二個引數，depth 只能平鋪到 1 (單層平鋪) 的深度。

const flatten = (arr, depth = 1) =>

  depth != 1

    ? arr.reduce((a, v) => a.concat(Array.isArray(v) ? flatten(v, depth - 1) : v), [])

    : arr.reduce((a, v) => a.concat(v), []);

flatten([1, [2], 3, 4]);                             // [1, 2, 3, 4]

flatten([1, [2, [3, [4, 5], 6], 7], 8], 2);           // [1, 2, 3, [4, 5], 6, 7, 8]

6 陣列的物件解構

陣列也可以物件解構，可以方便的獲取陣列的第n個值

const csvFileLine = '1997,John Doe,US,[email protected],New York';

const { 2: country, 4: state } = csvFileLine.split(',');

 

country            // US

state            // New Yourk

大概就是這麼多，有一部分我也不是很明白，希望能幫到大家。

參考連結：https://mp.weixin.qq.com/s/wZHVHKRtjRzZHCb3BrHOhw