快捷導(dǎo)航

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

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

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

以前的做法

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

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

使用Object.groupBy

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

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

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

Object.groupBy 返回一個(gè)空原型對(duì)象。這意味著該對(duì)象不繼承 Object.prototype 的任何屬性。這很好，因?yàn)檫@意味著你不會(huì)意外覆蓋 Object.prototype 上的任何屬性，但這也意味著該對(duì)象沒有你可能期望的任何方法，如 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)容，則將強(qiáng)制轉(zhuǎn)為字符串。

在我們的示例中，我們一直以數(shù)字形式返回age，但在結(jié)果中卻被強(qiáng)制轉(zhuǎn)為字符串。盡管如此，你仍然可以使用數(shù)字訪問屬性，因?yàn)槭褂梅嚼ㄌ?hào)符號(hào)也會(huì)將參數(shù)強(qiáng)制為字符串。

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);

在本例中，我們是按照向誰匯報(bào)工作來對(duì)人員進(jìn)行分組的。請(qǐng)注意，要從該 Map 中按對(duì)象檢索項(xiàng)目，對(duì)象必須具有相同的引用。

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

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

何時(shí)可用

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

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

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

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

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