Vue2.6老项目升级至2.7并使用组合式Api写法记录

Reduce简介

reduce() 方法对数组中的每个元素执行一个由您提供的reduce函数(升序执行)，将其结果汇总为单个返回值。
reduce方法可做的事情特别多，循环遍历能做的，reduce都可以做，比如数组求和、数组求积、数组中元素出现的次数、数组去重等等。

• 语法

  arr.reduce(function(prev,cur,index,arr){
  // ...
  }, init);
  

• 参数解释

  参数	说明
  prev 必需	累计器累计回调的返回值; 表示上一次调用回调时的返回值，或者初始值 init
  cur 必需	表示当前正在处理的数组元素
  index 可选	表示当前正在处理的数组元素的索引，若提供 init 值，则起始索引为- 0，否则起始索引为1
  arr 可选	表示原数组
  init 可选	表示初始值

• 例子

  1. 没有设置函数的初始迭代值

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

  

  分析：在这里reduce的作用就是对这个数组进行求和，迭代了4次，函数迭代的初始值是1，也就是默认值（数组的第一项），prev的值是每次计算后的值。

  2. 设置函数的初始迭代值

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

  

  分析：这里我们添加了一个初始的迭代值，也就是让prev从5开始计算(以5为初始值求和)，可以看到，这里迭代了5次，结果也加上了初始值。同时，这里使用箭头函数来代替完整的函数。 运行结果相同。

应用

• 数组求和

  let arr = [1,2,3,4,5]
  console.log(arr.reduce((a,b) => a + b)) // - 15
  console.log(arr.reduce((a,b) => a * b))  // - 120
  

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

  const names = ['Alice', 'Bob', 'Tiff', 'Bruce', 'Alice', 'Bob', 'Bob'];
  const countedNames = names.reduce(function (allNames, name) {
    console.log(allNames,name);
    if (name in allNames) {
      allNames[name]++;
    }
    else {
      allNames[name] = 1;
    }
    return allNames;
  }, {});
  console.log(countedNames);
  

  
• 去除数组中重复的元素

      let myArray = ['a', 'b', 'a', 'b', 'c', 'e', 'e', 'c', 'd', 'd', 'd', 'd'];
      let myOrderedArray = myArray.reduce(function (accumulator, currentValue) {
      if (accumulator.indexOf(currentValue) === -1) {
        accumulator.push(currentValue)
      }
      return accumulator;
    }, []);
      console.log(myOrderedArray);  // - ['a','b','c','d']
  
      let arr = [1,2,1,2,3,5,4,5,3,4,4,4,4];
    let result = arr.sort().reduce((init, current) => {
        if(init.length === 0 || init[init.length-1] !== current) {
            init.push(current);
        }
        return init;
    }, []);
    console.log(result); // - [1,2,3,4,5]
  

• 按属性对Object分类

  const person = [
    {
        name: 'xiaoming',
        age: 18
    },{
        name: 'xiaohong',
        age: 17
    },{
        name: 'xiaogang',
        age: 17
    }
  ];
  function groupBy(objectArray, property) {
    return objectArray.reduce(function (acc, obj) {
      let key = obj[property];
      if (!acc[key]) {
        acc[key] = [];
      }
      acc[key].push(obj);
      return acc;
    }, {});
  }
  const groupedPerson = groupBy(person, 'age');
  console.log(groupedPerson);
  

  
• 对对象的属性求和

  let people = [
    { name: 'Alice', age: 21 },
    { name: 'Max', age: 20 },
    { name: 'Jane', age: 20 }
  ];
  let result = people.reduce((a,b) =>{
      a = a + b.age;
      return a;
  },0)
  
  console.log(result) // - 结果：61
  

---

转载请注明来源，欢迎对文章中的引用来源进行考证，欢迎指出任何有错误或不够清晰的表达。可以在下面评论区评论，也可以邮件至 chaoyumail@126.com