ES6コレクション：MAP、SET、WEALDMAP、WEAKSETを使用します

この記事では、4つの新しいES6コレクションと彼らがもたらす利点について説明します。

ほとんどの主要なプログラミング言語には、いくつかのタイプのデータ収集があります。 Pythonには、リスト、タプル、辞書があります。 Javaには、リスト、コレクション、マップ、キューがあります。 Rubyにはハッシュと配列があります。これまでのところ、JavaScriptには配列のみがあります。オブジェクトと配列は、JavaScriptの右側のヘルパーです。 ES6は、言語の強力で表現力豊かな機能を強化する4つの新しいデータ構造を導入します：マップ、セット、弱点、弱いマップ。

キーポイント

ES6は、4つの新しいデータ構造を導入します：マップ、セット、弱点、および弱いマップ。これらのコレクションは、より表現力豊かで強力なJavaScriptプログラミングを可能にします。
• ES6のマップとセットは、あらゆるタイプのキー価値ペアのコレクションです。これらは、迅速な検索のために最適化され、値を追加、削除、ループする方法を提供します。ただし、オブジェクトへの強い参照を保持しています。オブジェクトは、オブジェクトが大きく、不要になった場合に高価になる可能性があります。
• ES6は、MAPと設定に似ていますが、オブジェクトへの弱い参照を保持しているWeakMapとWeaksetも導入します。これは、これらのオブジェクトが不要になった場合、ゴミ収集される可能性があることを意味します。これは、メモリ管理に非常に有益です。
• 新しいES6コレクションはより大きな柔軟性を提供しますが、多くの場合、JavaScriptオブジェクトをコレクションとして使用できます。オブジェクトを使用するかキー付きコレクションを使用するかを決定する際、開発者は、動的なキールックアップの必要性、値の交換性、キー価値ペアの追加または削除の頻度などの要因を考慮する必要があります。
JavaScript Hashmapを探していますHashmap、辞書、およびHashは、さまざまなプログラミング言語がKeyvalueペアを保存するいくつかの方法であり、これらのデータ構造は高速検索のために最適化されています。

ES5では、JavaScriptオブジェクト（キーと値のあるプロパティのコレクションのみ）がハッシュをシミュレートできますが、オブジェクトをハッシュとして使用するにはいくつかの欠点があります。

Disadvantage＃1：ES5のキーは文字列

でなければなりません

javaScriptオブジェクトプロパティキーは文字列でなければなりません。これにより、異なるデータ型のキー価値ペアのコレクションになる能力が制限されます。もちろん、文字列に他のデータ型をキャストできますが、これにより追加の作業が追加されます。

Disdvantage＃2：オブジェクトは本質的に反復可能ではありません

オブジェクトはコレクションとして設計されていないため、オブジェクトの属性の数を判断する効果的な方法はありません。 （たとえば、Object.Keysは遅い）。オブジェクトのプロパティをループすると、プロトタイププロパティも取得できます。すべてのオブジェクトに反復可能なプロパティを追加できますが、すべてのオブジェクトがコレクションとして使用されることを意図しているわけではありません。 for…in loop and hasownProperty（）メソッドを使用できますが、これは単なる回避策です。オブジェクトのプロパティをループすると、挿入された順序でプロパティが必ずしも取得されるわけではありません。

Disadvantage＃3：組み込みメソッドの競合の課題

オブジェクトには、コンストラクター、トストリング、Valueofなどの組み込みメソッドがあります。それらのいずれかがプロパティとして追加されると、競合する可能性があります。 object.create（null）を使用して、裸のオブジェクト（object.prototypeから継承されていない）を作成できますが、これはまだ回避策です。

ES6には新しいコレクションデータ型が含まれているため、オブジェクトを使用して欠点に耐える必要はなくなりました。

ES6マップコレクションを使用して
マップは、チェックする最初のデータ構造/セットです。マップは、あらゆるタイプのキー価値ペアのコレクションです。新しいマップを作成し、値を追加/削除し、キー/値をループし、サイズを効果的に決定するのは簡単です。主要な方法は次のとおりです

マップを作成し、一般的な方法を使用します

この例をJSBIN

const map = new Map(); // 创建一个新的Map
map.set('hobby', 'cycling'); // 设置键值对

const foods = { dinner: 'Curry', lunch: 'Sandwich', breakfast: 'Eggs' }; // 新对象
const normalfoods = {}; // 新对象

