reduce
- callback(一個在數組中每一項上調用的函數,接受四個參數:)
previousValue(上一次調用回調函數時的返回值,或者初始值)
currentValue(當前正在處理的數組元素)
currentIndex(當前正在處理的數組元素下標)
array(調用reduce()方法的數組) - initialValue(可選的初始值。作爲第一次調用回調函數時傳給previousValue的值)
概念一搜一大把,我們聊點我遇到的和理解的,見代碼
callback
//reduce作爲累加器
let arr = [1, 2, 3, 4, 5]
let sum = arr.reduce((init, item, i, self) => {
console.log(`init---${init}, item---${item}, i---${i}, self---${self}`)
return init + item
})
console.log(sum) //15
分別看一下回調參數 見下圖
init默認爲數組第一項,一次累加數組項,最後返回一項。
item循環數組每一項
i數組下標
self當前調用reduce數組本身
initialValue
可選初始值,作爲回調函數第一個參數的默認值,也是每次回調的返回值,見代碼
let obj = {
'/home': {
meta: {
title: '首頁'
},
component: '@/page/home'
},
'/question': {
meta: {
title: '問題'
},
component: '@/page/question'
}
}
// 轉化爲數組
let map = [{
path: '/home',
meta: {
title: '首頁'
},
component: '@/page/home'
}, {
path: '/question',
meta: {
title: '問題'
},
component: '@/page/question'
}]
let map1 = Object.keys(obj).reduce((arr, item) => {
return (arr.push({
path: item,
...obj[item]
}), arr)
}, [])
console.log(map1)
轉化後效果
這個栗子來自vue配置路由時遇到的,當時也是優化了好幾個版本。
接下來詳細解釋一下
Object.keys(obj) //把obj轉化爲內容爲key的數組
reduce((arr,item)=>{
})
//上邊已經解釋過參數了,回調後邊的參數[]:返回值默認值是一個空數組
關於
return (arr.push({
path: item,
...obj[item]
}), arr)
其實可以寫成
arr.push({
path: item,
...obj[item]
})
return arr
具體請查看:javascript逗號操作符
別急還有一個用法新鮮剛發現的。
//需求:判斷數組每一項的end和下一項的start是否是遞增的,返回ture or false
let arr = [{
start: 1,
end: 3
}, {
start: 1,
end: 3
}, {
start: 4,
end: 5
}]
function isTure(arr) {
let status = true
arr.reduce((pro, next) => {
if (pro.end >= next.start) {
status = false
return false
}
return next
})
return status
}
console.log(isTure(arr))
這裏我們巧用了 reduce的返回值,每次返回當前項,這樣兩個參數始終爲1,2 | 2,3|3,4依次類推
明天map和filter