建站
咨詢
售后
建站咨詢
新聞中心
前言
在JavaScript編程中，對(duì)數(shù)組進(jìn)行分組是一項(xiàng)常見的任務(wù)。無(wú)論是根據(jù)特定屬性將對(duì)象分組，還是按照某些規(guī)則重新組織數(shù)組元素，分組操作在日常開發(fā)中都是常見的。過去，為了實(shí)現(xiàn)這一目標(biāo)，通常需要編寫自定義的分組函數(shù)或者使用第三方庫(kù)，比如lodash的groupBy函數(shù)。然而，好消息是，JavaScript正逐漸引入原生的分組方法，使我們的開發(fā)工作更加便捷。在本文中，我們將探討JavaScript的新特性，即Object.groupBy和Map.groupBy，這兩個(gè)新特性將使數(shù)組分組操作更加容易。
1、分組操作的背景
假設(shè)現(xiàn)在有一個(gè)包含人員信息的數(shù)組，每個(gè)人都有姓名和年齡屬性，需求想要按照他們的年齡將他們分組。在以前的JavaScript中，可能需要編寫自定義的分組函數(shù)，或者使用forEach或reduce等方法，來實(shí)現(xiàn)分組操作。如下：
const people = [
{ name: "Alice", age: 28 },
{ name: "Bob", age: 30 },
{ name: "Eve", age: 28 },
];
// 使用forEach進(jìn)行分組
const peopleByAge = {};
people.forEach((person) => {
const age = person.age;
if (!peopleByAge[age]) {
peopleByAge[age] = [];
}
peopleByAge[age].push(person);
});
// 使用reduce進(jìn)行分組
const peopleByAge = people.reduce((acc, person) => {
const age = person.age;
if (!acc[age]) {
acc[age] = [];
}
acc[age].push(person);
return acc;
}, {});運(yùn)行結(jié)果：
圖片
無(wú)論是使用forEach還是reduce，這些傳統(tǒng)方法都需要手動(dòng)檢查分組鍵是否存在，如果不存在則創(chuàng)建一個(gè)空數(shù)組，然后將對(duì)象推入該數(shù)組中。上面的示例代碼相對(duì)繁瑣，可能需要不少工作量，尤其是在復(fù)雜的應(yīng)用程序中。
下面就來Javascript即將支持的兩種新特性是如何實(shí)現(xiàn)上述需求的→
2、Object.groupBy：原生分組方法
JavaScript新引入的Object.groupBy方法，使數(shù)據(jù)分組將變得更加簡(jiǎn)單和高效。使用Object.groupBy，可以按照指定的屬性或規(guī)則將數(shù)組中的對(duì)象分組，而不需要手動(dòng)管理分組過程。如下：
const people = [
{ name: "Alice", age: 28 },
{ name: "Bob", age: 30 },
{ name: "Eve", age: 28 },
];
const peopleByAge = Object.groupBy(people, (person) => person.age);在控制臺(tái)運(yùn)行代碼可以看到：
圖片
如上圖所示，使用Object.groupBy，只需提供一個(gè)回調(diào)函數(shù)，該回調(diào)函數(shù)將確定如何進(jìn)行分組。在這種情況下，就可以按照人的年齡屬性進(jìn)行分組，這是不是比傳統(tǒng)的手動(dòng)分組方法要簡(jiǎn)單得多。
然而，需要注意的是，Object.groupBy返回一個(gè)無(wú)原型的對(duì)象，這意味著它不會(huì)繼承Object.prototype上的任何屬性或方法。因此，不能像通常那樣使用hasOwnProperty等方法。此外，回調(diào)函數(shù)應(yīng)返回一個(gè)字符串或符號(hào)，否則它將被強(qiáng)制轉(zhuǎn)換為字符串。
console.log(peopleByAge.hasOwnProperty("28"));圖片
3、Map.groupBy：返回Map對(duì)象的分組方法
除了Object.groupBy，JavaScript還引入了Map.groupBy方法，該方法在執(zhí)行分組操作時(shí)返回一個(gè)Map對(duì)象。與Object.groupBy相比，Map.groupBy提供了更多的靈活性，因?yàn)樗试S返回任何類型的值，并且可以使用Map的各種方法來操作結(jié)果。如下：
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);運(yùn)行結(jié)果：
圖片
在這個(gè)示例中，我們根據(jù)人員的上級(jí)進(jìn)行分組。一個(gè)重要的注意點(diǎn)是，要從Map中檢索對(duì)象，必須使用相同的對(duì)象引用。如果傳遞的對(duì)象雖然內(nèi)容相同但不是同一個(gè)對(duì)象，將無(wú)法從Map中檢索到結(jié)果。
peopleByManager.get(ceo);
// 返回與ceo對(duì)象相關(guān)的人員
peopleByManager.get({ name: "Jamie", age: 40, reportsTo: null });
// 返回undefined，因?yàn)檫@不是同一個(gè)對(duì)象圖片
Map.groupBy的優(yōu)勢(shì)在于，它返回一個(gè)Map對(duì)象，可以使用Map的方法來處理分組后的結(jié)果，這在某些場(chǎng)景下非常有用。
4、分組方法的兼容性
目前Object.groupBy和Map.groupBy是TC39提案的一部分，目前處于第3階段。這表明它們有望成為JavaScript標(biāo)準(zhǔn)的一部分。在實(shí)際應(yīng)用中，Chrome 117已經(jīng)支持這兩個(gè)方法，而Firefox Nightly則在實(shí)驗(yàn)標(biāo)志下實(shí)現(xiàn)了它們。Safari也已經(jīng)實(shí)現(xiàn)了類似的方法，可以期待它們會(huì)在不久的將來更新以提供更好的支持。
上面示例代碼運(yùn)行的瀏覽器版本是118.0.5993.89，故可以正確的打印出結(jié)果。
圖片
5、疑問
你可能會(huì)疑惑為什么這些分組方法被實(shí)現(xiàn)為Object.groupBy和Map.groupBy，而不是Array.prototype.groupBy。這是因?yàn)樵谶^去，有一些庫(kù)曾經(jīng)在Array.prototype上添加了不兼容的groupBy方法，這導(dǎo)致了一些兼容性問題，所以就沒有在Array.prototype上實(shí)現(xiàn)。
總結(jié)
本文介紹了JavaScript中即將引入的Object.groupBy和Map.groupBy兩種原生分組方法的使用。這些兩種原生分組方法將填補(bǔ)JavaScript開發(fā)中的空白，使前端開發(fā)人員能夠更輕松地進(jìn)行分組操作，提高了編程效率和代碼質(zhì)量。希望本文能對(duì)你以后的工作有所幫助。
本文轉(zhuǎn)載自微信公眾號(hào)「黑土豆的前端博客 」，可以通過以下二維碼關(guān)注。轉(zhuǎn)載本文請(qǐng)聯(lián)系公眾號(hào)。
文章標(biāo)題：Javascript支持?jǐn)?shù)組分組(groupBy)的方法即將到來！
URL鏈接：http://www.dlmjj.cn/article/dhgipii.html
