JavaScript の Map、WeakMap、Set、WeakSet についての簡単な説明

JavaScript 開発者の 70% 以上は、プロジェクト内のデータの収集と維持にのみオブジェクトを使用していると思います。確かに、Map や Set などの新しいコレクション オブジェクトは、2015 年に登場したときでさえ十分に活用されていませんでした。

そこで、今日は、2015 年の驚くべき新機能、Map、Set、WeakMap、WeakSet ## について説明します。 ＃。

お読みになる前に

この記事は、これらを使用することのみを推奨するものではありません。しかし、一部の受験者がコーディング試験でこれらのいずれかを使用しているのを見たことがあり、私は特定の状況でこれらを使用するのが好きです。プロジェクト内でいつ使用するかを決定するのはあなた次第です。
• 私の議論をよりよく理解するには、反復可能とは何かを知っておく必要があります。

オブジェクト

まず、オブジェクトの使用方法について説明します。

わかりました。皆さんは新しいコレクション オブジェクトについて学ぶためにこの記事をクリックしたので、90% 以上の人がこの部分をすでに知っていると思いますが、JavaScript の初心者のために、簡単に言ってみましょう。

const algorithm = { site: "leetcode" };
console.log(algorithm.site); // leetcode

for (const key in algorithm) {
  console.log(key, algorithm[key]);
}

// site leetcode
delete algorithm.site;
console.log(algorithm.site); // undefined

そこで、

algorithm オブジェクトを作成しました。そのキーと値は文字列型の値で、. キーワード値を使用して呼び出しました。

さらに、

for-in ループは、オブジェクトのループ処理にも非常に適しています。 [] キーワードを使用して、キーに対応する値にアクセスできます。ただし、オブジェクトは反復可能ではないため、for-of ループは使用できません。

オブジェクトのプロパティは、

delete キーワードを使用して削除できます。この方法でオブジェクトのプロパティを完全に削除できますが、このメソッドと混同しないように注意してください。

const algorithm = { site: "leetcode" };
// Property is not removed!!
algorithm.site = undefined;
// Property is removed!!
delete algorithm.site;

algorithm.site = unknown は、新しい値を site に割り当てるだけです。

さて、オブジェクトについていくつかのことを簡単に説明しました。

プロパティを追加する方法
オブジェクトを反復処理する方法
方法プロパティを削除するには

Map

Map は、オブジェクトのように機能する JavaScript の新しいコレクション オブジェクトです。ただし、通常のオブジェクトと比較すると、いくつかの大きな違いがあります。

まず、Map オブジェクトを作成する簡単な例を見てみましょう。

属性の追加方法

const map = new Map();
// Map(0) {}

マップ 何も作成する必要はありませんが、データの追加方法が少し異なります。

map.set('name', 'john');
// Map(1) {"name" => "john"}

Map には、

set と呼ばれるプロパティを追加する特別な方法があります。 2 つのパラメータを取ります。キーが最初のパラメータで、値が 2 番目のパラメータです。

map.set('phone', 'iPhone');
// Map(2) {"name" => "john", "phone" => "iPhone"}
map.set('phone', 'iPhone');
// Map(2) {"name" => "john", "phone" => "iPhone"}

ただし、既存のデータを追加することはできません。新しいデータのキーに対応する値が Map オブジェクトにすでに存在する場合、新しいデータは追加されません。

map.set('phone', 'Galaxy');
// Map(2) {"name" => "john", "phone" => "Galaxy"}

ただし、既存のデータを他の値で上書きすることもできます。

オブジェクトを反復処理する方法

Map は反復可能なオブジェクトです。つまり、

for-of ステートメントを使用してマップできることを意味します。

for (const item of map) {
  console.dir(item);
}
// Array(2) ["name", "john"]
// Array(2) ["phone", "Galaxy"]

覚えておくべきことの 1 つは、Map はデータを配列の形式で提供するため、キーまたは値を取得するには配列を構造化するか、各インデックスにアクセスする必要があるということです。

キーまたは値のみを取得するには、いくつかのメソッドを使用できます。

map.keys();
// MapIterator {"name", "phone"}
map.values();
// MapIterator {"john", "Galaxy"}
map.entries();
// MapIterator {"name" => "john", "phone" => "Galaxy"}

スプレッド演算子 (

...) を使用してマップのデータ全体を取得することもできます。これは、スプレッド演算子が反復可能なオブジェクトに対してバックグラウンドで動作するためです。

const simpleSpreadedMap = [...map];
// [Array(2), Array(2)]

属性を削除する方法

Map オブジェクトからデータを削除するのも簡単です。

delete を呼び出すだけです。

map.delete('phone');
// true
map.delete('fake');
// false

delete delete 関数がデータを正常に削除したかどうかを示すブール値を返します。そうである場合は true を返し、そうでない場合は false を返します。

