reduce() + includes() 即可移除重複 Item

若 Array 中有重複的 Item,我們會想將重複的 Item 去除,只留下不重複的部分,ECMAScript 的 Array.prototype 並沒有內建這樣的 method,但我們可藉由 reduce() + includes() 加以實作。

Version


ECMAScript 5

Imperative


1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
const data = [
'iPhone',
'iPad',
'AirPods',
'Macbook',
'AirPods',
];

let result = [];
for(let i = 0; i < data.length; i++) {
if (!result.includes(data[i]))
result = result.concat(data[i]);
}

console.log(result);

data array 中的 AirPods 重複,我們希望新的 array 將 AirPods 只顯示一次。

使用 Array.includes() 判斷 item 是否重複,若不重複則將 item concat() 進新的 result array。

duplicate000

Functional


1
2
3
4
5
6
7
8
9
10
11
12
13
14
const data = [
'iPhone',
'iPad',
'AirPods',
'Macbook',
'AirPods',
];

const reducer = (accm, item) =>
accm.includes(item) ? accm : accm.concat(item);

const result = data.reduce(reducer, []);

console.log(result);

若結果為 單一值,則適合使用 reduce() 思考。

由於最後結果為單一 array,也是 單一值,因此也適用 reduce()

在 Imperative 寫法,我們必須建立 result empty array,然後每個 loop 去 concat()array,這相當於 reduce() 的 accumulator,也就是 reducer() 的第一個參數 accm

reducer() 的第二個參數 item,則是每個 loop 所傳進的 item,為了要判斷是否重複,一樣要使用 includes() 判斷,若重複則回傳原 accm,若不重複則 concat() 新的 item

由於結果是 array,因此 reduce() 的第二個參數傳進 [] empty array。

duplicate001

Conclusion


  • reduce() 不再只是用在求 sum 而已,只要結果是 單一值 都適用
  • 因為 單一 array 也是 單一值,因此也適用 reduce()
  • includes() + reduce() 就能將 array 中重複的 item 移除
2018-12-16