ES 6におけるSetとMapの使用例の詳細

本明細書の例は、ES 6におけるSetおよびMapの使用法を説明する。皆さんに参考にしてあげます。具体的には以下の通りです。
セット
ES 6は、新しいデータ構造Setを提供する。配列に似ていますが、メンバーの値は全部唯一で、重複した値はありません。
Set関数は、パラメータとして1つの配列（または同様の配列のオブジェクト）を受け入れ、初期化することができます。

//   
var set = new Set([1, 2, 3, 4, 4]);
[...set]
// [1, 2, 3, 4]
 
var s = new Set();
 
[2, 3, 5, 4, 5, 2, 2].map(x => s.add(x));
 
for (let i of s) {
 console.log(i);
}
// 2 3 5 4

注：セットの内部では、2つのNaNは等しいです。二つのオブジェクトはいつも同じではない。lengthで検出できます。

let set = new Set();
let a = NaN;
let b = NaN;
set.add(a);
set.add(b);
set // Set {NaN}

let set = new Set();
 
set.add({});
set.size // 1
 
set.add({});
set.size // 2

var arr=[
	{id:1,name:'   '},
	{id:2,name:'   '},
	{id:3,name:'   '},
	{id:4,name:'   '},
	{id:2,name:'   '}
]
const s = new Set();
arr.forEach(x => s.add(x));
for (let i of s) {
 console.log(i);
}

 
四つの操作方法：

add(value)：ある値を追加して、Set構造自体に戻る。

delete(value)：ある値を削除し、ブール値を返し、削除が成功したかどうかを示す。

has(value)は、Setのメンバであるかどうかを示すブール値を返します。

clear()：全員をクリアし、戻り値がない

let s = new Set();
s.add(1).add(2).add(2);
//   2      
s.size // 2
s.has(1) // true
s.has(2) // true
s.has(3) // false
 
console.log(s.delete(2));//true
s.has(2) // false

set内部の要素はfor...ofを巡回することができます。
巡回操作
Set構造の例は、メンバーを巡回するために使用できる4つのエルゴード法である。

keys()：キーパッドに戻るエルゴード

values()：キー値を返すエルゴード

entries()：キーパッドペアに戻るエルゴード

forEach()：各メンバ

を巡回するために、コールバック関数を使用する。
特に指摘されたいのは、Setのエルゴード順序は挿入順序である。この特性は、Setを使用してコールバック関数のリストを保存するなど、非常に有用な場合があります。
（1）keys()、values()、entries()keys方法、values方法、entries方法で戻ってきたのは、エルゴードオブジェクトです。Set構造にはキー名がなく、キー値（またはキー名とキーパッド値が同じ値）しかないので、keys方法とvalues方法の動作は完全に一致しています。

let set = new Set(['red', 'green', 'blue']);
 
for (let item of set.keys()) {
 console.log(item);
}
// red
// green
// blue
 
for (let item of set.values()) {
 console.log(item);
}
// red
// green
// blue
 
for (let item of set.entries()) {
 console.log(item);
}
// ["red", "red"]
// ["green", "green"]
// ["blue", "blue"]

Set構造の例は、デフォルトでは巡回可能であり、標準エルゴード生成関数はそのvalues方法である。
これは、values方法を省き、直接にfor...ofを用いてSetを巡回巡回することができることを意味する。

let set = new Set(['red', 'green', 'blue']);
 
for (let x of set) {
 console.log(x);
}
// red
// green
// blue

Set構造の例は、配列と同様に、各メンバに対して何らかの動作を実行するforEach方法を有し、戻り値がない。

set = new Set([1, 4, 9]);
set.forEach((value, key) => console.log(key + ' : ' + value))
// 1 : 1
// 4 : 4
// 9 : 9

Map
Map構造は「値―値」の対応を提供し、より完璧なHash構造の実現である。もしあなたが「キーペア」のデータ構造が必要ならば、MapはObjectよりもっと適しています。オブジェクトに似ていて、キーパッドのペアの集合でもありますが、キーの範囲は文字列に限られず、各種の値（オブジェクトを含む）はキーとして使用できます。

var m = new Map();
var o = {p: "Hello World"};
 
m.set(o, "content")
m.get(o) // "content"
 
m.has(o) // true
m.delete(o) // true
m.has(o) // false

なお、Map構造は、同一のオブジェクトへの参照のみが同じキーとして扱われます。この点は非常に注意してください。

var map = new Map();
map.set(['a'], 555);
map.get(['a']) // undefined