map.set(normalfoods, foods); // 设置两个对象作为键值对

for (const [key, value] of map) {
  console.log(`${key} = ${value}`); // hobby = cycling  [object Object] = [object Object]
}

map.forEach((value, key) => {
  console.log(`${key} = ${value}`);
}, map); // hobby = cycling  [object Object] = [object Object]

map.clear(); // 清除键值对
console.log(map.size === 0); // True

で実行します

set

を使用しています

セットは、重複していない値の順序付けられたリストです。セットは配列のようにインデックス化されていませんが、キーを使用してアクセスできます。セットはすでにJava、Ruby、Python、その他多くの言語に存在しています。 ES6セットと他の言語のセットの1つの違いは、ES6で順序が重要であることです（他の多くの言語ではありません）。主要なセット方法は次のとおりです

この例をJSBIN

で実行します

const planetsOrderFromSun = new Set();
planetsOrderFromSun.add('Mercury');
planetsOrderFromSun.add('Venus').add('Earth').add('Mars'); // 可链式方法
console.log(planetsOrderFromSun.has('Earth')); // True

planetsOrderFromSun.delete('Mars');
console.log(planetsOrderFromSun.has('Mars')); // False

for (const x of planetsOrderFromSun) {
  console.log(x); // 输入和输出顺序相同 - Mercury Venus Earth
}
console.log(planetsOrderFromSun.size); // 3

planetsOrderFromSun.add('Venus'); // 尝试添加重复项
console.log(planetsOrderFromSun.size); // 仍然是3，没有添加重复项

planetsOrderFromSun.clear();
console.log(planetsOrderFromSun.size); // 0

弱いコレクション、メモリ、ガベージコレクション
javascriptガーバージコレクションは、もはや参照されていないオブジェクトが自動的に削除され、リソースがリサイクルされるメモリ管理の形式です。
オブジェクトへの参照をマップして設定することは、保持されることを余儀なくされ、ごみ収集は許可されていません。マップ/セットが不要になった大きなオブジェクト（DOMから削除されたDOM要素など）を参照すると、これは高価になる可能性があります。

この問題を解決するために、ES6はWeakMapとWeaksetと呼ばれる2つの新しい弱いセットも導入しました。これらのES6コレクションは、メモリからクリアされる必要がなくなったオブジェクトを許可するため、「弱い」です。

weakmap

weakmapは、紹介した3番目の新しいES6コレクションです。 WeakMapは通常のマップに似ていますが、方法が少なく、ガベージコレクションには上記の違いがあります。

ユーザーケース
weakmapにはいくつかの一般的なユースケースがあります。オブジェクトのプライベートデータをプライベートに保つため、またはDOMノード/オブジェクトを追跡するために使用できます。

const aboutAuthor = new WeakMap(); // 创建新的WeakMap
const currentAge = {}; // 键必须是对象
const currentCity = {}; // 键必须是对象

aboutAuthor.set(currentAge, 30); // 设置键值
aboutAuthor.set(currentCity, 'Denver'); // 键值可以是不同数据类型

console.log(aboutAuthor.has(currentCity)); // 测试WeakMap是否包含键

aboutAuthor.delete(currentAge); // 删除键

プライベートデータのユースケース

次の例は、JavaScriptの専門家Nicholas C. Zakasからのものです：<

ここでWeakMapを使用すると、オブジェクトデータをプライベートに保つプロセスが簡素化されます。個人のオブジェクトを参照できますが、特定の個人インスタンスがない場合、PrivateDataWeakMapはアクセスできません。

dom node use case

var Person = (function() {
  var privateData = new WeakMap();

  function Person(name) {
    privateData.set(this, { name: name });
  }

  Person.prototype.getName = function() {
    return privateData.get(this).name;
  };

  return Person;
}());

Google Polymer Projectは、PositionWalkerと呼ばれるコードスニペットでWeakMapを使用しています。

PositionWalkerは、現在のノードとしてDOMサブツリーの位置を追跡し、そのノード内のオフセットを追跡します。

weakMapは、domノードの編集、削除、および変更の追跡に使用されます。

const map = new Map(); // 创建一个新的Map
map.set('hobby', 'cycling'); // 设置键值对

const foods = { dinner: 'Curry', lunch: 'Sandwich', breakfast: 'Eggs' }; // 新对象
const normalfoods = {}; // 新对象

