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