WeakMap

WeakMap は Map から派生したものであるため、互いに非常に似ています。ただし、WeakMap は大きく異なります。

WeakMap という名前の由来は何ですか?それは、参照リンクが指すデータ オブジェクトとの接続または関係が Map ほど強くないため、弱いためです。

それで、これは何を意味するのでしょうか?

違い 1: キーはオブジェクトである必要があります

const John = { name: 'John' };
const weakMap = new WeakMap();
weakMap.set(John, 'student');
// WeakMap {{...} => "student"}
weakMap.set('john', 'student');
// Uncaught TypeError: Invalid value used as weak map key

Map オブジェクトには任意の値をキーとして渡すことができますが、WeakMap は異なります。オブジェクトのみをキーとして受け入れます。それ以外の場合は、間違いを返します。

違い 2: Map のすべてのメソッドがサポートされているわけではありません

WeakMap を使用できるメソッドは次のとおりです。

delete
get
has
set

このトピックの最大の違いは、WeakMap が次のことを行うことです。反復オブジェクト メソッドはサポートされていません。しかし、なぜ？これについては以下で説明します。

違い 3: GC が参照をクリーンアップすると、データが削除されます

Map と比較すると、これが最大の違いです。

let John = { major: "math" };

const map = new Map();
const weakMap = new WeakMap();

map.set(John, 'John');
weakMap.set(John, 'John');

John = null;
/* John 被垃圾收集 */

John オブジェクトがガベージ コレクションされると、Map オブジェクトは参照リンクを維持しますが、WeakMap オブジェクトはリンクを失います。したがって、WeakMap を使用する場合は、この機能を考慮する必要があります。

Set

Set も Map とよく似ていますが、単一の値の場合は Set の方が便利です。

属性を追加する方法

const set = new Set();

set.add(1);
set.add('john');
set.add(BigInt(10));
// Set(4) {1, "john", 10n}

Map と同様に、Set も同じ値を追加できなくなります。

set.add(5);
// Set(1) {5}

set.add(5);
// Set(1) {5}

如何遍历对象

由于Set是一个可迭代的对象，因此可以使用 for-of 或 forEach 语句。

for (const val of set) {
  console.dir(val);
}
// 1
// 'John'
// 10n
// 5

set.forEach(val => console.dir(val));
// 1
// 'John'
// 10n
// 5

如何删除属性

这一部分和 Map 的删除完全一样。如果数据被成功删除，它返回 true，否则返回 false。

set.delete(5); 
// true

set.delete(function(){});
// false;

如果你不想将相同的值添加到数组表单中，则Set可能会非常有用。

/* With Set */
const set = new Set();
set.add(1);
set.add(2);
set.add(2);
set.add(3);
set.add(3);
// Set {1, 2, 3}

// Converting to Array
const arr = [ ...set ];
// [1, 2, 3]

Object.prototype.toString.call(arr);
// [object Array]

/* Without Set */
const hasSameVal = val => ar.some(v === val);
const ar = [];

if (!hasSameVal(1)) ar.push(1);
if (!hasSameVal(2)) ar.push(2);
if (!hasSameVal(3)) ar.push(3);

WeakSet

与WeakMap一样，WeakSet也将丢失对内部数据的访问链接（如果内部数据已被垃圾收集）。

let John = { major: "math" };

const set = new Set();
const weakSet = new WeakSet();

set.add(John);
// Set {{...}}
weakSet.add(John);
// WeakSet {{...}}

John = null;
/* John 被垃圾收集 */

一旦对象 John 被垃圾回收，WeakSet就无法访问其引用 John 的数据。而且WeakSet不支持 for-of 或 forEach，因为它不可迭代。

比较总结

相同点：添加相同的值不支持。

Map vs. WeakMap：WeakMap仅接受对象作为键，而Map不接受。

Map and Set：

• 可迭代的对象，支持 for..of，forEach 或 ... 运算符
• 脱离GC关系

WeakMap and WeakSet：

• 不是一个可迭代的对象，不能循环。
• 如果引用数据被垃圾收集，则无法访问数据。
• 支持较少的方法。

结语

不过，我想，很多团队或公司还是没有使用Maps或Sets。也许是因为他们觉得没有必要，或者是因为数组仍然可以做到几乎所有他们想要的东西。

然而，在JavaScript中，Maps或Sets可能是非常独特和强大的东西，这取决于每个情况。所以我希望有一天，你能有机会使用它们。

原文地址：https://medium.com/better-programming/map-weakmap-set-weakset-in-javascript-77ecb5161e3

作者：Moon

更多编程相关知识，请访问：编程入门！！

以上がJavaScript の Map、WeakMap、Set、WeakSet についての簡単な説明の詳細内容です。詳細については、PHP 中国語 Web サイトの他の関連記事を参照してください。