map.set(normalfoods, foods); // 设置两个对象作为键值对

for (const [key, value] of map) {
  console.log(`${key} = ${value}`); // hobby = cycling  [object Object] = [object Object]
}

map.forEach((value, key) => {
  console.log(`${key} = ${value}`);
}, map); // hobby = cycling  [object Object] = [object Object]

map.clear(); // 清除键值对
console.log(map.size === 0); // True

weakset

weaksetは、参照するオブジェクトが不要になったときに、要素をガベージに収集できるセットのセットです。 weadsetは反復を許可しません。彼らのユースケースは非常に限られています（少なくとも当面は）。ほとんどの初期の採用者は、Weaksetを使用してオブジェクトを変更せずにタグ付けできると述べました。 es6-features.orgには、オブジェクトがタグ付けされているかどうかを追跡するために、弱点から要素を追加および削除する例があります。

const planetsOrderFromSun = new Set();
planetsOrderFromSun.add('Mercury');
planetsOrderFromSun.add('Venus').add('Earth').add('Mars'); // 可链式方法
console.log(planetsOrderFromSun.has('Earth')); // True

planetsOrderFromSun.delete('Mars');
console.log(planetsOrderFromSun.has('Mars')); // False

for (const x of planetsOrderFromSun) {
  console.log(x); // 输入和输出顺序相同 - Mercury Venus Earth
}
console.log(planetsOrderFromSun.size); // 3

planetsOrderFromSun.add('Venus'); // 尝试添加重复项
console.log(planetsOrderFromSun.size); // 仍然是3，没有添加重复项

planetsOrderFromSun.clear();
console.log(planetsOrderFromSun.size); // 0

すべてのものをマップしますか？レコードとES6コレクション
マップとセットは、キー価値のペアの新しいES6コレクションです。つまり、JavaScriptオブジェクトは、多くの場合、コレクションとして使用できます。状況が必要としない限り、新しいES6コレクションに切り替える必要はありません。
MDNには、オブジェクトまたはキー付きコレクションをいつ使用するかを決定するための質問の良いリストがあります。
キーは通常、実行されるまで不明ですか？動的に見つける必要がありますか？
• すべての値は同じタイプで、同じ意味で使用できますか？
• 文字列ではないキーが必要ですか？
• キー価値のペアは頻繁に追加または削除されていますか？
• キー価値のペアの数（変更が簡単な）はありますか？
• コレクションは繰り返されますか？
新しいES6コレクションは、より簡単なJavaScript
を生成します

JavaScriptコレクションは以前は非常に限られていましたが、これはES6で修正されています。これらの新しいES6コレクションは、言語のパワーと柔軟性を高め、それらを採用するJavaScript開発者のタスクを簡素化します。

---

この記事は、Microsoft Technology EvangelistのWeb開発シリーズの一部であり、Microsoft Edge Browserや新しいEdgeHTMLレンダリングエンジンなど、実用的なJavaScript学習、オープンソースプロジェクト、および相互運用性のベストプラクティスの開発シリーズの一部です。 DevelopIntelligenceは、フロントエンドに焦点を当てたブログおよびコースWebサイトであるAppendtoを通じて、JavaScriptトレーニングとReact Trainingコースを提供しています。
Windows 10用のデフォルトのブラウザであるMicrosoft Edgeを含むさまざまなブラウザーやデバイスでテストすることをお勧めします。Dev.microsoftedge.comで無料ツールを使用できます。 Webサイトのレンダリングや標準的なコンプライアンスの問題など、EdgeHTMLの問題を報告または検索します。また、Microsoftの開発者と専門家からの最新情報については、The Edgeブログをご覧ください。

ES6コレクション（FAQ）に関するFAQ：マップ、セット、weakMap、weakset

JavaScriptES6のMAPとWeakMapの主な違いは何ですか？

JavaScript ES6では、MAPとWeakMapの両方がキー価値ペアを保存するために使用されます。ただし、それらの間にはいくつかの大きな違いがあります。まず、マップでは、キーは任意のタイプであることができますが、weakmapでは、キーはオブジェクトでなければなりません。第二に、MAPにはキー価値のペアの数を確認できるサイズプロパティがありますが、WeakMapにはこのプロパティがありません。最後に、MAPは重要なオブジェクトへの強い参照を保持しています。つまり、マップが存在する限り、ガベージコレクションの資格がないことを意味します。一方、WeakMapは重要なオブジェクトへの弱い参照を保持しています。つまり、オブジェクトへの他の参照がない場合、ゴミ収集される可能性があります。

