yo828資訊網(wǎng)——每日最新資訊28at.com

以前的數(shù)組分組

假設(shè)有一個(gè)由表示人員的對(duì)象組成的數(shù)組，需要按照年齡進(jìn)行分組?？梢允褂胒orEach循環(huán)來(lái)實(shí)現(xiàn)，代碼如下：yo828資訊網(wǎng)——每日最新資訊28at.com

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é)果如下：yo828資訊網(wǎng)——每日最新資訊28at.com

{  "28": [{"name":"Alice","age":28}, {"name":"Eve","age":28}],  "30": [{"name":"Bob","age":30}]}

也可以使用reduce方法：yo828資訊網(wǎng)——每日最新資訊28at.com

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

無(wú)論哪種方式，代碼都略顯繁瑣。每次都要檢查對(duì)象，看分組鍵是否存在，如果不存在，則創(chuàng)建一個(gè)空數(shù)組，并將項(xiàng)目添加到該數(shù)組中。yo828資訊網(wǎng)——每日最新資訊28at.com

使用 Object.groupBy 分組

可以通過(guò)以下方式來(lái)使用新的Object.groupBy方法：yo828資訊網(wǎng)——每日最新資訊28at.com

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

可以看到，代碼非常簡(jiǎn)潔！yo828資訊網(wǎng)——每日最新資訊28at.com

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

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 類(lèi)型的值。如果回調(diào)函數(shù)返回其他類(lèi)型的值，它將被強(qiáng)制轉(zhuǎn)換為字符串。yo828資訊網(wǎng)——每日最新資訊28at.com

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

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é)果類(lèi)型不同。Map.groupBy返回一個(gè)Map對(duì)象，而不是像Object.groupBy返回一個(gè)普通的對(duì)象。yo828資訊網(wǎng)——每日最新資訊28at.com

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)行了分組。如果想通過(guò)對(duì)象來(lái)從這個(gè)Map中獲取數(shù)據(jù)，那么要求這些對(duì)象具有相同的身份或引用。這是因?yàn)镸ap在比較鍵時(shí)使用的是嚴(yán)格相等（===），只有兩個(gè)對(duì)象具有相同的引用，才能被認(rèn)為是相同的鍵。yo828資訊網(wǎng)——每日最新資訊28at.com

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ì)象類(lèi)似的對(duì)象作為鍵去訪(fǎng)問(wèn)Map中的項(xiàng)，由于這個(gè)對(duì)象與之前存儲(chǔ)在Map中的ceo對(duì)象不是同一個(gè)對(duì)象，所以無(wú)法檢索到對(duì)應(yīng)的值。yo828資訊網(wǎng)——每日最新資訊28at.com

瀏覽器支持

這兩個(gè)groupBy方法是 proposal-array-grouping 提案提出的，該提案目前處于第3階段，預(yù)計(jì)會(huì)在 2024 年成為正式標(biāo)準(zhǔn)。yo828資訊網(wǎng)——每日最新資訊28at.com

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

yo828資訊網(wǎng)——每日最新資訊28at.com

yo828資訊網(wǎng)——每日最新資訊28at.com

本文鏈接：http://www.www897cc.com/showinfo-26-10900-0.htmlJavaScript 終于原生支持?jǐn)?shù)組分組了！

聲明：本網(wǎng)頁(yè)內(nèi)容旨在傳播知識(shí)，若有侵權(quán)等問(wèn)題請(qǐng)及時(shí)與本網(wǎng)聯(lián)系，我們將在第一時(shí)間刪除處理。郵件：2376512515@qq.com

上一篇： 前后端分離項(xiàng)目必備——自動(dòng)生成API文檔神器Swagger

下一篇： OpenAI一夜顛覆AI繪畫(huà)！DALL·E 3+ChatGPT強(qiáng)強(qiáng)聯(lián)合，畫(huà)面直接細(xì)節(jié)爆炸