reduce 基本使用

原创于 2022-05-06 17:17:18 发布 · 623 阅读

0 ·

CC 4.0 BY-SA版权

文章标签：

#前端 #javascript

前端学习专栏收录该内容

15 篇文章

订阅专栏

这篇博客详细介绍了JavaScript中Array.prototype.reduce()方法的基本用法和常见应用场景，包括数组求和、求积、计算元素出现次数、数组去重以及求和数组对象的特定属性。通过实例展示了reduce在处理数组时的强大功能。

基本语法

arr.reduce((prevVal,curVal,index,arr)=>{
...
},init)

prevVal：必须，初始值或上一次返回结果
curVal：必须，当前元素
index：可选，当前元素索引
arr：可选，原数组
init：可选，初始值

应用

求和

const arr = [1,2,3,4,5];
const res =  arr.reduce((prevVal,curVal,index,arr)=>{
  return prevVal + curVal;
});

// 15

const arr = [1,2,3,4,5];
const res =  arr.reduce((prevVal,curVal,index,arr)=>{
  return prevVal + curVal;
},2);

// 17

求积

const arr = [1,2,3,4,5];
const res =  arr.reduce((prevVal,curVal,index,arr)=>{
  return prevVal * curVal;
});

// 120

计算数组元素出现次数

const arr = [1,2,3,4,5,2,2,2,5,1];
const res =  arr.reduce((prevVal,curVal,index,arr)=>{
  if(curVal in prevVal){
    prevVal[curVal]++;
  }else{
    prevVal[curVal]=1;
  }
  return prevVal;
},{});

// { '1': 2, '2': 4, '3': 1, '4': 1, '5': 2 }

数组去重

const arr = [1,2,3,4,5,2,2,2,5,1];
const res =  arr.sort().reduce((prevVal,curVal,index,arr)=>{
 if(prevVal.length===0||prevVal[prevVal.length-1]!==curVal){
  prevVal.push(curVal)
 }
 return prevVal;
},[]);

// [ 1, 2, 3, 4, 5 ]

const arr = [1,2,3,4,5,2,2,2,5,1];
const res =  arr.reduce((prevVal,curVal,index,arr)=>{
if(prevVal.indexOf(curVal)===-1){
  prevVal.push(curVal);
}
return prevVal;
},[]);

// [ 1, 2, 3, 4, 5 ]

求和数组对象某属性

const arr = [{ name: '张三', age: 17 }, { name: '李四', age: 18 }]
const res = arr.reduce((prevVal, curVal, index, arr) => {
  return prevVal + curVal.age;
},0); // 在这里初始值必须有，因第一个元素是对象

// 35