reduce實現極簡化的小工具
阿新 • • 發佈:2018-12-12
1. reduce介紹
reduce() 方法接收一個函式作為累加器(accumulator),陣列中的每個值(從左到右)從左到右依次處理。並返回最終的處理值
arr.reduce(callback, init);
reduce 接收兩個引數,其中的callback是處理資料的一個回撥函式其中接收四個引數,init為處理資料的起始值。
arr.reduce((preResult, curValue, index, arr) => { // preResult 是上一次處理的結果值 // curValue 是本次操作的陣列元素 // index 是本次陣列元素的索引 // arr 是運算元組 }, [] );/* [] 為初始值 */
- eg-1 陣列求和
let items = [1,2,3,4,5]
let addValue = items.reduce( (prev, curv) => {
return prev += curv
},0)
console.log(addValue) // 15
- eg-2 物件陣列去重
let arr = [ {a:1, id: 1},{b:1, id: 2},{c:3, id: 1},{d:4, id: 4},{e:5, id: 1}] //去掉id重複的 陣列元素 const hash = {} //定義一個hash陣列用作去重字典 const result = arr.reduce( (preValue, curValue) => { hash[curValue.id] ? "" : (hash[curValue.id] = true && preValue.push(curValue)) return preValue },[])
- eg-3 物件取值方法封裝 (防止 a.b.c b為undefined 的時候報錯)
let items = { "a": { "b": { "c": { "d": { "e": { "f": 3 } } } } } } function $getValue(obj, path){ if (obj && path) { return path.split(".").reduce((preResult, curValue) => { if (preResult[curValue]) { return preResult[curValue]; } else { return undefined; } }, obj); } else { return obj; } } let valueF = $getValue(items, 'a.b.c.d.e.f') console.log(valueF) // 3