中興AX5400Pro+上手體驗：再升級 雙2.5G網口+USB 3.0這次全都有
2021年11月的時候，中興先后發布了兩款路由器產品，中興AX5400和中興AX5400 Pro，從產品命名上就不難看出這是隸屬于同一系列的，但在外觀設計上這兩款產品可以說是完全沒一點關系
假設有一個由表示人員的對象組成的數組，需要按照年齡進行分組。可以使用forEach循環來實現，代碼如下：
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;}, {});無論哪種方式，代碼都略顯繁瑣。每次都要檢查對象，看分組鍵是否存在，如果不存在，則創建一個空數組，并將項目添加到該數組中。
可以通過以下方式來使用新的Object.groupBy方法：
const peopleByAge = Object.groupBy(people, (person) => person.age);可以看到，代碼非常簡潔！
不過需要注意，使用Object.groupBy方法返回一個沒有原型（即沒有繼承任何屬性和方法）的對象。這意味著該對象不會繼承Object.prototype上的任何屬性或方法，例如hasOwnProperty或toString等。雖然這樣做可以避免意外覆蓋Object.prototype上的屬性，但也意味著不能使用一些與對象相關的方法。
const peopleByAge = Object.groupBy(people, (person) => person.age);console.log(peopleByAge.hasOwnProperty("28"));// TypeError: peopleByAge.hasOwnProperty is not a function在調用Object.groupBy時，傳遞給它的回調函數應該返回一個字符串或 Symbol 類型的值。如果回調函數返回其他類型的值，它將被強制轉換為字符串。
在這個例子中，回調函數返回的是一個數字類型的age屬性值，但由于Object.groupBy方法要求鍵必須是字符串或 Symbol 類型，所以該數字會被強制轉換為字符串類型。
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和Object.groupBy幾乎做的是相同的事情，只是返回的結果類型不同。Map.groupBy返回一個Map對象，而不是像Object.groupBy返回一個普通的對象。
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中獲取數據，那么要求這些對象具有相同的身份或引用。這是因為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中的項，由于這個對象與之前存儲在Map中的ceo對象不是同一個對象，所以無法檢索到對應的值。
這兩個groupBy方法是 proposal-array-grouping 提案提出的，該提案目前處于第3階段，預計會在 2024 年成為正式標準。
9 月 12 日，Chrome 117發布，該版本支持了這兩個方法。Firefox Nightly 在一個標志后已經實現了這兩個方法。Safari已經以不同的名稱實現了這些方法。由于這些方法在 Chrome 中可用，這意味著它們已經在V8中被實現，所以下一次V8更新時它們將在Node中可用。
本文鏈接：http://www.tebozhan.com/showinfo-26-10900-0.htmlJavaScript 終于原生支持數組分組了！
聲明：本網頁內容旨在傳播知識，若有侵權等問題請及時與本網聯系，我們將在第一時間刪除處理。郵件：2376512515@qq.com
Copyright ? 2016-2023 天津谷騏科技有限公司 版權所有 sitemap.xml
違法及侵權請聯系：2376512515@qq.com 津ICP備18001702號
津公網安備 12010102000574號