在JavaScript中使用数组的reduce方法的场景（进行求和、去重、降低维数）

大家好~ 我是前端uio，本文主要介绍在 JavaScript 中使用数组的 reduce 方法的场景（进行求和、去重、降低维数）。 有什么疑问都欢迎私聊或者在评论区留言。如果需要开发web网页或者微信小程序都可以找我私聊，我会尽可能回答我了解的内容。

---

一、基本介绍

1.介绍

        reduce 是 JavaScript 中的一个数组方法，对数组中的每个元素执行一个由自定义提供的 reduce 函数（升序执行），并将其结果汇总为单个返回值。reduce 方法还可以接收一个函数作为 acc 累加器。

2.语法

arr.reduce(callback, initialValue)

callback: 执行数组中每个元素的函数，包含四个参数：

• acc：累计处理后的值，第一次执行时为初始值（initialValue）。
• currentValue：数组中当前被处理的元素。
• index：当前元素在数组中的索引。
• arr：调用reduce方法的数组。

 initialValue: 作为第一次调用 callback 的第一个参数。如果没有提供initialValue,则数组的第一个元素将被用作初始值。

二、reduce的主要使用场景

1.求和

const arr= [1, 3, 5, 7];
const sum = arr.reduce((acc, val) => acc+ val, 0);
console.log(sum); // 输出 16
 详细输出过程：
 acc:  0
 val:  1
 index:  0
 init: 0
 arr:  [1, 3, 5, 7]
 ----------------
 acc:  1
 val:  3
 index:  1
 init: 0
 arr:  [1, 3, 5, 7]
 ----------------
 acc:  4
 val:  5
 index:  2
 init: 0
 arr:  [1, 3, 5, 7]
 ----------------
 acc:  9
 val:  7
 index:  3
 init: 0
 arr:  [1, 3, 5, 7]
 ----------------
 sum:  16

2.去重

const arr = [1, 2, 3, 4, 1];
const resArr = arr.reduce((acc, val) => {
  if (!acc.includes(val)) {
    acc.push(val);
  }
  return acc;
}, []);
结果：[1, 2, 3, 4]

3.将二维转化为一维

const arr= [[1, 2], 3, 4, [5, 6]];
const getArr= arr.reduce((acc, val) => acc.concat(Array.isArray(val) ? getArr(val) : val), []);
console.log(getArr); 
输出 [1, 2, 3, 4, 5, 6]

三、拓展与练习 

1.将数组拼接成为特定格式的字符串

const keys = ['name', 'age', 'desc'];
const item = { name: '胡桃', age: 18, desc: 'girlfriend'};
const key = keys.reduce((acc, val, index) => {
        return acc + (index > 0 ? '-' : '') + item[val]
      }, '');
console.log(key); 

结果：'胡桃-18-girlfriend'

四、总结与思考

1.数组的reduce 方法有哪些应用场景（求和、去重、降维）

2.reduce的基本语法（arr.reduce(callback, initialValue)）