reduce的11种用法今天我们学习一下reduce的11种用法（其中包括了3种基础版和8种高阶版的方法）。坦白说我总感

「这是我参与2022首次更文挑战的第6天，活动详情查看：2022首次更文挑战」

大家好，我是摸鱼小公举，真正的强者，不会怨天尤人，如果想不被别人看轻，你就只有付出比别人多十倍百倍的努力，才能站的比别人更高。上一篇文章是常用的正则表达式集合，文章内容实现全年日历展示并设置节假日/工作日的功能。今天我们学习一下reduce的11种用法（其中包括了3种基础版和8种高阶版的方法）。坦白说我总感觉我看懂了下面的代码，可是我表述很差劲，总是怕我表述的你们会看不懂，有什么不好的地方希望大家多多给点建议。

reduce 相关知识了解

reduce() 接收一个函数作为累加器，数组中的每个值（从左到右）开始缩减，最终计算为一个值。

reduce() 可以作为一个高阶函数，用于函数的 compose。

注意:reduce() 对于空数组是不会执行回调函数的。

语法：array.reduce(function(total, currentValue, currentIndex, arr), initialValue)

参数：

基础版（最常用）

首先初始化一个数组

let arr1=[1,6,8,9,3,6]

（1）数组各项之和累加和累乘

//累加
 let arr2= arr1.reduce((a,b)=>{
 return a+b
 })
 console.log(arr2,"arr1arr1");//33
 
//累乘
  let arr2= arr1.reduce((a,b)=>{
  return a*b
  })
console.log(arr2,"arr1arr1");//7776

（2）求数组各项之间的最大值

let arr2= arr1.reduce((a,b)=>{
 return Math.max(a,b)
 })
console.log(arr2,"arr1arr1");//9

（3）数组去重

var newArr = arr1.reduce(function (a, b) {
 a.indexOf(b) === -1 && a.push(b);
 return a;
 }, []); //这里的[],作为初始值传递给函数的值
console.log(newArr,"newArr");//[1, 6, 8, 9, 3]

进阶版

(4)数组扁平

let arr1 = [[1, 6, 8], [9, 3, 6]];
 var newArr = arr1.reduce(function (a, b) {
 return a.concat(b);
 }, []);
console.log(newArr,"newArr");//[1, 6, 8, 9, 3, 6]

(5)数组转对象

const people = [ { area: "shenZhen", name: "YXL", age: 19 }, { area: "guangZhou", name: "XXL", age: 24 }];
const obj = people.reduce((a, b) => {
//这里是es6 初始化了一个reset对象和对象中的age属性并进行了解构赋值 
 const { age, ...rest } = b;
 a[age] = rest;
 return a;
}, {});
console.log(obj,"obj");// {19: {area: "shenZhen", name: "YXL"},24: {area: "guangZhou", name: "XXL"}}

(6) 数组分割

// 初始化两个参数,arr为空数组,size默认是1
function fenGe(arr = [], size = 1) {
  return arr.length
  ? arr.reduce(
    (a, b) => (
    a[a.length - 1].length === size ? a.push([b]): a[a.length - 1].push(b),a),
    [[]]
    )
    : [];
    }
const arr = [1, 2, 3, 4, 5];
fenGe(arr, 2); // [[1, 2], [3, 4], [5]]

(7) 数组元素个数统计

let nums = ["2", "4", "5", "5", "2","1"];    
 let arr = nums.reduce((a, b) => {
   if (b in a) {
     //if ( b in a) a 中是否有 b 属性
     a[b]++;
   } else {
     a[b] = 1; //为 a这个对象添加 b 属性，并且赋值为 1
   }
   return a;
 }, {}); //reduce(), ES6数组归并方法，这里初始值设置为一个空对象
 console.log(arr); //{1: 1, 2: 2, 4: 1, 5: 2}

(8) 数组中各个元素位置记录(数组元素的下标)

function Position(arr = [], val) {
  // t:初始值 [],计算结束后返回来值 ; v:当前元素 ; i当前元素的索引
  // 这里是:如果val(当前元素)等于 1,那么t就push当前元素的下标  最终return的则是t值
    return arr.reduce((t, v, i) => (v === val && t.push(i), t), []);
}
const arr = [1, 1, 4, 2, 1, 6, 6];
Position(arr, 1); // [0, 1, 4]

(9)数组各个元素的属性分组

function Group(arr = [], key) {
   //reduce(), ES6数组方法，这里初始值为一个空对象; 当此对象没有对应的key(当前元素的属性area)值,
  // 此对象就添加key属性值为该对象的属性并初始化一个空数组,如果有该属性就push当前元素
  return key ? arr.reduce((t, v) => (!t[v[key]] && (t[v[key]] = []), t[v[key]].push(v), t), {}) : {};
}
const arr = [    { area: "a", name: "Amy", age: 27 },    { area: "b", name: "Tom", age: 25 },    { area: "a", name: "Anna", age: 23 },    { area: "c", name: "Lida", age: 21 },    { area: "a", name: "Troy", age: 19 }]; // 以地区area作为分组依据
Group(arr, "area"); // { GZ: Array(2), SZ: Array(2), FS: Array(1) }

该对象打印出来的值

(10) 返回对象指定键值

function GetKeys(obj = {}, keys = []) {
// Object.keys(obj) //["a", "b", "c", "d"]
//reduce(), ES6数组方法，这里初始值为一个空对象; 如果keys包含当前元素则 obj[当前元素] 赋值给 该对象[当前元素]
return Object.keys(obj).reduce((t, v) => (keys.includes(v) && (t[v] = obj[v]), t), {});
}
const target = { a: 1, b: 2, c: 3, d: 4 };
const keyword = ["b", "c"];
GetKeys(target, keyword); // { b: 2, c: 3 }

(11) 数组的过滤

function arrFilter(arr1 = [], arr2 = []) {
//reduce(), ES6数组方法，这里初始值为一个空数组，arr2不包含arr1当前元素，则push到该数组
return arr1.reduce((t, v) => (!arr2.includes(v) && t.push(v), t), []);
}
const arr1=[1,3,5,7,8,9]
const arr2=[1,5,8,9]
arrFilter(arr1,arr2)//[3, 7]

结语

好了文章到这就结束了，欢迎大家( 点赞+评论+关注 ) 有问题可以来互相交流一下；希望这篇文章对大家有用,也希望大家多多支持我。今天是我参与2022首次更文挑战的第6天，加油！

reduce的11种用法