javascript es6の弱いマップまたは弱点を反復する方法は？

Map and Setとは異なり、WeakMapとWeaksetには要素を反復する方法はありません。これは、キー（弱いマップ）または値（弱点）への弱い参照を保持するように設計されているためです。つまり、これらはいつでもゴミを収集することができます。したがって、要素を繰り返しようとするときに要素がまだ存在するという保証はありません。コレクションを繰り返す必要がある場合は、代わりにマップを使用するか、設定する必要があります。

weakmapまたはweaksetのキーとして元のデータ型を使用できますか？

いいえ、元のデータ型をWeakMapまたはWeakSetのキーとして使用することはできません。これらのコレクションのキーはオブジェクトでなければなりません。これは、WeakMapとWeaksetがキーへの弱い参照を保持しているためです。つまり、それらへの他の参照がなければ、キーを収集することができます。プリミティブデータ型（数字や文字列など）はオブジェクトのように収集されたごみではないため、これらのコレクションのキーとして使用することはできません。

なぜマップまたはセットの代わりに弱体またはweaksetを使用する必要があるのですか？

weakmapとweaksetにはいくつかのユニークな機能があり、場合によっては、マップまたは設定よりも適切である場合があります。彼らはキー（弱いマップ）または値（弱点）への弱い参照を保持しているため、使用していないときにゴミを収集することができます。これは、他のデータをオブジェクトに関連付けたいが、オブジェクトが不要になったときにガベージコレクションを防ぎたくない場合に役立ちます。さらに、WeakMapとWeaksetには要素を反復する方法がないため、保存するデータに一定レベルのプライバシーを提供できます。

WeakMapまたはWeaksetのキーがゴミが収集された場合はどうなりますか？

WeakMapまたはWeakSetのキーがゴミ収集されると、コレクション内の対応するエントリが自動的に削除されます。これは、これらのセットがキーへの弱い参照を保持しているためです。つまり、使用していない場合、キーはガベージを収集できることを意味します。この機能は、JavaScriptアプリケーションのメモリの管理に役立ちます。これは、使用されていないオブジェクトに関連付けられたデータもクリアされることを保証するためです。

weakmapまたはweaksetを使用して一時データを保存できますか？

はい、WeakMapとWeakSetは一時的なデータを保存するのに最適です。彼らはキー（弱いマップ）または値（弱点）への弱い参照を保持しているため、使用していないときにゴミを収集することができます。これは、キーが収集されたガベージである場合、これらのセットに保存されているデータもクリアされることを意味します。これは、手動で掃除することを心配する必要がないため、短時間だけ必要なものを保存するのに役立ちます。

WeakMapまたはWeakSetに特定のキーまたは値が含まれているかどうかを確認する方法は？

HASメソッドを使用して、WeakMapまたはWeakSetに特定のキーが含まれているかどうかを確認できます。この方法は、キーがコレクションに存在するかどうかを示すブール値を返します。ただし、このセットの値がアクセスできないため、この方法を弱体セットで特定の値をチェックすることはできないことを忘れないでください。

WeakMapまたはWeakSetからエントリを削除できますか？

はい、deleteメソッドを使用して、weakmapからエントリを削除できます。このメソッドは、指定されたキーに関連付けられたエントリを削除し、コレクションにキーが存在するかどうかを示すブール値を返します。ただし、このコレクションには削除メソッドがないため、weaksetからエントリを削除することはできません。

WeakMapまたはWeakSetのすべてのエントリをクリアできますか？

いいえ、WeakMapまたはWeakSetのすべてのエントリをクリアすることはできません。これらのコレクションには、マップとセットで使用できる明確な方法がありません。これは、WeakMapとWeaksetが、ゴミ収集されたときにキーを自動的にクリーンアップするように設計されているためです。

弱いマップまたは弱点のサイズを取得できますか？

いいえ、WeakMapまたはWeakSetのサイズを取得することはできません。これらのコレクションには、地図とセットで使用できるサイズプロパティがありません。これは、ゴミ収集のために、WeakMapまたはWeaksetのサイズをいつでも変更できるためです。

以上がES6コレクション：MAP、SET、WEALDMAP、WEAKSETを使用しますの詳細内容です。詳細については、PHP 中国語 Web サイトの他の関連記事を参照してください。