JavaScript中新數組分組方法詳解

更新時間：2024年02月22日 08:39:58 作者：chuckQu

對數組中的項目進行分組,你可能已經做過很多次了,好消息是,JavaScript?現在有了分組方法,所以你再也不必這樣做了,下面我們就來看看它們的具體使用吧

以前的做法

假設你有一個代表人的對象數組，你想按年齡對它們進行分組。你可以這樣使用 forEach 循環(huán)：

const people = [
  { name: "Alice", age: 28 },
  { name: "Bob", age: 30 },
  { name: "Eve", age: 28 },
];

const peopleByAge = {};

people.forEach((person) => {
  const age = person.age;
  if (!peopleByAge[age]) {
    peopleByAge[age] = [];
  }
  peopleByAge[age].push(person);
});
console.log(peopleByAge);
/*
{
  "28": [{"name":"Alice","age":28}, {"name":"Eve","age":28}],
  "30": [{"name":"Bob","age":30}]
}
*/

或者可以像這樣來使用reduce：

const peopleByAge = people.reduce((acc, person) => {
  const age = person.age;
  if (!acc[age]) {
    acc[age] = [];
  }
  acc[age].push(person);
  return acc;
}, {});

無論哪種方法，代碼都略顯笨拙。你總是要檢查對象是否存在分組鍵，如果不存在，就用一個空數組來創(chuàng)建它。然后再將項目推入數組。

使用Object.groupBy

有了新的 Object.groupBy 方法，你就可以像這樣得出結果：

const peopleByAge = Object.groupBy(people, (person) => person.age);

簡單多了！不過也有一些需要注意的地方。

Object.groupBy 返回一個空原型對象。這意味著該對象不繼承 Object.prototype 的任何屬性。這很好，因為這意味著你不會意外覆蓋 Object.prototype 上的任何屬性，但這也意味著該對象沒有你可能期望的任何方法，如 hasOwnProperty 或 toString。

const peopleByAge = Object.groupBy(people, (person) => person.age);
console.log(peopleByAge.hasOwnProperty("28"));
// TypeError: peopleByAge.hasOwnProperty is not a function

傳遞給 Object.groupBy 的回調函數應返回字符串或Symbol。如果返回其他內容，則將強制轉為字符串。

在我們的示例中，我們一直以數字形式返回age，但在結果中卻被強制轉為字符串。盡管如此，你仍然可以使用數字訪問屬性，因為使用方括號符號也會將參數強制為字符串。

console.log(peopleByAge[28]);
// => [{"name":"Alice","age":28}, {"name":"Eve","age":28}]
console.log(peopleByAge["28"]);
// => [{"name":"Alice","age":28}, {"name":"Eve","age":28}]

使用Map.groupBy

除了返回 Map 之外，Map.groupBy 的功能與 Object.groupBy 幾乎相同。這意味著你可以使用所有常用的 Map 函數。這也意味著你可以從回調函數返回任何類型的值。

const ceo = { name: "Jamie", age: 40, reportsTo: null };
const manager = { name: "Alice", age: 28, reportsTo: ceo };

const people = [
  ceo,
  manager,
  { name: "Bob", age: 30, reportsTo: manager },
  { name: "Eve", age: 28, reportsTo: ceo },
];

const peopleByManager = Map.groupBy(people, (person) => person.reportsTo);

在本例中，我們是按照向誰匯報工作來對人員進行分組的。請注意，要從該 Map 中按對象檢索項目，對象必須具有相同的引用。

peopleByManager.get(ceo);
// => [{ name: "Alice", age: 28, reportsTo: ceo }, { name: "Eve", age: 28, reportsTo: ceo }]
peopleByManager.get({ name: "Jamie", age: 40, reportsTo: null });
// => undefined

在上面的示例中，第二行使用了一個看起來像 ceo 對象的對象，但它并不是同一個對象，因此它不會從 Map 中返回任何內容。要想成功地從 Map 中獲取項目，請確保你保留了要用作鍵的對象的引用。

何時可用

這兩個 groupBy 方法是 TC39 提議的一部分，目前處于第三階段。這意味著它很有可能成為一項標準，因此也出現了一些實施方案。

Chrome 瀏覽器 117 版本剛剛推出了對這兩種方法的支持，而 Firefox 瀏覽器 119 版本也發(fā)布了對這兩種方法的支持。Safari 以不同的名稱實現了這些方法，我相信他們很快就會更新。既然 Chrome 瀏覽器中出現了這些方法，就意味著它們已在 V8 中實現，因此下次 V8 更新時，Node 中也會出現這些方法。

為什么使用靜態(tài)方法

你可能會問，為什么要以 Object.groupBy 而不是 Array.prototype.groupBy 的形式來實現呢？根據該提案，有一個庫曾經用一個不兼容的 groupBy 方法對 Array.prototype 進行了猴子補丁。在考慮新的應用程序接口時，向后兼容性非常重要。幾年前，在嘗試實現 Array.prototype.flatten 時，這一點在一次被稱為 SmooshGate 的事件中得到了強調。

幸運的是，使用靜態(tài)方法似乎更有利于未來的可擴展性。當 Record 和 Tuples 提議實現時，我們可以添加一個 Record.groupBy 方法，用于將數組分組為不可變的記錄。