前言
可能部分同学很少在项目中使用到reduce
,使用过的朋友感觉到它是非常的方便。
一问reduce
可以干什么?有哪些好用便捷之处?
下面我们将详细解释并举例使用,相信看完本篇文章后你会有更深和对其有一定的了解。
什么是reduce
reduce
是es6
中新增的一个方法,普遍用于求和使用,但你知道吗,它不只是可以用于求和,还有其他的使用方法和技巧。
让我们一起看看它还有哪些奥妙之处。let’s go
reduce 语法
arr.reduce(callback,[initialValue])
reduce
为数组中的每一个元素依次执行回调函数callback
,不包括数组中被删除或从未被赋值的元素,接受四个参数:
- 初始值(或者上一次回调函数的返回值)
- 当前元素值
- 当前索引
- 调用
reduce
的数组
callback
回调函数必须有返回值。
initialValue(可选参数)
当设置了initialValue
参数时,callback
第一个参数 初始值将默认是 initialValue
。
let arr = [1, 2, 3, 4];
let sum = arr.reduce((pre, cur, index, arr) => pre + cur)
console.log(arr, sum); // [1, 2, 3, 4],10
Tips:当arr为空时,并且没有初始值,会报错。如下图
当设置默认值过后,尽管arr
为空,它不会报错了,看下面的代码
let arr = [];
let sum = arr.reduce((pre, cur, index, arr) => pre + cur)
console.log(arr, sum); // [],0
下面让我们看看reduce
都有些什么用法吧
一、简单求和、乘积
let arr = [1, 2, 3, 4];
let sum = arr.reduce((x, y) => x + y)
let sumOne = arr.reduce((x, y)=> x * y)
console.log(sum); // 求和,10
console.log(sumOne); // 求乘积,24
二、查找数组中的最大值
let arr = [1, 2, 3, 4];
let sum = arr.reduce((item, next) => Math.max(item, next))
console.log(sum); // 4
三、多维数组转一维
通过reduce
搭配concat
即可实现多维数组的转换
二维数组转一维
let arr = [[0, 1], [2, 3], [4, 5]]
let newArr = arr.reduce((pre, cur)=> pre.concat(cur), [])
console.log(newArr); // [0, 1, 2, 3, 4, 5]
多维数组转一维
let arr = [[0, 1], [2, 3], [4, [5, 6, 7, 8]]]
let newArr = (arr) => arr.reduce((pre, cur) => pre.concat(Array.isArray(cur) ? newArr(cur) : cur), [])
console.log(newArr(arr)); //[0, 1, 2, 3, 4, 5, 6, 7, 8]
四、数组去重
普通的一维数组去重
let arr = [1, 2, 3, 4, 5, 5, 4, 3, 2, 1];
let newArr = arr.reduce((pre, cur) => {
pre.indexOf(cur) === -1 && pre.push(cur);
return pre;
},[]);
console.log(newArr) // [1, 2, 3, 4, 5]
数组对象去重
关于对象数组去重我们需要根据对象中的一个键名作为条件,去达到去重的效果。
let data = [
{name: 'tom', id: 1},
{name: 'jack', id: 2},
{name: 'tom2', id: 2},
{name: 'Judy', id: 1}
]
let hash = {}
data = data.reduce((item, next) => {
// 根据 id 去重
if (!hash[next.id]) {
hash[next.id] = true
item.push(next)
}
return item
}, [])
console.log(hash) // {1: true, 2: true}
console.log(data) // [{name: 'tom', id: 1},{name: 'jack', id: 2}]
五、计算元素出现的次数
let arr = ['tom', 'jack', 'Alice', 'tom', 'jack'];
let arrCount = names.reduce((pre,cur)=>{
if(cur in pre){
pre[cur]++
}else{
pre[cur] = 1
}
return pre
},{})
console.log(arrCount); //{tom: 2, jack: 2, Alice: 1}
六、reduceRight()
该方法用法与reduce()
实现达到的效果是一样的,只是说遍历的顺序相反,它是从数组的最后一项开始,向前遍历到第一项。
总结
以上内容就是javaScript
中reduce
的一些奥秘用法,了解了以上的一些用法,像多维数组转一维、数组去重这些又多了一步技巧和方法。结合原生的api
使用,会使我们在开发的过程中更加的便利。
如果你有更好的建议或本文中出现不足/问题的地方,欢迎各位朋友在下方评论区进行评论。
感谢你阅读本篇文章,希望本篇文章对你有所帮助!