实用且不常见的数组方法

一、对数组进行分类：array.groupBy

首先有一个数组

let list = [
  { name: "vue", value: "10" },
  { name: "react", value: "10" },
  { name: "angular", value: "10" },
  { name: "vue", value: "20" },
  { name: "react", value: "20" },
  { name: "angular", value: "20" },
];

我们需要对数组按类别进行分组统计，变成如下格式，我们该怎么实现？

let res = {
  vue: [
    { name: "vue", value: "10" },
    { name: "vue", value: "20" }
  ],
  react: [
    { name: "react", value: "10" },
    { name: "react", value: "20" }
  ],
  angular: [
    { name: "angular", value: "10" },
    { name: "angular", value: "20" }
  ],
};

通常的实现方式是通过循环比较，如下 

let resObj = {};
for (let index = 0; index < list.length; index++) {
  const element = list[index];
  resObj[element.name] = resObj[element.name] || [];
  resObj[element.name].push(element);
}
// resObj = {
//   vue: [ { name: "vue", value: "10" }, { name: "vue", value: "20" } ],
//   react: [ { name: "react", value: "10" }, { name: "react", value: "20" } ],
//   angular: [ { name: "angular", value: "10" }, { name: "angular", value: "20" } ]
// };

 但是，这样写很繁琐，这个时候如果使用array.groupBy() 就方便多了

let resObj = list.groupBy(item => item.name);
// resObj = {
//   vue: [ { name: "vue", value: "10" }, { name: "vue", value: "20" } ],
//   react: [ { name: "react", value: "10" }, { name: "react", value: "20" } ],
//   angular: [ { name: "angular", value: "10" }, { name: "angular", value: "20" } ]
// };

二、更灵活的 Map ：array.flatMap() 

但有时，我们需要跳过数组中的某些元素，并返回新的数组。通常做法

let arr = [1, 2, 3, 4];
let resArr = arr.filter((x) => x !== 1).map((x) => x * 3);
// resArr = [ 6, 9, 12 ];

使用 map 和 filter 结合的方式固然可以解决我们的需求，但多个方法的结合让代码看起来不那么简洁易读。可以使用flatMap 方法更简单的实现。

let arr = [1, 2, 3, 4];
let resArr = arr.flatMap((x) => (x === 1 ? [] : [x * 3]));
// resArr = [ 6, 9, 12 ];