😁 作者简介：一名大三的学生，致力学习前端开发技术
⭐️个人主页：夜宵饽饽的主页
❔ 系列专栏：JavaScript小贴士
👐学习格言：成功不是终点，失败也并非末日，最重要的是继续前进的勇气
🔥前言：
这是我自己有关array.prototype.reduce()函数的用法的总结，如有不足和错误，欢迎大家更好的补充和纠正
1.Array.prototype.reduce()函数的用法
定义：
reduce()方法对每一个数组的每一个元素按序执行一个由您提供的reduce函数。每一次运行reduce会将先前元素的计算结果作为参数传入，最后将其结果汇总为单个返回值。
第一次执行回调函数时，不存在“上一次的计算结果”。如果需要回调函数从数组索引为0的开始执行，则需要传递初始值，否则数组的索引为0的值作为初始值initalValue，迭代器从第二个元素开始执行（索引为1而不是0）
语法：
reduce((previousValue, currentValue, currentIndex, array) => { /* … */ }, initialValue)
参数：
callbackfn
一个“reduce”函数，包含四个参数：
- previousValue:上一次调用callbackFn时的返回值，在一次调用时，若指定初始值initialValue，其值为initalvalue，否则为数组索引为0的元素array[0]
- currentValue：数组中正在处理的元素，在第一次调用时，若指定初始值initalValue，其值则为数组索引为0的元素array[0],否则为array[1]
- currentIndex：数组中正在处理的元素索引，若指定了初始值initvalue，则起始索引号，否则从索引1起的。
- array：用于遍历的数组
initalvalue(可选)
作为第一次调用callback函数时的参数previousValue的值，若指定了初始值initalValue，则currentValue则将使用数组第一个元素，否则previosValue的值是将是数组的第一个元素，而currentValue将使用数组第二个元素
返回值
使用reduce回调函数遍历整个数组后的结果
异常
TypeError
数组为空且初始值未提供
扩展知识点：
如果数组为空且未指定初始值 initialValue，则会抛出
TypeError。
reduce不会直接改变调用它的对象，但对象可被调用的 callbackfn 所改变。遍历的元素范围是在第一次调用 callbackfn 之前确定的。所以即使有元素在调用开始后被追加到数组中，这些元素也不会被 callbackfn 访问。如果数组现有的元素发生了变化，传递给 callbackfn 的值将会是元素被reduce访问时的值（即发生变化后的值）；在调用reduce开始后，尚未被访问的元素若被删除，则其将不会被reduce访问。
基本使用
1.将二维数组转化为一维
//将二维数组转化一维数组
let fla=[[0,1],[2,3],[4,5]].reduce(
function(pre,cur){
return pre.concat(cur)
},
[]
)
console.log("二维数组转化一维数组:"+fla);
//二维数组转化一维数组:0,1,2,3,4,5
2.计算数组中每一个元素出现的次数
//计算数组中每一个元素出现的次数
let names=['Alice','Bob','Tiff','Bruce','Alice']
let countedNames=names.reduce((allName,curname) =>{
if(curname in allName){
allName[curname]++
}
else{
allName[curname]=1
}
return allName
},{})
console.log(countedNames);
//{ Alice: 2, Bob: 1, Tiff: 1, Bruce: 1 }
3.按属性对object分类
let peple=[
{name:'Alice',age:21},
{name:'Mex',age:20},
{name:'Jane',age:20}
];
function groupBy(objectArray,property) {
return objectArray.reduce(function(pre,cur){
let key=cur[property]
if(!pre[key]){
pre[key]=[]
}
pre[key].push(cur)
return pre
},{})
}
let groupByPeople=groupBy(peple,'age')
console.log(groupByPeople)
/**{
'20': [ { name: 'Mex', age: 20 }, { name: 'Jane', age: 20 } ],
'21': [ { name: 'Alice', age: 21 } ]
}*/
4.使用扩展运算符和initialValue绑定包含在对象数组中的数组
let friends = [{
name: 'Anna',
books: ['Bible', 'Harry Potter'],
age: 21
}, {
name: 'Bob',
books: ['War and peace', 'Romeo and Juliet'],
age: 26
}, {
name: 'Alice',
books: ['The Lord of the Rings', 'The Shining'],
age: 18
}]
let allbook=friends.reduce((pre,cur) =>{
let key=cur['books']
return [...pre,...key]
},['alphoter'])
console.log(allbook);
/**
[
'alphoter',
'Bible',
'Harry Potter',
'War and peace',
'Romeo and Juliet',
'The Lord of the Rings',
'The Shining'
]
*/
6.数组去重
//数组去重
let myArray = ['a', 'b', 'a', 'b', 'c', 'e', 'e', 'c', 'd', 'd', 'd', 'd']
const myArrayNo =myArray.reduce(function(pre,cur){
if(pre.indexOf(cur)==-1){
pre.push(cur)
}
return pre
},[])
console.log(myArrayNo);
//[ 'a', 'b', 'c', 'e', 'd' ]
7.使用reduce 实现map文章来源：https://www.toymoban.com/news/detail-724580.html
if (!Array.prototype.mapUsingReduce) {
Array.prototype.mapUsingReduce = function(callback, initialValue) {
return this.reduce(function(mappedArray, currentValue, currentIndex, array) {
mappedArray[currentIndex] = callback.call(initialValue, currentValue, currentIndex, array)
return mappedArray
}, [])
}
}
[1, 2, , 3].mapUsingReduce(
(currentValue, currentIndex, array) => currentValue + currentIndex + array.length
) // [5, 7, , 10]
最后
🌼 如果觉得笔者写的不错，可以看看笔者以下的文章喔 😃文章来源地址https://www.toymoban.com/news/detail-724580.html
- JavaScript中的模块化Module语法的使用细节：export命令和imprt命令详细使用
- 学习JavaScript的this的使用和原理
- 【ES6标准入门】JavaScript中的Generator函数的使用和细节，异步操作思路之一
- 【ES6的标准入门】JavaScript中Set、Map与弱引用版本：WeakSet和WeakMap优雅的数据管理技巧
- 【原型详解】JavaScript原型链：深入了解Prototype，超级详细！！！
到了这里，关于js中reduce()函数的用法的文章就介绍完了。如果您还想了解更多内容，请在右上角搜索TOY模板网以前的文章或继续浏览下面的相关文章，希望大家以后多多支持TOY模板网！
