/
index.md
123 lines (91 loc) · 6.03 KB
/
index.md
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34
35
36
37
38
39
40
41
42
43
44
45
46
47
48
49
50
51
52
53
54
55
56
57
58
59
60
61
62
63
64
65
66
67
68
69
70
71
72
73
74
75
76
77
78
79
80
81
82
83
84
85
86
87
88
89
90
91
92
93
94
95
96
97
98
99
100
101
102
103
104
105
106
107
108
109
110
111
112
113
114
115
116
117
118
119
120
121
122
123
---
title: Object.groupBy()
slug: Web/JavaScript/Reference/Global_Objects/Object/groupBy
l10n:
sourceCommit: f15b8d5828c480af144a9b8f88b2724e2997f571
---
{{JSRef}}
> **メモ:** 一部のブラウザーのあるバージョンでは、このメソッドは `Array.prototype.group()` というメソッドとして実装されていました。ウェブの互換性の問題により、現在は静的メソッドとして実装されています。詳細は[ブラウザーの互換性](#ブラウザーの互換性)を確認してください。
**`Object.groupBy()`** 静的メソッドは、指定されたコールバック関数によって返された文字列値に従って、指定された反復可能な要素をグループ化します。返されるオブジェクトには、グループごとに個別のプロパティがあり、グループ内の要素を含む配列が格納されます。
このメソッドは、グループ名が文字列で表現できる場合に使用します。任意の値をキーとして要素をグループ化する必要がある場合は、代わりに {{jsxref("Map.groupBy()")}} を使用してください。
<!-- {{EmbedInteractiveExample("pages/js/object-groupby.html")}} -->
## 構文
```js-nolint
Object.groupBy(items, callbackFn)
```
### 引数
- `items`
- : 要素がグループ化される[反復可能な要素](/ja/docs/Web/JavaScript/Reference/Iteration_protocols#反復可能プロトコル)({{jsxref("Array")}} など)。
- `callbackFn`
- : 反復可能な各要素に対して実行される関数。これは、現在の要素のグループを示すプロパティのキー(文字列または[シンボル](/ja/docs/Web/JavaScript/Reference/Global_Objects/Symbol))に変換できる値を返す必要があります。この関数は以下の引数で呼び出されます。
- `element`
- : 現在処理中の要素。
- `index`
- : 現在処理中の要素のインデックス。
### 返値
すべてのグループのプロパティを持つ [`null` プロトタイプオブジェクト](/ja/docs/Web/JavaScript/Reference/Global_Objects/Object#null_プロトタイプオブジェクト) で、それぞれに関連するグループの要素を含む配列が割り当てられたものです。
## 解説
`Object.groupBy()` は、指定された `callbackFn` 関数を反復可能な要素ごとに 1 回呼び出します。コールバック関数は、関連付けられた要素のグループを示す文字列またはシンボル(どちらの型でもない値は[文字列変換](/ja/docs/Web/JavaScript/Reference/Global_Objects/String#文字列変換)されます)を返す必要があります。`callbackFn` が返す値は、`Map.groupBy()` が返すオブジェクトのキーとして使用されます。各キーには、コールバックが同じ値を返したすべての要素を含む連想配列があります。
返されたオブジェクトの要素と元の反復可能な要素は同じです({{Glossary("deep copy", "ディープコピー")}}ではありません)。要素の内部構造を変更すると、反復可能な要素と返されたオブジェクトの両方に反映されます。
## 例
### Object.groupBy() の使用
最初に、さまざまな食品の在庫を表すオブジェクトを含む配列を定義します。 それぞれの食品は `type` (種類)と `quantity` (量)を保有しています。
```js
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` プロパティの値によって要素をグループ化します。
```js
const result = Object.groupBy(inventory, ({ type }) => type);
/* 結果:
{
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 } は、[関数の引数に対するオブジェクトの分割構文](/ja/docs/Web/JavaScript/Reference/Operators/Destructuring_assignment#関数の引数として渡されたオブジェクトからのプロパティの展開)の基本例であることに注意してください。 これは、引数として渡されたオブジェクトの `type` プロパティを展開し、関数本体の `type` という名前の変数に代入します。 これは、関数内の要素に関連する値にアクセスするためのとても簡潔な方法です。
また、要素の 1 つまたは複数のプロパティの値から推測されるグループを作成することもできます。 以下は、`quantity` フィールドの値に基づいて、項目を `ok` または `restock` グループに入れる、とても似たような例です。
```js
function myCallback({ quantity }) {
return quantity > 5 ? "ok" : "restock";
}
const result2 = Object.groupBy(inventory, myCallback);
/* 結果:
{
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 }
]
}
*/
```
## 仕様書
{{Specifications}}
## ブラウザーの互換性
{{Compat}}
## 関連情報
- [`Object.groupBy` のポリフィル (`core-js`)](https://github.com/zloirock/core-js#array-grouping)
- [インデックス付きコレクション](/ja/docs/Web/JavaScript/Guide/Indexed_collections)
- {{jsxref("Array.prototype.reduce()")}}
- {{jsxref("Object.fromEntries()")}}
- {{jsxref("Map.groupBy()")}}