js中数组reduce的使用原来这么简单
2023-09-27 14:22:17 时间
reduce 的学习方法
array.reduce(callback(prev, currentValue, index, arr), initialValue)
//简写就是下面这样的
arr.reduce(callback,[initialValue])
callback (执行数组中每个值的函数,包含四个参数)
1、prev (上一次回调返回的值,或者是提供的初始值(initialValue))
2、currentValue (数组中当前被处理的元素)
3、index (当前元素在数组中的索引)
4、array (调用 reduce 的数组)
需要注意的是 initialValue的值是任意的哈。可以是数组可以是对象。
简单使用 reduce
var arr = [1, 2, 3, 4];
var sum = arr.reduce(function(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是从1开始的。
第一次的prev的值是上一次回调返回的值,或者是提供的初始值。
或者是数组的第一项的值。
因此第二次的 prev 是3=1+2(上一次回调返回的值 prev + cur)
因此第三次的 prev 是6=1+2(上一次回调返回的值 3 + 3)
我们发现数组长度是4,但是reduce函数循环3次。
说明reduce是从索引index为是从1开始循环的。
reduce 第二个参数提供初始值
var arr = [1, 2, 3, 4];
var sum = arr.reduce(function(prev, cur, index, arr) {
console.log(prev, cur, index);
return prev + cur;
}, 10)
console.log(arr, sum);
//打印结果:
// 10 1 0
// 11 2 1
// 13 3 2
// 16 4 3
// [1, 2, 3, 4] 20
分析第二个参数提供初始值
前端我们说了:prev (上一次回调返回的值,或者是提供的初始值(initialValue))
因为提供了初始值,所以第一次是10,
当前值就变为了1,索引就从0开始了。
因此第一次的值是 10 1 0
第二次prev (上一次回调返回的值)11=10+1
第三次prev (上一次回调返回的值)13=13+3
数组为空,运用reduce是什么情况
var arr = [];
var sum = arr.reduce(function(prev, cur, index, arr) {
console.log(prev, cur, index);
return prev + cur;
})
console.log(arr, sum);
//报错: Reduce of empty array with no initial value at Array.reduce (<anonymous>)
如果我们设置了初始值呢?
var arr = [];
var sum = arr.reduce(function(prev, cur, index, arr) {
console.log(prev, cur, index); //这一条语句不
return prev + cur;
}, 10)
console.log(arr, sum); //[] 10
reduce的累加,累乘
// 累加
let sum = [1, 2, 3, 4, 5].reduce((prev, cur) => prev + cur);
console.log(sum) //输出15
let sum = [1, 2, 3, 4, 5].reduce((prev,cur) => prev * cur);
console.log(sum) //输出120
let sum = [1, 2, 3, 4, 5].reduce((prev, cur) => prev * cur, 10);
console.log(sum) //输出1200
reduce数组对象求和
let arr = [{
money: 100,
name: '苹果'
}, {
money: 50,
name: '香蕉'
}]
不使用初始值
function sum(arr) {
return arr.reduce((prev, cur) => {
return prev.money + cur.money
})
}
使用初始值
function sum(arr) {
return arr.reduce((prev, cur) => {
return cur.money + prev
}, 0)
}
console.log(sum(arr)) //输出150
reduce计算数组中每个元素出现的次数[面试经常问]
let names = ['yes', 'hello', 'hi', 'yes', 'yy'];
// 第二个初始值是一个对象,因为有初始值,所以cur的值是数组的第一项[yes]
let nameNum = names.reduce((pre, cur) => {
// 第一次pre是一个对象,返回将这个对象返回,下一次pre又是一个对象了
if (cur in pre) {
pre[cur]++
} else {
pre[cur] = 1
}
return pre
}, {})
console.log(nameNum); //{yes: 2, hello: 1, hi: 1, yy: 1}
reduce实现数组去重[面试经常问]
let arr = [10, 20, 20, 41, 41, 1]
// 这次初始值是一个数组,,因为有初始值,所以cur的值是数组的第一项10
let newArr = arr.reduce((pre, cur) => {
// 如果没有,使用concat添加进去。这样就可以实现数组去重了
if (!pre.includes(cur)) {
return pre.concat(cur)
} else {
return pre
}
}, [])
console.log(newArr);
// [10, 20, 41, 1]
reduce实现数组扁平化
let arr = [
[1, 2],
[1, 2, 3],
[1, [1, 3, [1, 2, 3]]]
]
function flatten(arr) {
return arr.reduce((pre, cur) => pre.concat(Array.isArray(cur) ? flatten(cur) : cur), []);
}
console.log(flatten(arr)) //[1, 2, 1, 2, 3, 1, 1, 3, 1, 2, 3]
总结:reduce有无第二个参数的区别
1=>没有提供初始值,索引是从1开始的。提供了初始值索引是从0开始的。
2=>没有提供初始值循环次数等于数组长度-1。 提供了初始值循环次数等于数组的长度;
3=>没有提供初始值第一次cur是索引为1的那个值。提供了初始值cur是索引为0的那个值
4=>没有提供初始值空数组会报错。提供了初始值空数组不会报错。[] 10
相关文章
- Js数组里剔除指定的元素(不是指定的位置)
- vue.js+node.js前端实战开发(一)————cmd命令搭建项目
- JS Leetcode 852. 山脉数组的峰顶索引图解分析,高高的山峰一起吹山风吧。
- JS Leetcode 74. 搜索二维矩阵题解分析,二分法与坐标轴法
- JS leetcode 合并两个有序数组 解题分析
- js数组常用方法,含es5
- JS判断数组中是否包含某个值
- js 数组Array(list)添加、删除
- JS 数组方法 every 和 some 的区别
- js string类型转换成数组对象类型---eval
- JS实现将两个数组转为一个JSON数据
- JS高阶---执行上下文
- JS数组去重常见方法
- three.js的简单使用
- asp.net mvc razor语法 mvc中前台js中获取ViewData的值
- js函数既可以接收单个参数也可以接收数组的方法
- [js高手之路]一步步图解javascript的原型(prototype)对象,原型链
- c#后台List转为js对象(在前台操作)
- 项目EasyUi和JS中遇到的问题总汇
- JS 数组相关的操作函数
- js中判断数组中是否包含某元素的方法(转载)
- js 数组 深拷贝 复制 (汇总)
- 原生js源码之Array数组some方法
- js 判断是否为空对象、空数组
- JS数组常见方法的深浅拷贝分类
- Node.js querystring模块