目次
I.はじめに
Set はコレクションと呼ばれるデータ構造であり、Map はディクショナリと呼ばれるデータ構造です。
コレクションとは何ですか? 改めて辞書とは何ですか？
コレクションは、順序付けされておらず、関連しており、繰り返しのない記憶構造 [数学では要素と呼ばれる] の組み合わせです。
辞書は要素の集合です。各要素にはキーと呼ばれるフィールドがあり、要素ごとにキーが異なります。
違い？
共通点：セットも辞書も一意の値を格納できる
相違点：セットは要素を[値,値]の形式で格納し、辞書は要素を[キー,値]の形式で格納する。
次の 2 つのデータ構造について詳しく説明します
2.セット
1.データ構造定義の設定
プリミティブかオブジェクト参照かを問わず、あらゆるタイプの一意の値を格納するために使用されます。
2. Setデータ構造の特徴
(1) キー名なしで値のみを保存できる
(2) 文字列番号が数値と等しくないなどの厳密な型検出
(3) 値は一意である
(4) 走査順序は加算の順序であるコールバック関数を保存するのに便利です
3. Setデータ構造の基本的な使い方
(1) add: 要素を追加します。
要素を追加するには add を使用します。同じ値を繰り返し追加することはできません。
let set = new Set()
set.add(1).add(1).add(1);
console.log(set.values()); // [1]Set は、値の型 1 と '1' を 2 つの異なる値に属するものとして厳密に区別します。
let set = new Set();
set.add(1);
set.add('1');
console.log(set.values()); // [1,'1'](2) has: 要素が存在するかどうかを検出し、ブール値を返し、存在する場合は true を返します。
let set = new Set();
set.add(1);
set.has(1); // true(3) size は Set の長さを返します。
let set = new Set(['zs', 'lisi']);
console.log(set.size); // 2(4) delete: 単一要素を削除するメソッド。戻り値はブール型です。
let set = new Set(['zs', 'lisi']);
set.delete('zs');
console.log(set.values()); // ['lisi'](5) Clear: すべてのメンバーをクリアします。戻り値はありません。
let set = new Set(['zs', 'lisi']);
set.clear();
console.log(set.values()); // [](6) 配列変換
ドット構文またはArray.form静的メソッドを使用して Set 型を配列に変換すると、配列処理関数を使用できるようになります。
let set = new Set(['zs', 'lisi']);
console.log([...set]); // ['zs', 'lisi']
console.log(Array.from(set)); // ['zs', 'lisi']4.トラバースデータの設定
(1). forEach(): コールバック関数を使用して各メンバーを走査します。
let set = new Set(['zs', 'lisi'])
set.forEach((item, index) => {
console.log(item, index); // zs zs lisi lisi
});(2).keys(): キー名のトラバーサーを返します。
let set = new Set(['zs', 'lisi']);
for (let i of set.keys()) {
console.log(i); // zs lisi
}(3).values(): キー値のトラバーサーを返します。
let set = new Set(['zs', 'lisi']);
for (let i of set.values()) {
console.log(i); // zs lisi
}(4)entrys(): キーと値のペアのトラバーサーを返します。
let set = new Set(['zs', 'lisi']);
for (let i of set.entries()) {
console.log(i); // ['zs','zs'] ['lisi','lisi']
}5. 利用シナリオの設定
(1). Set を使用して重複排除を実現します。
文字列の重複排除を実装する
let str = 'helloworld';
console.log([...new Set(str)]); // ['h', 'e', 'l', 'o', 'w', 'r', 'd']アレイの重複排除を実装する
let arr = [1, 2, 3, 4, 1, 2];
console.log([...new Set(arr)]); // [1, 2, 3, 4](2). 和集合、交差、差分を実現する
let a = new Set([1, 2, 3]);
let b = new Set([2, 3, 4]);
// 并集
let bingji = new Set([...a, ...b]);
console.log(bingji.values()); // [1,2,3,4]
// 交集
let jiaoji = new Set([...a].filter((x) => b.has(x)));
console.log(jiaoji.values()); // [2,3]
// （a 相对于 b 的）差集
let chaji = new Set([...a].filter((x) => !b.has(x)));
console.log(chaji.values()); // [1]6.WeakSetの使用
WeakSet 構造体も重複した値を格納せず、そのメンバーはオブジェクト型の値のみでなければなりません
WeakSet の特徴
(1). ガベージ コレクションは WeakSet を考慮しません。つまり、WeakSet から参照されても参照カウンタが 1 増加しないため、オブジェクトが参照されていない場合は、WeakSet が使用中かどうかに関係なく削除されます。 (2). WeakSet は弱参照であるため、メンバーに対する他の操作により
存在しない可能性があるため、forEach() トラバーサル (3) などの操作は実行できません。
また、弱参照であるため、WeakSet 構造は存在しませんキー( )、値( )、エントリ( )、サイズ属性
(4)などのメソッドがあり、弱い参照なので、外部参照が削除されたときにデータを自動的に削除したい場合はWeakSetを使用します(5).WeakSetにはサイズ属性がありません
(1) WeakSet の値はオブジェクト型でなければなりません。別の型の場合はエラーが報告されます。
// 正确声明
let weakSet = new WeakSet([
[1, 2],
[3, 4],
]);
// 错误声明
let weakSet1 = new WeakSet([1, 2]); // Invalid value used in weak set(2) WeakSet を使用して DOM ノードを保存する場合、DOM ノードが削除されると、WeakSet は自動的に DOM ノードへの参照を削除するため、DOM ノードの削除によるメモリリークを心配する必要はありません。書類
7. ガベージコレクションの仕組み
WeaSet によって保存されたオブジェクトは参照カウンタを増加させず、オブジェクトが参照されなくなった場合、そのオブジェクトは自動的に削除されます。
let set = new WeakSet();
let arr = ['zs', 'lisi'];
set.add(arr, 123);
arr = null;
console.log(set);
setTimeout(() => {
console.log(set);
}, 1000);3. 地図
1. マップデータ構造定義
マップはキーと値のペアの集合の構造であり、これまでオブジェクトをキーとして使用できなかった問題を解決するために使用されます。
2. 地図データ構造の特徴
(1) 検索速度が非常に速い
(2) 関数、オブジェクト、基本型をすべてキーまたは値として使用できる
3. Mapデータ構造の基本的な使い方
(1) Set は要素を追加し、チェーン操作をサポートします
let map = new Map([]);
map.set('name', 'zs');
map.set('age', '18');
map.set('hobby', [1, 2, 3]).set('a', 'b');
console.log(map);
(2).get 要素を取得
let map = new Map([
['name', 'zs'],
['age', 18],
]);
console.log(map.get('name')); // 'zs'(3).size 数量を取得し、マップの長さを返します
let map = new Map([
['name', 'zs'],
['age', 18],
]);
console.log(map.size); // 2(4).has はキー値を使用してキーが存在するかどうかを検出し、ブール値を返し、存在する場合は true を返します。
let map = new Map([
['name', 'zs'],
['age', 18],
]);
console.log(map.has('name')); // true
console.log(map.has('hobby')); // false(5) 単一の要素を削除する.deleteメソッド
let map = new Map([
['name', 'zs'],
['age', 18],
]);
map.delete('name');
console.log(map.has('name')); // false(6).clear メソッドはマップのすべての要素をクリアします。
let map = new Map([
['name', 'zs'],
['age', 18],
]);
map.clear('name');
console.log(map.size); // 0(7). データ変換
展開構文またはArray.form 静的メソッドを使用して Map 型を配列に変換し、配列処理関数を使用できるようにします。
let map = new Map([
['name', 'zs'],
['age', 18],
]);
console.log([...map]);
console.log(Array.from(map));
4. マップトラバースデータ
keys(): キー名を返すトラバーサ
values(): キー値を返すトラバーサ
entrys(): すべてのメンバーを返すトラバーサ
forEach(): マップのすべてのメンバーを走査します。
let map = new Map([
['name', 'zs'],
['age', 18],
]);
map.forEach((value, key) => {
console.log(key, value); // name zs // age 18
});
for (let i of map.keys()) {
console.log(i); // name age
}
for (let value of map.values()) {
console.log(value); // zs 18
}
for (let entries of map.entries()) {
console.log(entries); // ['name','zs'] ['age',18]
}
// 等同于上面的 map.entries()
for (let [key, value] of map.entries()) {
console.log(key, value); // name zs // age 18
}5. 地図の利用シナリオ
(1) ページ上にデータのやり取りが必要なフォーム要素が複数ある場合、Map を使用してフォーム データを保存できます。
const formData = new Map();
formData.set('username', 'zs');
formData.set('password', '123456');
const username = formData.get('username'); //zs
const password = formData.get('password'); //123456Map を使用してデータを管理すると、コードがより簡潔になり、保守が容易になります。
6.WeakMapの使用
WeakMap オブジェクトはキーと値のペアのコレクションです。
(1) キー名はオブジェクトである必要があります
(2) WeaMap にはキー名への弱い参照があり、キー値は通常の参照です
(3) ガベージ コレクションは WeaMap キー名を考慮せず、参照は変更されません(4) WeakMap は
弱参照であるため、他の操作メンバが存在しない可能性があるため、forEach() トラバーサルなどの操作は実行できません (
5) 同様に弱参照のため、WeaMap構造体にはキー()、値()、エントリ()などのメソッドやsize属性がありません
(6)キーの外部参照が削除された場合、データを自動的に削除したい場合はWeakMapを使用します
(1) WeakMap の値はオブジェクト型でなければなりません。別の型の場合はエラーが報告されます。
let weakMap = new WeakMap();
// 正确声明
weakMap.set({ name: 'zs' }, 'lisi');
// 错误声明
weakMap.set(1, 2); // Invalid value used as weak map key
// at WeakMap.set (<anonymous>)
weakMap.set(null, 1); // Invalid value used as weak map key
// at WeakMap.set (<anonymous>)(2) WeakMapを使用してDOMノードを保存する
<body>
<div>zs</div>
<div>lisi</div>
</body>
<script>
const map = new WeakMap();
document.querySelectorAll('div').forEach((item) => map.set(item, item.innerHTML));
console.log(map); //WeakMap {div => "zs", div => "lisi"}
</script>7. ガベージコレクション
WakeMap のキー名オブジェクトは参照カウンタを増加させません。オブジェクトが参照されない場合、自動的に削除されます。
次の例では、WeakMap は弱参照であり、参照カウントを生成しないため、obj が削除されるとメモリがクリアされます。
let map = new WeakMap();
let obj = { name: 'zs' };
map.set(obj, 'zs');
obj = null;
console.log(map);
setTimeout(() => {
console.log(map);
}, 1000);