以前的數(shù)組分組

假設(shè)有一個(gè)由表示人員的對(duì)象組成的數(shù)組，需要按照年齡進(jìn)行分組。可以使用forEach循環(huán)來實(shí)現(xià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);

輸出結(jié)果如下：

{
  "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ì)象，看分組鍵是否存在，如果不存在，則創(chuàng)建一個(gè)空數(shù)組，并將項(xiàng)目添加到該數(shù)組中。

使用 Object.groupBy 分組

可以通過以下方式來使用新的Object.groupBy方法：

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

可以看到，代碼非常簡(jiǎn)潔！

不過需要注意，使用Object.groupBy方法返回一個(gè)沒有原型（即沒有繼承任何屬性和方法）的對(duì)象。這意味著該對(duì)象不會(huì)繼承Object.prototype上的任何屬性或方法，例如hasOwnProperty或toString等。雖然這樣做可以避免意外覆蓋Object.prototype上的屬性，但也意味著不能使用一些與對(duì)象相關(guān)的方法。

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

在調(diào)用Object.groupBy時(shí)，傳遞給它的回調(diào)函數(shù)應(yīng)該返回一個(gè)字符串或 Symbol 類型的值。如果回調(diào)函數(shù)返回其他類型的值，它將被強(qiáng)制轉(zhuǎn)換為字符串。

在這個(gè)例子中，回調(diào)函數(shù)返回的是一個(gè)數(shù)字類型的age屬性值，但由于Object.groupBy方法要求鍵必須是字符串或 Symbol 類型，所以該數(shù)字會(huì)被強(qiáng)制轉(zhuǎn)換為字符串類型。

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.groupBy和Object.groupBy幾乎做的是相同的事情，只是返回的結(jié)果類型不同。Map.groupBy返回一個(gè)Map對(duì)象，而不是像Object.groupBy返回一個(gè)普通的對(duì)象。

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

這里根據(jù)人的匯報(bào)上級(jí)將他們進(jìn)行了分組。如果想通過對(duì)象來從這個(gè)Map中獲取數(shù)據(jù)，那么要求這些對(duì)象具有相同的身份或引用。這是因?yàn)镸ap在比較鍵時(shí)使用的是嚴(yán)格相等（===），只有兩個(gè)對(duì)象具有相同的引用，才能被認(rèn)為是相同的鍵。

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對(duì)象類似的對(duì)象作為鍵去訪問Map中的項(xiàng)，由于這個(gè)對(duì)象與之前存儲(chǔ)在Map中的ceo對(duì)象不是同一個(gè)對(duì)象，所以無法檢索到對(duì)應(yīng)的值。

瀏覽器支持

這兩個(gè)groupBy方法是 proposal-array-grouping 提案提出的，該提案目前處于第3階段，預(yù)計(jì)會(huì)在 2024 年成為正式標(biāo)準(zhǔn)。

9 月 12 日，Chrome 117發(fā)布，該版本支持了這兩個(gè)方法。Firefox Nightly 在一個(gè)標(biāo)志后已經(jīng)實(shí)現(xiàn)了這兩個(gè)方法。Safari已經(jīng)以不同的名稱實(shí)現(xiàn)了這些方法。由于這些方法在 Chrome 中可用，這意味著它們已經(jīng)在V8中被實(shí)現(xiàn)，所以下一次V8更新時(shí)它們將在Node中可用。

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

你可能會(huì)想，為什么這個(gè)功能被實(shí)現(xiàn)為Object.groupBy而不是Array.prototype.groupBy。根據(jù)提案，有一個(gè)庫(kù)曾經(jīng)用不兼容的groupBy方法對(duì)Array.prototype進(jìn)行了修改。在考慮為Web新增API時(shí)，向后兼容性非常重要。幾年前，在嘗試實(shí)現(xiàn)Array.prototype.flatten時(shí)就出現(xiàn)了一個(gè)稱為SmooshGate的事件。

使用靜態(tài)方法實(shí)際上對(duì)未來的可擴(kuò)展性更好。當(dāng)Records和Tuples提案實(shí)現(xiàn)時(shí)，可以添加一個(gè)Record.groupBy方法，用于將數(shù)組分組為不可變記錄。

簡(jiǎn)而言之，使用靜態(tài)方法可以更好地保持向后兼容性，并提供更好的擴(kuò)展性，以便在未來添加更多功能和數(shù)據(jù)結(jié)構(gòu)。

JavaScript 正在填補(bǔ)這些空白，并使我們的開發(fā)更簡(jiǎn)單。目前，lodash.groupBy每周的 npm 下載量在 150 萬至 200 萬次之間，當(dāng)所有瀏覽器都支持該方法之后，就不再需要引入lodash.groupBy 庫(kù)了！