Javascript中reduce高阶函数常用算法总结

reduce函数是js中的一个高阶函数，主要用于将数组中的所有元素通过一个累加器函数，最终汇总为一个对象值，它并不会修改原数组

注意：

函数可以定义一个初始值且必须赋值，类型可以是：number型、字符串、对象、数组、复杂对象例如[ { } , { } ] 。它接收4个参数如下（参数名自定义）：

1. res: result，上一次返回的结果 （必填）
2. cur: current，当前元素 （必填）
3. pos：当前下标
4. arr：原数组

下面是一些常用算法，虽然有一些算法使用其他方式也可以实现，但记录下也算是加强对reduce的熟悉度

一、求和

const sum = [1, 2, 3, 4, 5].reduce((res, cur) => { 
  return res + cur;
}, 0);
console.log("求和:", sum);

二、拼接

const arr_str = ["this", "is", "a", "book"];
const arr_all_res = arr_str.reduce((res, cur) => {
  res = res.concat(cur);
  return res;
}, "");
console.log("字符串拼接:", arr_all_res);

三、统计次数

// 第一种
const arr_count = [1, 2, 2, 3, 6, 4, 2, 4, 10, 7, 7, 8, 0, 20];
const obj = arr_count.reduce((res, cur) => {
  if (res[cur]) {
    res[cur]++;
  } else {
    res[cur] = 1;
  }
  return res;
}, {});
console.log("\n统计元素出现的次数:", obj);

// 第二种
const obj2 = arr_count.reduce((res, cur) => {
  const count = res[cur] ?? 0;
  return {
    ...res,
    [cur]: count + 1,
  };
}, {});
console.log("\n统计元素出现的次数(方式2):", obj2);

四、数组去重

const list = [1, 2, 1, 3, 4, 4, 5, 6, 7, 6, 10];
const list_sort = list.sort((x, y) => x - y);
const list_unique = list.reduce((res, cur) => {
  if (res.indexOf(cur) === -1) {
    res.push(cur);
  }
  return res;
}, []);
console.log(`对数组${list}进行去重:${list_unique}`);

五、排序

const list_sort2 = list.reduce((res, cur, pos) => {
  const k = list.slice(pos, list.length);
  console.log(k);
  res.push(Math.min(...k));
  return res;
}, []);
console.log("数组排序:", list_sort2);

六、满足特定条件

数组处理后保存到status和msg两个数组中

const arr_result = [
  {
    id: 1,
    name: "jack",
    status: "yes",
  },
  {
    id: 2,
    name: "marry",
    status: "ok",
  },
  {
    id: 3,
    name: "ben",
    status: "success",
  },
];

const result = arr_result.reduce(
  (res, cur) => {
    res.msg.push(`${cur.name}_${cur.id}`);
    res.status.push(cur.status);

    return res;
  },
  { status: [], msg: [] }
);

console.log("\n返回满足条件的对象:", result);

七、扁平化

const tree = [
  {
    id: 1,
    name: "1",
    pid: 0,
    children: [
      {
        id: 2,
        name: "2",
        pid: 1,
        children: [],
      },
      {
        id: 3,
        name: "3",
        pid: 1,
        children: [
          {
            id: 4,
            name: "4",
            pid: 3,
            children: [],
          },
        ],
      },
    ],
  },
];

function treeToArray(tree) {
  return tree.reduce((res, cur) => {
    const { children, ...obj } = cur;
    return res.concat(
      obj,
      children && children.length ? treeToArray(children) : []
    );
  }, []);
}

console.log("扁平化:", treeToArray(tree));

八、数组分组

把数组中的元素按age进行分组

const people = [
  { name: "Alice", age: 21 },
  { name: "Max", age: 20 },
  { name: "Jane", age: 20 },
];

// 分组
function groupBy(people, str) {
  return people.reduce((res, cur) => {
    const key = cur[str];
    const group = res[key] ?? [];
    return {
      ...res,
      [key]: [...group, cur],
    };
  }, {});
}

console.log("按age分组:", groupBy(people, "age"));

补充第二种：今天（2024-02-02记录）突然发现Object.groupBy这个非常好用的API

// 两种方式运行结果是一样的
// 两个参数： 原数组，回调函数（可以使用解构）
console.log( Object.groupBy( people , ( { age } )=>age ) )

也可以这样定义

console.log(
        Object.groupBy(people, ({ age }) => {
          return age > 20 ? "超过20岁" : "不足20岁";
        })
      );