?終於出來了!不再需要編寫醜陋的程式碼來按字段的特定值對物件數組進行分組!
自 2023 年底以來,物件有一個名為 groupBy() 的官方靜態方法,可以為我們完成此操作!
它接受一個 Iterable(例如陣列)和一個函數,該函數針對每個元素執行,並且必須傳回該特定元素的「類別」。
此方法傳回一個新對象,其中每個鍵都是一個不同的類別,其中包含屬於該特定類別的物件陣列。
注意:傳回的物件和原始可迭代物件中的元素是相同的(不是深拷貝!)。更改元素的內部結構將反映在原始可迭代物件和傳回的物件中。
讓我們舉一個實際的例子來看看按年齡將所有忍者龜角色分組是多麼容易。
const ninjaTurtlesCharacters = [ { age: 16, name: 'Michelangelo' }, { age: 16, name: 'Raffaello' }, { age: 16, name: 'Donatello' }, { age: 16, name: 'Leonardo' }, { age: 91, name: 'Splinter' }, { age: 25, name: 'Casey Jones' }, { age: 25, name: 'April O\'Neil' } ];
const ninjaTurtlesCharactersByAge = ninjaTurtlesCharacters.reduce( (groupedPeople, item) => ({ ...groupedPeople, [item.age]: groupedPeople[item.age] ? [...groupedPeople[item.age], item] : [item], }), {} );
const ninjaTurtlesCharactersByAgeNew = Object.groupBy( ninjaTurtlesCharacters, ({ age }) => age );
提示:如果您想回傳 Map 而不是 Object,請使用 Map.groupBy()
{ "16": [ { age: 16, name: 'Michelangelo' }, { age: 16, name: 'Raffaello' }, { age: 16, name: 'Donatello' }, { age: 16, name: 'Leonardo' } ], "25": [ { age: 25, name: 'Casey Jones' }, { age: 25, name: 'April O\'Neil' } ], "91": [ { age: 91, name: 'Splinter' } ] }
???像往常一樣,我創建了一個簡單的 Stackblitz 專案來使用程式碼。
?文件:https://developer.mozilla.org/en-US/docs/Web/JavaScript/Reference/Global_Objects/Object/groupBy
ℹ 瀏覽器支援:https://caniuse.com/mdn-javascript_builtins_object_groupby
免責聲明: 提供的所有資源部分來自互聯網,如果有侵犯您的版權或其他權益,請說明詳細緣由並提供版權或權益證明然後發到郵箱:[email protected] 我們會在第一時間內為您處理。
Copyright© 2022 湘ICP备2022001581号-3