【インタビューの質問】JSにおけるMap、WeakMap、Objectの違い

 大昌面接の質問を共有する 面接質問バンク

フロントエンド面接とバックエンド面接の質問バンク（面接に必要） オススメ度： ★★★★★

アドレス:フロントエンド インタビューの質問バンク  Web フロントエンド インタビューの質問バンク VS Java バックエンド インタビューの質問バンク Daquan

JavaScript の Map、WeakMap、および Object はすべて、キーと値のペアを格納するために使用されるデータ構造です。

1. Map: マップは、任意のデータ型 (オブジェクトやプリミティブ データ型を含む) をキーとして使用できる新しいデータ構造です。Map のプロパティには次のようなものがあります。

• キーの挿入順序を維持する: マップをトラバースするとき、キーと値のペアは挿入順序で返されます。
• キーは任意のタイプにすることができます。オブジェクトとは異なり、マップのキーはオブジェクト、関数、プリミティブタイプなど、任意のタイプの値にすることができます。
• サイズを取得できます。Map のサイズは、Map の size プロパティを通じて簡単に取得できます。

1. WeakMap: WeakMap は特殊なタイプの Map であり、そのキーはオブジェクトのみであり、ガベージ コレクションを妨げません。WeakMap のプロパティには次のようなものがあります。

• キーはオブジェクトである必要があります。Map とは異なり、WeakMap のキーは Object 型である必要があります。
• ガベージ コレクションを防止できません: WeakMap 内のキーと値のペアのキーが参照されなくなると、キーと値のペアは自動的に削除されます。これにより、潜在的なメモリ リークに対処する場合に WeakMap が役立ちます。
• 列挙不可能: WeakMap にはすべてのキーと値のペアを取得するメソッドがないため、走査できません。
• サイズを取得できません: WeakMap には size プロパティがないため、サイズを直接取得できません。

1. Object: オブジェクトは、JavaScript で最も一般的に使用されるデータ構造です。オブジェクトはキーと値のペアを保存するために使用されますが、いくつかの制限があります。オブジェクトの特徴は次のとおりです。

• キーは文字列または記号である必要があります。オブジェクト キーには文字列または記号のみを使用できます。他の型がキーとして使用される場合、それらは自動的に文字列に変換されます。
• キーの順序は保証できません。最新の JavaScript エンジンのほとんどはキーを挿入順に保存しますが、これは標準で義務付けられた動作ではありません。
• プロトタイプ チェーン: オブジェクトにはプロトタイプ チェーンがあり、プロパティ名の衝突が発生する可能性があります。
• サイズを直接取得することはできません。オブジェクトにはサイズ プロパティがないため、オブジェクトのサイズを取得するには手動で計算する必要があります。

Map、WeakMap、Object の違いは次のとおりです。

1. キーの種類:

Mapキーは任意のタイプにすることができますが、WeakMapキーはオブジェクト タイプである必要があり、Objectキーは文字列またはシンボル タイプである必要があります。

2. ガベージコレクション:

Mapのキーは強参照であり、キー オブジェクトに他の参照がない場合でもガベージ コレクションされません。WeakMapのキーは弱い参照ですが、キー オブジェクトに他の参照がない場合、ガベージ コレクションされる可能性があります。Objectのプロパティは強参照であり、他に参照がない場合でもガベージ コレクションの対象になりません。

3. 数え上げ可能性:

Objectのプロパティは列挙可能であり、for-in や Object.keys() などのメソッドを使用してプロパティを走査できます。また、MapとのキーはWeakMap列挙可能ではありません。

4. 方法と操作:

ObjectObject.keys() や Object.values() など、オブジェクト固有のメソッドと操作がいくつかあります。Mapまた、WeakMapMap.has() や WeakMap.delete() など、いくつかのマッピング固有のメソッドと操作を提供します。

5. 継承:

Objectプロトタイプ継承を使用すると、プロトタイプ チェーンからプロパティを継承できます。Mapと と にはWeakMapプロトタイプの継承がありませんが、独立したデータ構造です。

使用するシーン:

• 非文字列キーを使用する必要がある場合に使用できますMap。
• オブジェクトに関連付けられたメタデータを保存する必要がある場合に使用できますWeakMap。
• オブジェクトのプロパティを保存する必要がある場合に使用できますObject。
• メモリ リークを回避し、手動でメモリを解放する必要がある場合に使用できますWeakMap。
• プロパティのトラバースと操作が必要な場合に使用できますObject。

Map、WeakMap、Object を使用した例をいくつか示します。

1. マップの使用:

// 创建一个Map
const map = new Map();

// 添加键值对
map.set('name', 'John');
map.set(42, 'Age');
map.set({ key: 'objectKey' }, 'This is an object key');

// 获取值
console.log(map.get('name')); // 输出：John

// 遍历Map
map.forEach((value, key) => {
  console.log(`${key}: ${value}`);
});
// 输出：
// name: John
// 42: Age
// [object Object]: This is an object key

// 获取Map大小
console.log(map.size); // 输出：3

2.WeakMap を使用します。

// 创建一个WeakMap
const weakMap = new WeakMap();

// 创建对象作为键
const obj1 = { id: 1 };
const obj2 = { id: 2 };

// 添加键值对
weakMap.set(obj1, 'Object 1');
weakMap.set(obj2, 'Object 2');

// 获取值
console.log(weakMap.get(obj1)); // 输出：Object 1

// 无法遍历WeakMap或获取其大小

3. オブジェクトを使用します。

// 创建一个Object
const obj = {};

// 添加键值对
obj['name'] = 'John';
obj[42] = 'Age';
obj[{ key: 'objectKey' }] = 'This is an object key'; // 这里键会被转换为字符串

// 获取值
console.log(obj['name']); // 输出：John

// 遍历Object
for (const key in obj) {
  console.log(`${key}: ${obj[key]}`);
}
// 输出：
// name: John
// 42: Age
// [object Object]: This is an object key

// 获取Object大小（需要手动计算）
console.log(Object.keys(obj).length); // 输出：3

 大昌面接の質問を共有する 面接質問バンク

フロントエンド面接とバックエンド面接の質問バンク（面接に必要） オススメ度： ★★★★★

アドレス:フロントエンド インタビューの質問バンク  Web フロントエンド インタビューの質問バンク VS Java バックエンド インタビューの質問バンク Daquan