数组常用方法 —— reduce()方法【数组求和,求乘积、计算数组中每个元素出现的次数,数组去重,将二维数组转化为一维,将多维数组转化为一维,对象里的属性求和】

简介: 【7月更文挑战第12天】

一、reduce() 语法
arr.reduce(callback, [initialValue])
reduce() 方法接收一个函数作为累加器,数组中的每个值开始缩减,最终计算成为一个值。

参数解析:

    ① callback(必需。用于执行每个数组元素的函数,包含四个参数)

previousValue (必需。初始值, 或者计算结束后的返回值。)
currentValue (必需。当前元素)
currentIndex(可选。当前元素的索引)
arr(可选。当前元素所属的数组对象。)

   ② initialValue (可选。作为第一次调用 callback 的第一个参数)

二、实例解析 initialValue 参数
① 当没有设置初始值时:
index 是从1开始的,第一次的 prev 的值是数组的第一个值。

数组长度是4,但是reduce函数循环3次。

const arr = [1,2,3,4]
const sum = arr.reduce((prev, cur, index, arr) => {
  console.log(prev, cur, index)
  return prev + cur
})
console.log(arr, sum)

打印结果:

1 2 1
3 3 2
6 4 3
[1, 2, 3, 4] 10

② 设置了初始值:
index 是从 0 开始的,第一次的 prev 的值是我们设置的初始值0

数组长度是 4,reduce 函数循环 4 次。

const arr = [1,2,3,4]
const sum = arr.reduce((prev, cur, index, arr) => {
  console.log(prev, cur, index)
  return prev + cur
}, 0) // 这里设置了初始值

console.log(arr, sum)

打印结果:

0 1 0
1 2 1
3 3 2
6 4 3
[1, 2, 3, 4] 10

③ 总结
如果没有提供初始值initialValue,reduce 会从索引 1 的地方开始执行 callback 方法,跳过第一个索引。如果提供 initialValue,从索引 0 开始。

④ 注意
如果这个数组为空,运用 reduce 是什么情况?

会报错,"TypeError: Reduce of empty array with no initial value"

var arr = [];
var sum = arr.reduce(function(prev, cur, index, arr) {
console.log(prev, cur, index);
return prev + cur;
})
// 报错,"TypeError: Reduce of empty array with no initial value"
但是要是我们设置了初始值就不会报错,如下:

var arr = [];
var sum = arr.reduce(function(prev, cur, index, arr) {
console.log(prev, cur, index);
return prev + cur;
},0)
console.log(arr, sum); // [] 0
所以一般来说我们提供初始值通常更安全!!!

三、reduce的简单用法
① 数组求和,求乘积
const arr = [1, 2, 3, 4]
const sum = arr.reduce((x, y) => x + y)
const mul = arr.reduce((x, y) => x * y)
console.log('求和,', sum) // 10
console.log('求乘积,', mul) // 24
四、reduce的高级用法
① 计算数组中每个元素出现的次数
const names = ['Alice', 'Bob', 'Tiff', 'Bruce', 'Alice'];
const nameNum = names.reduce((prev, cur) => {
console.log(prev, cur)
// {} "Alice"
// {Alice: 1} "Bob"
// {Alice: 1, Bob: 1} "Tiff"
// {Alice: 1, Bob: 1, Tiff: 1} "Bruce"
// {Alice: 1, Bob: 1, Tiff: 1, Bruce: 1} "Alice"
if (cur in prev) {
prev[cur]++
} else {
prev[cur] = 1
}
return prev
}, {})
console.log(nameNum) // {Alice: 2, Bob: 1, Tiff: 1, Bruce: 1}
② 数组去重
const arr = [1, 2, 3, 4, 4, 1, 5, 5, 0, 8]
const arrNew = arr.reduce((prev, cur) => {
if (!prev.includes(cur)) {
prev.push(cur)
}
return prev
}, [])
console.log(arrNew) // [1, 2, 3, 4, 5, 0, 8]
③ 将二维数组转化为一维
const arr = [[0, 1], [2, 3], [4, 5]]
const arrNew = arr.reduce((prev, cur) => {
return prev.concat(cur)
}, [])
console.log(arrNew) // [0, 1, 2, 3, 4, 5]
④ 将多维数组转化为一维
let arr = [[0, 1], [2, 3], [4,[5,6,7]]]
const newArr = function(arr){
return arr.reduce((pre,cur)=>pre.concat(Array.isArray(cur)?newArr(cur):cur),[])
}
console.log(newArr(arr)); //[0, 1, 2, 3, 4, 5, 6, 7]
⑤ 对象里的属性求和
var result = [
{
subject: 'math',
score: 10
},
{
subject: 'chinese',
score: 20
},
{
subject: 'english',
score: 30
}
];

var sum = result.reduce(function(prev, cur) {
return cur.score + prev;
}, 0);

相关文章
|
缓存 JavaScript 算法
vue2和vue3之间diff算法的差异
vue2和vue3之间diff算法的差异
|
前端开发 JavaScript
JavaScript中的原型和原型链
JavaScript中的原型和原型链
476 0
|
JavaScript
3分钟了解 vue props type类型
3分钟了解 vue props type类型
590 0
|
2月前
|
数据可视化 Apache 开发者
趣码乐园 Apache ECharts 6.0 功能介绍
作为一种布局,它还允许开发者将各种图表类型和组件结合,创造出灵活复杂的可视化作品:
移动端click事件、touch事件、tap事件的区别
移动端click事件、touch事件、tap事件的区别
402 0
|
JavaScript API 索引
js中的reduce()方法 讲解 和实现
`reduce()` 方法对数组元素依次应用一个回调函数,将结果累计并最终返回单一值。语法为 `reduce(callback(accumulator, currentValue, currentIndex, array), initialValue)`。参数包括累计器(初次为初始值或首元素)、当前元素值、索引及数组自身。此方法需返回值供下一轮迭代使用。常见应用场景包括计算数组总和与平均值、统计元素频率、过滤与转换数组内容及去除重复项等。例如,可通过 `reduce()` 快速计算 `[1, 2, 3, 4, 5]` 的总和或对对象属性值求和。此外,还可自定义实现 `reduce()` 方法
3417 1
|
索引
|
11月前
|
前端开发 UED 容器
使用 Flex 布局实现垂直居中效果
【10月更文挑战第7天】
1157 57
|
11月前
|
API
Vue3组件通信全解析:利用props、emit、provide/inject跨层级传递数据,expose与ref实现父子组件方法调用
Vue3组件通信全解析:利用props、emit、provide/inject跨层级传递数据,expose与ref实现父子组件方法调用
2617 0
|
缓存 前端开发 JavaScript
前端性能优化都有那些方案 ?
【7月更文挑战第11天】 前端性能优化包括资源合并压缩、懒加载、CDN使用、代码优化、缓存利用和图片优化等策略。例如,减少HTTP请求、压缩CSS/JS、事件委托、利用浏览器及服务器缓存、选择合适图片格式等,旨在提升网页速度和用户体验。服务工作者、异步加载和响应式设计也是关键。持续学习新技术以适应不断变化的优化需求。
674 1