js数组方法reduce应用场景

reduce 是ES6 的数组方法,能用reduce解决的问题都可以用for循环解决,但是reduce方法掌握之后,可以使我们的代码更优雅更高效。

1.数组里所有值的和

      var arr = [0,1,2,3];

      var value = arr.reduce((pre, cur) => {
        return pre + cur;
      }, 0);
      
      console.log(value);// 输出:6

2.累加数组中对象里的值

      var arr = [{ x: 1 }, { x: 2 }, { x: 3 }];

      var value = arr.reduce((pre, cur) => {
        return pre + cur.x;
      }, 0);
      
      console.log(value);// 输出:6

3.将二维数组转为一维数组

      var arr = [
        [0, 1],
        [2, 3],
        [4, 5],
      ];

      var value = arr.reduce((pre, cur) => {
        return pre.concat(cur);
      }, []);

      console.log(value); // 输出:[0, 1, 2, 3, 4, 5]

4.计算数组中每个元素出现的次数

      var arr = ["a", "b", "a", "c", "c", "c"];

      var value = arr.reduce((pre, cur) => {
        if (cur in pre) {
          pre[cur]++;
        } else {
          pre[cur] = 1;
        }
        return pre;
      }, {});

      console.log(value); // 输出:{a: 2, b: 1, c: 3}

5.按属性对object分类

      var people = [
        { name: "tom", age: 17, birthYear: 2021 },
        { name: "tony", age: 21, birthYear: 2021 },
        { name: "bob", age: 18, birthYear: 2020 },
        { name: "bob", age: 18, birthYear: 2021 },
        { name: "bob", age: 18, birthYear: 2019 },
      ];

      function groupBy(arr, property) {
        if (!Array.isArray(arr)) return [];

        return arr.reduce((pre, obj) => {
          var newObj = {
            [property]: obj[property],
            data: [obj],
          };

          if (!pre.length) {
            return [newObj];
          }

          for (let i = 0; i < pre.length; i++) {
            let item = pre[i];
            if (item[property] === obj[property]) {
              item.data = [...item.data, obj];
              return pre;
            }
          }
          return [...pre, newObj];
        }, []);
      }

      var value = groupBy(people, "birthYear");

返回值如下:
在这里插入图片描述
6.数组去重

      var arr = [1, 2, 3, 2, 2, 3, 5, null, null, 0, false, false, true];

      var value = arr.reduce((pre, cur) => {
        return pre.includes(cur) ? pre : pre.concat(cur);
      }, []);

      console.log(value);//[1, 2, 3, 5, null, 0, false, true]
  • 0
    点赞
  • 6
    收藏
    觉得还不错? 一键收藏
  • 0
    评论

“相关推荐”对你有帮助么?

  • 非常没帮助
  • 没帮助
  • 一般
  • 有帮助
  • 非常有帮助
提交
评论
添加红包

请填写红包祝福语或标题

红包个数最小为10个

红包金额最低5元

当前余额3.43前往充值 >
需支付:10.00
成就一亿技术人!
领取后你会自动成为博主和红包主的粉丝 规则
hope_wisdom
发出的红包
实付
使用余额支付
点击重新获取
扫码支付
钱包余额 0

抵扣说明:

1.余额是钱包充值的虚拟货币,按照1:1的比例进行支付金额的抵扣。
2.余额无法直接购买下载,可以购买VIP、付费专栏及课程。

余额充值