快捷導(dǎo)航

JavaScript中新數(shù)組分組方法詳解

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

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

以前的做法

假設(shè)你有一個代表人的對象數(shù)組，你想按年齡對它們進行分組。你可以這樣使用 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;
}, {});

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

使用Object.groupBy

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

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 的回調(diào)函數(shù)應(yīng)返回字符串或Symbol。如果返回其他內(nèi)容，則將強制轉(zhuǎn)為字符串。

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

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 函數(shù)。這也意味著你可以從回調(diào)函數(shù)返回任何類型的值。

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 中返回任何內(nèi)容。要想成功地從 Map 中獲取項目，請確保你保留了要用作鍵的對象的引用。

何時可用

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

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

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

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

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