1. 程式人生 > >reduce實現極簡化的小工具

reduce實現極簡化的小工具

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