3.1 コレクションMap
ECMAScript 2015 (ES6) でJavaScriptにMapとSetという新しいデータ構造が追加されたんだ。 これらのデータ構造は、従来のオブジェクトや配列に比べて、データをより柔軟かつ効率的に保存・管理する方法を提供しているよ。
Mapは、キーと値のペアを格納できるデータ構造で、キーはオブジェクトや関数を含むどんなタイプでもOKなんだ。
1. Mapの作成と初期化:
const map = new Map();
2. 要素の追加:
setメソッドは、Mapに新しいキーと値のペアを追加するために使われるよ。
map.set('key1', 'value1');
map.set(2, 'value2');
map.set({ name: 'objectKey' }, 'value3');
3. 要素の取得:
getメソッドは、キーを使って値を取得するために使われるんだ。
const map = new Map();
map.set('key1', 'value1');
map.set(2, 'value2');
map.set({ name: 'objectKey' }, 'value3');
console.log(map.get('key1')); // 'value1'
console.log(map.get(2)); // 'value2'
4. キーの存在確認:
hasメソッドは、Mapにキーが存在するかどうかをチェックするんだ。
const map = new Map();
map.set('key1', 'value1');
map.set(2, 'value2');
map.set({ name: 'objectKey' }, 'value3');
console.log(map.has('key1')); // true
console.log(map.has('key3')); // false
5. 要素の削除:
deleteメソッドは、キーを使って要素を削除するんだ。
const map = new Map();
map.set('key1', 'value1');
map.set(2, 'value2');
map.set({ name: 'objectKey' }, 'value3');
map.delete('key1');
console.log(map.has('key1')); // false
6. Mapのクリア:
clearメソッドは、Mapからすべての要素を削除するために使われるんだ。
const map = new Map();
map.set('key1', 'value1');
map.set(2, 'value2');
map.set({ name: 'objectKey' }, 'value3');
map.clear();
console.log(map.size); // 0
7. Mapのイテレーション:
for...ofループを使ってMapをイテレートできるんだ。
例:
const map = new Map();
map.set('key1', 'value1');
map.set(2, 'value2');
for (const [key, value] of map) {
console.log(`${key}: ${value}`);
}
// 'key1: value1'
// '2: value2'
3.2 コレクションSet
Setは、ユニークな値を格納できるデータ構造で、オブジェクトやプリミティブも含めて、あらゆるタイプの値を格納できるんだ。
1. Setの作成と初期化:
const set = new Set();
2. 要素の追加:
addメソッドは、Setに新しい値を追加するために使われるよ。
set.add(1);
set.add('value2');
set.add({ name: 'objectValue' });
3. 値の存在確認:
hasメソッドは、Setに値が存在するかどうかを確認するために使われるんだ。
const set = new Set();
set.add(1);
set.add('value2');
set.add({ name: 'objectValue' });
console.log(set.has(1)); // true
console.log(set.has('value3')); // false
4. 要素の削除:
deleteメソッドは、Setから要素を削除するために使われるよ。
const set = new Set();
set.add(1);
set.add('value2');
set.add({ name: 'objectValue' });
set.delete(1);
console.log(set.has(1)); // false
5. Setのクリア:
clearメソッドは、Setからすべての要素を削除するために使われるんだ。
const set = new Set();
set.add(1);
set.add('value2');
set.add({ name: 'objectValue' });
set.clear();
console.log(set.size); // 0
6. Setのイテレーション:
for...ofループを使ってSetをイテレートできるんだ。
const set = new Set();
set.add(1);
set.add('value2');
for (const value of set) {
console.log(value);
}
// 1
// 'value2'
3.3 MapとSetの比較
Mapの利点:
- 任意のキー:
Mapでは、オブジェクトや関数を含むあらゆるタイプをキーにできるんだ。オブジェクトではキーは文字列やシンボルだけだよね。 - 順序のある要素:
Mapの要素は追加された順序を保持するんで、追加された順番にイテーションが簡単なんだ。 - コレクションのサイズ:
sizeメソッドでMap内の要素数を素早く取得できる。
Setの利点:
- ユニークな値:
Setは自動的にすべての要素がユニークであることを保証してくれる。 - 順序のある要素:
Setの要素は追加された順序を保持するので、追加された順番にイテレーションが簡単だよ。 - 最適化された操作:
Setは要素の追加、削除、存在確認のための最適化されたメソッドを提供している。
実用的な例
ユーザー情報を格納するためのMapの例:
const users = new Map();
users.set(1, { name: 'Alice', age: 25 });
users.set(2, { name: 'Bob', age: 30 });
for (const [id, user] of users) {
console.log(`User ID: ${id}, Name: ${user.name}, Age: ${user.age}`);
}
// User ID: 1, Name: Alice, Age: 25
// User ID: 2, Name: Bob, Age: 30
ユニークな値をフィルタリングするためのSetの例:
const numbers = [1, 2, 3, 1, 2, 4, 5, 3];
const uniqueNumbers = new Set(numbers);
for (const number of uniqueNumbers) {
console.log(number);
}
// 1
// 2
// 3
// 4
// 5
GO TO FULL VERSION