[JavaScript] Array.prototype.reduce in JavaScript by example
2024-08-21 06:13:25
Let's take a closer look at using Javascript's built in Array reduce function. Reduce is deceptively simple and when harnessed correctly can achieve very powerful results. By leveraging reduce, we can answer a variety of questions on a single, simple data set. In this lesson, we'll look at how you might useArray.prototype.reduce to:
- Sum an array of numbers
- Reduce an array of objects to a sum of a given property
- Group an array of objects by key or a set of given criteria
- Count the number of objects in an array by key or a given set of criteria
let numbers = [1,2,3,4,5];
console.clear();
numbers.reduce(function(preVal, curVal, index, array){
console.log({preVal, curVal, index, array});
return curVal;
});
/*
[object Object] {
array: [1, 2, 3, 4, 5],
curVal: 2,
index: 1,
preVal: 1
}
[object Object] {
array: [1, 2, 3, 4, 5],
curVal: 3,
index: 2,
preVal: 2
}
[object Object] {
array: [1, 2, 3, 4, 5],
curVal: 4,
index: 3,
preVal: 3
}
[object Object] {
array: [1, 2, 3, 4, 5],
curVal: 5,
index: 4,
preVal: 4
}
*/
reduce() start from the second value in the array.
If there is no return value which will be passed to the next object as a previous value, then the next previous value will be undefined:
var numbers = [1,2,3,4,5];
console.clear();
numbers.reduce(function(preVal, curVal, index, array){
console.log({preVal, curVal, index, array});
});
/*
[object Object] {
array: [1, 2, 3, 4, 5],
curVal: 2,
index: 1,
preVal: 1
}
[object Object] {
array: [1, 2, 3, 4, 5],
curVal: 3,
index: 2,
preVal: undefined
}
[object Object] {
array: [1, 2, 3, 4, 5],
curVal: 4,
index: 3,
preVal: undefined
}
[object Object] {
array: [1, 2, 3, 4, 5],
curVal: 5,
index: 4,
preVal: undefined
}
*/
You can give another parameter to let it start from the first element of the array:
numbers.reduce(function(preVal, curVal, index, array){
console.log({preVal, curVal, index, array});
return curVal;
}, "start");
/**
[object Object] {
array: [1, 2, 3, 4, 5],
curVal: 1,
index: 0,
preVal: "start"
}
[object Object] {
array: [1, 2, 3, 4, 5],
curVal: 2,
index: 1,
preVal: 1
}
...
...
*/
Sum up an number of array:
let numbers = [1,2,3,4,5]; console.clear(); var sum = numbers.reduce( (preVal, curVal) => preVal + curVal);
console.log("sum: " + sum); /*
Sum: 15
*/
Example 2:
let people = [
{
name: 'Joe mins',
yearsExperience: 1,
dapartment: 'IT'
},
{
name: "Sally koral",
yearsExperience: 15,
dapartment: 'Engineering'
},
{
name: "Bill Fork",
yearsExperience: 5,
dapartment: 'Engineering'
},
{
name: 'Jane James',
yearsExperience: 11,
dapartment: 'Manager'
},
{
name: 'Bob Super',
yearsExperience: 9,
dapartment: 'IT'
},
]; console.clear(); var yearsExperience = people.reduce( (sum, curVal) => sum + curVal.yearsExperience, 0); console.log(yearsExperience); //41
Group by object:
let people = [
{
name: 'Joe mins',
yearsExperience: 1,
dapartment: 'IT'
},
{
name: "Sally koral",
yearsExperience: 15,
dapartment: 'Engineering'
},
{
name: "Bill Fork",
yearsExperience: 5,
dapartment: 'Engineering'
},
{
name: 'Jane James',
yearsExperience: 11,
dapartment: 'Manager'
},
{
name: 'Bob Super',
yearsExperience: 9,
dapartment: 'IT'
},
]; console.clear(); var departmentExperienceYears = people.reduce( (groupByObject, employee) => {
let dapartment = employee.dapartment;
if(!groupByObject[dapartment]){
groupByObject[dapartment] = 0;
groupByObject[dapartment] += employee.yearsExperience;
} return groupByObject;
}, {}); console.log(departmentExperienceYears); /*
[object Object] {
Engineering: 15,
IT: 1,
Manager: 11
}
*/
最新文章
- 使用Metrics监控应用程序的性能
- 如何使用QQ号进行快捷登录
- 命名不规范引发的DropDownListFor无法选中
- 用hasOwnProperty获取对象自身的属性排除原型链
- JQuery中动态生成元素的绑定事件（坑死宝宝了）
- cart中回归树的原理和实现
- Swift函数|闭包
- C#敏感关键词过滤代码
- 基于winform的二进制图片数据的存取（用于数据库照片的读写处理）
- Android 动画之ScaleAnimation应用具体解释
- 如何获取浏览器URL中查询字符串的参数
- linux GUI程序开发
- Android JNI programming demo with Eclipse
- Struct和Class的区别（转载）
- ASP MVC之参数传递
- Webgis开源解决方案之环境搭建(三)
- Office Web Add-in的技术原理和开发常见问题剖析
- python django的ManyToMany简述
- Python OpenCV 图像相识度对比
- 微服务框架——SpringCloud