JS 中的 reduce使用举例技巧。

1. 计算数组中元素的总和

这是reduce最常见的用法之一，可以用来计算数组中所有元素的总和。例如，如果我们有一个包含数字的数组，我们可以用reduce来求和：

const numbers = [1, 2, 3, 4, 5];
const sum = numbers.reduce((acc, cur) => acc + cur, 0);
console.log(sum); // 15

2. 计算数组中元素的平均值

类似于求和，我们也可以用reduce来计算数组中元素的平均值。我们只需要在回调函数中将累计值除以数组的长度即可：

const numbers = [1, 2, 3, 4, 5];
const average = numbers.reduce((acc, cur) => acc + cur, 0) / numbers.length;
console.log(average); // 3

3. 计算数组中元素的最大值或最小值

除了求和和求平均，我们还可以用reduce来找出数组中元素的最大值或最小值。我们只需要在回调函数中使用Math.max或Math.min方法来比较累计值和当前元素，并返回较大或较小的那个：

const numbers = [1, 2, 3, 4, 5];
const max = numbers.reduce((acc, cur) => Math.max(acc, cur), -Infinity);
console.log(max); // 5
const min = numbers.reduce((acc, cur) => Math.min(acc, cur), Infinity);
console.log(min); // 1

4. 将数组转换为对象

reduce不仅可以用来对数组进行数学运算，还可以用来将数组转换为其他类型的数据结构，例如对象。例如，如果我们有一个包含键值对的二维数组，我们可以用reduce来将它转换为一个对象：

const entries = [['name', 'Alice'], ['age', 18], ['gender', 'female']];
const obj = entries.reduce((acc, cur) => {
  acc[cur[0]] = cur[1];
  return acc;
}, {});
console.log(obj); // {name: "Alice", age: 18, gender: "female"}

5. 将对象转换为数组

反过来，我们也可以用reduce来将对象转换为数组，例如：

const obj = {
  name: 'Alice',
  age: 25,
  gender: 'female'
};

const arr = Object.keys(obj).reduce((acc, key) => {
  acc.push([key, obj[key]]);
  return acc;
}, []);

console.log(arr); // [['name', 'Alice'], ['age', 25], ['gender', 'female']]

6、统计一个数组中每个元素出现的次数

如果我们想要统计一个数组中每个元素出现的次数，我们可以使用reduce方法来实现。例如：

let arr = ['a', 'b', 'c', 'a', 'b'];
let count = arr.reduce((obj, item) => {
  // 如果对象中已经有了这个键，就让它的值加一
  if (obj[item]) {
    obj[item]++;
  } else {
    // 如果对象中没有这个键，就初始化为一
    obj[item] = 1;
  }
  // 返回对象作为下一次的累计值
  return obj;
}, {}); // 初始值为空对象
console.log(count); // {a: 2, b: 2, c: 1}

7、按条件分组

假设我们有一个包含学生信息的数组，每个对象都有name和score属性，我们想要按照score是否大于等于60来分组，即及格和不及格。我们可以使用reduce这样做：

// 定义一个学生数组
const students = [
  {name: 'Alice', score: 75},
  {name: 'Bob', score: 59},
  {name: 'Charlie', score: 82},
  {name: 'David', score: 48},
  {name: 'Eve', score: 66}
];

// 使用reduce按条件分组
const groups = students.reduce((acc, cur) => {
  // 判断当前对象的score是否大于等于60
  const key = cur.score >= 60 ? 'pass' : 'fail';
  // 如果累积对象中还没有这个key，就创建一个空数组
  if (!acc[key]) {
    acc[key] = [];
  }
  // 将当前对象推入对应的数组
  acc[key].push(cur);
  // 返回累积对象
  return acc;
}, {}); // 初始值为一个空对象

// 打印结果
console.log(groups);
/*
{
  pass: [
    { name: 'Alice', score: 75 },
    { name: 'Charlie', score: 82 },
    { name: 'Eve', score: 66 }
  ],
  fail: [
    { name: 'Bob', score: 59 },
    { name: 'David', score: 48 }
  ]
}
*/

8、将多数组合并为一个对象

将多个数组合并为一个对象，例如，将一个包含用户信息的数组和一个包含用户订单的数组合并为一个包含用户信息和订单的对象。这样可以方便地对数据进行分析和处理。

