有关reduce()方法的一些使用

最新推荐文章于 2023-11-11 10:56:58 发布

妖刀村雨

最新推荐文章于 2023-11-11 10:56:58 发布

阅读量352

点赞数 3

文章标签： javascript 经验分享

本文链接：https://blog.csdn.net/weixin_45273903/article/details/122541116

版权

首先明确的是reduce()方法的作用是可以对数组进行遍历，并可以在遍历中对元素进行一些操作。

reduce()的使用形式是a.reduce(arg1,arg2),其中第一个参数是一个函数，第二个函数是初始值。展开来写的话就是：

a.reduce(function(pre,cur){
    return 约束条件
},arg2)

这里面涉及到三个参数，第一个pre是指上一次迭代产生的结果，而cur是本次迭代的值，arg2是pre的初始值，用代码就行演示一遍，以统计数组元素个数为例：

let arr = ["name","age","age","name","age","long","job","name","long","name"];
        let result = arr.reduce(function(pre,cur){
            
            if(pre[cur])
            {
                pre[cur]++;
            }else{
                pre[cur]=1;
            }
            return pre;
        },{});
        console.log(result);    //输出内容为{name: 4, age: 3, long: 2, job: 1}

为了更直观的理解，我们可以将每次的pre和cur内容打印出来，就可以更直观的理解了：

let arr = ["name","age","age","name","age","long","job","name","long","name"];
        let result = arr.reduce(function(pre,cur){
            console.log(pre,cur);
            if(pre[cur])
            {
                pre[cur]++;
            }else{
                pre[cur]=1;
            }
            return pre;
        },{});
       //此时输出的内容为：
 {} 'name'
 {name: 1} 'age'
 {name: 1, age: 1} 'age'
 {name: 1, age: 2} 'name'
 {name: 2, age: 2} 'age'
 {name: 2, age: 3} 'long'
 {name: 2, age: 3, long: 1} 'job'
 {name: 2, age: 3, long: 1, job: 1} 'name'
 {name: 3, age: 3, long: 1, job: 1} 'long'
 {name: 3, age: 3, long: 2, job: 1} 'name'

由此就可以清晰的看出各个参数的作用了。

使用reduce()方法还可以实现很多其他功能，就比如实现有初始值的数组求和：

let a = [1,5,6,8,4,6,4,7,5,1];
//初始值为10；
let num = a.reduce(function(pre,cur){
 return pre+cur;
},10);
console.log(num);  //  57

甚至之前有涉及到的数组对象去重也可以使用reduce()方法实现：

var arr1 = [
  {id: 1, name: '小明'},
  {id: 3, name: '小兰'},
  {id: 2, name: '小红'},
  {id: 1, name: '小明'},
  {id: 3, name: '小兰'},
  {id: 2, name: '小红'}
];
let newobj = {}; 
let arr2 = arr1.reduce(function(pre,cur){
    if(!newobj[cur.id]){
        newobj[cur.id] = pre.push(cur);
    }
    return pre;
},[])
console.log(arr2);  // [ {id: 1, name: '小明'}
						 {id: 3, name: '小兰'}
						 {id: 2, name: '小红'}]

// 当然如果使用三木运算符和箭头函数，代码会变得更加简洁
let newobj = {}; 
let arr3 = arr1 .reduce((pre, cur) => {
	newobj[cur.id] ? '' : newobj[curl.id] = preVal.push(cur); 
	return pre;
}, [])
console.log(arr3);    // [ {id: 1, name: '小明'}
						 {id: 3, name: '小兰'}
						 {id: 2, name: '小红'}]

这就是我目前经常用到的地方，如果以后还有别的使用方法我再做补充吧。