Object.groupBy()
注意： 在某些瀏覽器版本的早期實現中，此方法是以 Array.prototype.group() 的形式實現的。由於 Web 相容性問題，現在它已實現為靜態方法。有關詳細資訊，請檢視 瀏覽器相容性表格。
Object.groupBy() 靜態方法根據提供的回撥函式返回的字串值對給定可迭代物件的元素進行分組。返回的物件為每個組都設有獨立的屬性，其中包含屬於該組的元素組成的陣列。
當組名可以用字串表示時，應使用此方法。如果您需要使用任意值作為鍵來分組元素，請改用 Map.groupBy()。
試一試
const inventory = [
{ name: "asparagus", type: "vegetables", quantity: 9 },
{ name: "bananas", type: "fruit", quantity: 5 },
{ name: "goat", type: "meat", quantity: 23 },
{ name: "cherries", type: "fruit", quantity: 12 },
{ name: "fish", type: "meat", quantity: 22 },
];
const result = Object.groupBy(inventory, ({ quantity }) =>
quantity < 6 ? "restock" : "sufficient",
);
console.log(result.restock);
// [{ name: "bananas", type: "fruit", quantity: 5 }]
語法
Object.groupBy(items, callbackFn)
引數
返回值
一個 null-prototype 物件，其中包含所有組的屬性，每個屬性都分配給一個包含相關組元素的陣列。
描述
Object.groupBy() 對可迭代物件中的每個元素呼叫一次提供的 callbackFn 函式。回撥函式應返回一個字串或 symbol（非這兩種型別的其他值將被 強制轉換為字串），指示相關元素的組。callbackFn 返回的值將用作 Object.groupBy() 返回的物件的鍵。每個鍵都有一個關聯的陣列，其中包含回撥函式返回相同值的的所有元素。
返回物件和原始可迭代物件中的元素是相同的（不是 深複製）。更改元素的內部結構將同時反映在原始可迭代物件和返回的物件中。
示例
使用 Object.groupBy()
首先，我們定義一個包含物件的陣列，這些物件代表不同食品的庫存。每種食品都有一個 type 和一個 quantity。
const inventory = [
{ name: "asparagus", type: "vegetables", quantity: 5 },
{ name: "bananas", type: "fruit", quantity: 0 },
{ name: "goat", type: "meat", quantity: 23 },
{ name: "cherries", type: "fruit", quantity: 5 },
{ name: "fish", type: "meat", quantity: 22 },
];
下面的程式碼按其 type 屬性的值對元素進行分組。
const result = Object.groupBy(inventory, ({ type }) => type);
/* Result is:
{
vegetables: [
{ name: 'asparagus', type: 'vegetables', quantity: 5 },
],
fruit: [
{ name: "bananas", type: "fruit", quantity: 0 },
{ name: "cherries", type: "fruit", quantity: 5 }
],
meat: [
{ name: "goat", type: "meat", quantity: 23 },
{ name: "fish", type: "meat", quantity: 22 }
]
}
*/
每次呼叫時，箭頭函式都會返回每個陣列元素的 type。請注意，函式引數 { type } 是 函式引數物件解構語法 的基本示例。這會解構作為引數傳遞的物件的 type 屬性，並將其賦值給函式體中名為 type 的變數。這是訪問函式內元素相關值的非常簡潔的方法。
我們還可以建立基於元素的一個或多個屬性中的值推斷出的組。下面是一個非常相似的示例，它根據 quantity 欄位的值將物品放入 ok 或 restock 組。
function myCallback({ quantity }) {
return quantity > 5 ? "ok" : "restock";
}
const result2 = Object.groupBy(inventory, myCallback);
/* Result is:
{
restock: [
{ name: "asparagus", type: "vegetables", quantity: 5 },
{ name: "bananas", type: "fruit", quantity: 0 },
{ name: "cherries", type: "fruit", quantity: 5 }
],
ok: [
{ name: "goat", type: "meat", quantity: 23 },
{ name: "fish", type: "meat", quantity: 22 }
]
}
*/
規範
| 規範 |
|---|
| ECMAScript® 2026 語言規範 # sec-object.groupby |
瀏覽器相容性
載入中…