上のコードのsetとget方法は、表面は同じキーに対していますが、実際には2つの値でメモリアドレスが異なりますので、get方法ではこのキーを読み取ることができず、undefinedに戻ります。
注：Mapのキーが単純なタイプの値（数字、文字列、ブール値）の場合、2つの値が厳密に等しい限り、Mapは0と-0を含む1つのキーと見なします。また、NaNは厳密ではないが、Mapはそれを同じキーとして扱う。
実例の属性と方法：size、set、get、has、delete、clear
遍歴方法：keys()、values()、entries()、forEach()

const map = new Map([
 ['F', 'no'],
 ['T', 'yes'],
]);
 
for (let key of map.keys()) {
 console.log(key);
}
// "F"
// "T"
 
for (let value of map.values()) {
 console.log(value);
}
// "no"
// "yes"
 
for (let item of map.entries()) {
 console.log(item[0], item[1]);
}
// "F" "no"
// "T" "yes"
 
//   
for (let [key, value] of map.entries()) {
 console.log(key, value);
}
// "F" "no"
// "T" "yes"
 
//      map.entries()
for (let [key, value] of map) {
 console.log(key, value);
}
// "F" "no"
// "T" "yes"

Map構造は配列構造に変わり、比較的速い方法は拡張演算子を使用することである（...）。

const map = new Map([
 [1, 'one'],
 [2, 'two'],
 [3, 'three'],
]);
 
[...map.keys()]
// [1, 2, 3]
 
[...map.values()]
// ['one', 'two', 'three']
 
[...map.entries()]
// [[1,'one'], [2, 'two'], [3, 'three']]
 
[...map]
// [[1,'one'], [2, 'two'], [3, 'three']]

配列のmap方法、filter方法に関連して、Mapの巡回および濾過（Map自体はmapおよびfilterの方法がない）を実現することができる。

const map0 = new Map()
 .set(1, 'a')
 .set(2, 'b')
 .set(3, 'c');
 
const map1 = new Map(
 [...map0].filter(([k, v]) => k < 3)
);
//    Map    {1 => 'a', 2 => 'b'}
 
const map2 = new Map(
 [...map0].map(([k, v]) => [k * 2, '_' + v])
  );
//    Map    {2 => '_a', 4 => '_b', 6 => '_c'}

また、MapにはforEach方法があり、配列のforEach方法と同様に、巡回も可能である。

map.forEach(function(value, key, map) {
 console.log("Key: %s, Value: %s", key, value);
});

 
違い:
setは関連容器であり、その特性は以下の通りである。

setは、RBTreeを下のコンテナとして

である。

所得元素のはkeyだけです。valueはkey

です。

キーが重複することは許されません。

すべての要素は自動的に並べ替えられます。

は、setの値をシーケンサで変えることができません。setの値はキー

です。
mapとsetは同じ関連容器で、その下の容器はすべて赤と黒の木で、違いはmapの値がキーとしてではなく、キーと値が分離されていることです。その特性は以下の通りです。

mapは、RBTreeをベース容器とする

すべての要素がキー＋値であり、

が存在する。

キーの重複を許可しない

すべての要素は、キーによって自動的に並べ替えられた

である。

mapのキーは修正できないが、そのキーの対応する値は修正可能な

である。
 
weakset
WeakSet構造はSetと同様であり、重複しない値のセットでもある。
WeakSetとSetの違い：

WeakSetのメンバーはオブジェクトのみであり、他のタイプの値

ではない。

WeakSetのオブジェクトは弱い参照である。つまり、ゴミ回収メカニズムはWeakSetのオブジェクトに対する参照を考慮しない。つまり、他のオブジェクトがこのオブジェクトを参照しない場合、ゴミ回収メカニズムは自動的に対象が占有しているメモリを回収し、対象がWeakSetに存在することを考慮しない。この特徴は、WeakSetのメンバーを引用することができないということですので、WeakSetは遍歴できません。

WeakMapはWeakSetを参照できます。
関心のある友達はオンラインHTML/CSS/JavaScriptコードを使ってツールを実行できます。http://tools.jb51.net/code/HtmlJsRunは上記のコードの運行効果をテストします。
さらに、JavaScriptに関する内容については、当駅のテーマを見ることができます。「JavaScript操作DOM技巧まとめ」、「JavaScriptページ要素操作技術のまとめ」、「JavaScript事件に関する操作と技巧大全書」、「JavaScript検索アルゴリズムのテクニックのまとめ」、「JavaScriptデータ構造とアルゴリズム技術のまとめ」、および「JavaScriptはアルゴリズムと技術の総括を遍歴します。」
本論文で述べたように、JavaScriptプログラムの設計に役に立ちます。