要实现这个功能，我们可以使用reduce方法的第二个参数，即初始值。初始值可以是任何类型的值，包括一个空对象。然后，在reduce方法的回调函数中，我们可以根据数组元素的某个属性（例如用户ID）来判断是否已经存在对应的对象属性。如果不存在，就创建一个新的属性，并将数组元素赋值给它。如果存在，就将数组元素追加到已有的属性中。最后，返回累积的对象作为下一次迭代的初始值。

下面是一个示例代码：

// 用户信息数组
const users = [
{ id: 1, name: "Alice", age: 25 },
{ id: 2, name: "Bob", age: 30 },
{ id: 3, name: "Charlie", age: 35 },
];

// 用户订单数组
const orders = [
{ id: 1, userId: 2, product: "Book", price: 10 },
{ id: 2, userId: 1, product: "Pen", price: 5 },
{ id: 3, userId: 3, product: "Shirt", price: 20 },
{ id: 4, userId: 2, product: "Shoes", price: 15 },
];

// 使用reduce方法将两个数组合并为一个对象
const result = users.reduce((acc, user) => {
// 判断是否已经存在对应用户ID的属性
if (!acc[user.id]) {
  // 如果不存在，创建一个新的属性，并将用户信息赋值给它
  acc[user.id] = user;
  // 同时，创建一个空数组用来存储用户订单
  acc[user.id].orders = [];
}
// 遍历订单数组，找到属于当前用户的订单
for (let order of orders) {
  if (order.userId === user.id) {
    // 将订单追加到用户订单数组中
    acc[user.id].orders.push(order);
  }
}
// 返回累积的对象
return acc;
}, {}); // 初始值为空对象

// 打印结果
console.log(result);

/*
{
    "1": {
        "id": 1,
        "name": "Alice",
        "age": 25,
        "orders": [
            {
                "id": 2,
                "userId": 1,
                "product": "Pen",
                "price": 5
            }
        ]
    },
    "2": {
        "id": 2,
        "name": "Bob",
        "age": 30,
        "orders": [
            {
                "id": 1,
                "userId": 2,
                "product": "Book",
                "price": 10
            },
            {
                "id": 4,
                "userId": 2,
                "product": "Shoes",
                "price": 15
            }
        ]
    },
    "3": {
        "id": 3,
        "name": "Charlie",
        "age": 35,
        "orders": [
            {
                "id": 3,
                "userId": 3,
                "product": "Shirt",
                "price": 20
            }
        ]
    }
}
*/

9、将字符串转化为对象

我们经常会遇到在url上进行取值，当然这有很多种方法，我们用reduce方法来实现。

// 将URL参数转化为对象
let url = "https://www.example.com?name=Tom&age=20&gender=male";
let params = url.split("?")[1]; // 获取参数部分
let obj = params.split("&").reduce((acc, cur) => {
  let [key, value] = cur.split("="); // 分割键和值
  acc[key] = value; // 将键和值添加到对象中
  return acc;
}, {}); // 初始值为空对象
console.log(obj); // {name: "Tom", age: "20", gender: "male"}

10、检查字符串是不是回文字符

如果我们想要检查一个字符串是否是回文字符串，即正着读和反着读都一样，例如"racecar"，我们可以使用reduce方法来实现。

首先，我们将字符串转换为数组，然后使用reduce方法从右到左遍历数组，将每个元素拼接到累积器上，得到一个反转后的字符串。然后，我们将反转后的字符串和原始字符串进行比较，如果相等，则说明是回文字符串，否则不是。

例如，给定字符串"racecar"，我们可以这样写：

const isPalindrome = str => {
  // 将字符串转换为数组
  const arr = str.split('');
  // 使用reduce方法从右到左遍历数组，将每个元素拼接到累积器上
  const reversedStr = arr.reduce((accumulator, currentValue) => currentValue + accumulator, '');
  // 将反转后的字符串和原始字符串进行比较
  return reversedStr === str;
};

console.log(isPalindrome('racecar')); // true
console.log(isPalindrome('hello')); // false

当然还有其他写法：

const fun = str => {
    let result = str.split('').reverse().toString().replaceAll(',','')
    return result === str
}
console.log(fun('abcd'))    // false
console.log(fun('abba'))    // true