Analyse von Set und Map in ES6 und Konvertierung zwischen Map und anderen Datenstrukturen

Der Inhalt dieses Artikels befasst sich mit der Analyse von Set und Map in ES6 und der Konvertierung zwischen Map und anderen Datenstrukturen. Ich hoffe, dass er hilfreich ist du hilfst.

ES6-Set:

ES6 bietet ein neues Datenstruktur-Set. Es ähnelt einem Array, aber die Werte der Mitglieder sind eindeutig und es gibt keine doppelten Werte.
Set selbst ist ein Konstruktor, der zum Generieren einer Set-Datenstruktur verwendet wird.
Vergleich zwischen Array und Set
Beide sind Container, die mehrere Werte speichern. Die beiden können ineinander umgewandelt werden, es gibt jedoch Unterschiede in den Verwendungsszenarien. Wie folgt:
①Die indexOf-Methode von Array ist weniger effizient als die has-Methode von Set
②Set enthält keine doppelten Werte (Sie können diese Funktion verwenden, um eine Deduplizierung eines Arrays zu erreichen)
③Set löscht a Bestimmter Wert durch die Löschmethode, und Array kann nur durch Spleiß übergeben werden. Der Vorteil bei der Verwendung der beiden besteht darin, dass ersteres besser ist
④Array verfügt über viele neue Methoden wie Map, Filter, Some, Every usw., die Set nicht hat (sie können jedoch zur Verwendung ineinander konvertiert werden)

1. Set-Instanz Vorgehensweise:

let set = new Set();
set.add(1);
set.add("1");
console.log(set.size); // 2

Sie können ein Array verwenden, um ein Set zu initialisieren, und der Set-Konstruktor stellt sicher, dass diese Werte nicht wiederholt verwendet werden:

let set = new Set([1, 2, 3, 4, 5, 5, 5, 5]);
console.log(set.size); // 5

add(value): Einen Wert hinzufügen und die Set-Struktur selbst zurückgeben
has(value): Einen booleschen Wert zurückgeben, der angibt, ob der Wert ein Mitglied von ist Set

let set = new Set();
set.add(1);
set.add("1");
console.log(set.has(1)); // true
console.log(set.has(6)); // false

delete(value): Löschen Sie einen Wert und geben Sie einen booleschen Wert zurück, der angibt, ob er erfolgreich war oder nicht
clear(value):Clear alle Mitglieder, kein Rückgabewert

let set = new Set();
set.add(1);
set.add("1");
console.log(set.has(1)); // true
set.delete(1);
console.log(set.has(5)); // false
console.log(set.size); // 1

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

2. Traversal-Operation festlegen

keys():Gibt den Traverser der Schlüsselnamen zurück
values(): Gibt den Traverser von Schlüssel-Wert-Paaren zurück
entries():Gibt einen Iterator von Schlüssel-Wert-Paaren zurück
forEach(): Jedes Mitglied

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"]

forEach()

let set = new Set([1, 2]);
set.forEach(function(value, key, ownerSet) {
    console.log(key + "： " + value);
});
// 输出

// 1: 1
// 2: 2

3 ES6-Array-Deduplizierung (In Interviews werden häufig Fragen zur Array-Deduplizierung gestellt)

let arr = [1, 2, 2, 3];
let set = new Set(arr);
let newArr = Array.from(set);
console.log(newArr); // [1, 2, 3]

Set-Sammlung in Array-Array umgewandelt

let set = new Set([1, 2, 3, 3, 4]);
let arr = Array.from(set)  //输出[1,2,3,4]

4.

WeakSet

Die Struktur von WeakSet ähnelt Set, es gibt jedoch zwei Unterschiede:

①Die Mitglieder von WeakSet können nur Objekte sein, keine anderen Wertetypen.
②WeakSet-Objekte sind alle schwache Referenzen. Wenn andere Objekte nicht mehr auf das Objekt verweisen, fordert der Garbage-Collection-Mechanismus automatisch den vom Objekt belegten Speicher zurück, sodass WeakSet nicht durchquert werden kann.

Die WeakSet-Struktur verfügt über die folgenden drei Methoden:

WeakSet.prototype.add(value): Fügen Sie der WeakSet-Instanz ein neues Mitglied hinzu.
WeakSet.prototype.delete(value): Löscht das angegebene Mitglied der WeakSet-Instanz.
WeakSet.prototype.has(value): Gibt einen booleschen Wert zurück, der angibt, ob sich ein Wert in einer WeakSet-Instanz befindet. Eine Verwendung von WeakSet besteht darin, DOM-Knoten zu speichern, ohne sich Gedanken über Speicherverluste machen zu müssen, wenn diese Knoten aus dem Dokument entfernt werden.

ES6-Karte:

1. Bedeutung und grundlegende Verwendung der ES6-Karte

JavaScript-Objekt (Objekt) ist im Wesentlichen eine Sammlung von Schlüssel-Wert-Paaren (Hash-Struktur), aber traditionell Als Schlüssel können nur Zeichenfolgen verwendet werden. Dies bringt große Einschränkungen für den Einsatz mit sich.

ES6 bietet eine Kartendatenstruktur. Es ähnelt einem Objekt und ist ebenfalls eine Sammlung von Schlüssel-Wert-Paaren, der Umfang von „Schlüssel“ ist jedoch nicht auf Zeichenfolgen beschränkt. Als Schlüssel können verschiedene Arten von Werten (einschließlich Objekten) verwendet werden. Mit anderen Worten: Die Objektstruktur bietet eine „String-Wert“-Korrespondenz und die Map-Struktur eine „Wert-Wert“-Korrespondenz, was eine vollständigere Implementierung der Hash-Struktur darstellt.

const m = new Map();
const o = {p: 'Hello World'};

m.set(o, 'content')
m.get(o) // "content"

m.has(o) // true
m.delete(o) // true
m.has(o) // false

Der obige Code verwendet die Set-Methode der Map-Struktur, um das Objekt o als Schlüssel von m zu behandeln, verwendet dann die Get-Methode, um den Schlüssel zu lesen, und verwendet dann die Löschmethode, um den Schlüssel zu löschen.

Attribute und Operationsmethoden von Instanzen§ ⇧

2. Instanzen der Map-Struktur haben die folgenden Attribute und Operationsmethoden:

1.size-Attributsize-Eigenschaft gibt die Gesamtzahl der Mitglieder der Map-Struktur zurück.

const map = new Map();
map.set('foo', true);
map.set('bar', false);
map.size // 2

2.set(key, value)

Die Set-Methode setzt den Schlüsselwert, der dem Schlüsselnamen key entspricht, auf value und gibt dann die gesamte Map-Struktur zurück. Wenn der Schlüssel bereits einen Wert hat, wird der Schlüsselwert aktualisiert, andernfalls wird der Schlüssel neu generiert. Die

const m = new Map();
m.set('edition', 6)        // 键是字符串
m.set(262, 'standard')     // 键是数值
m.set(undefined, 'nah')    // 键是 undefined

set-Methode gibt das aktuelle Map-Objekt zurück, sodass Kettenschreiben verwendet werden kann.

let map = new Map()
  .set(1, 'a')
  .set(2, 'b')
  .set(3, 'c');

3.get(key)

Die get-Methode liest den Schlüsselwert, der dem Schlüssel entspricht. Wenn der Schlüssel nicht gefunden werden kann, wird undefiniert zurückgegeben.

const m = new Map();
const hello = function() {console.log('hello');};
m.set(hello, 'Hello ES6!') // 键是函数
m.get(hello)  // Hello ES6!

4.has(key)

has-Methode gibt einen booleschen Wert zurück, der angibt, ob sich ein Schlüssel im aktuellen Map-Objekt befindet.

const m = new Map();
m.set('edition', 6);
m.set(262, 'standard');
m.set(undefined, 'nah');
m.has('edition')     // true
m.has('years')       // false
m.has(262)           // true
m.has(undefined)     // true

5.delete(key)

Die Methode delete löscht einen Schlüssel und gibt true zurück. Wenn das Löschen fehlschlägt, geben Sie „false“ zurück.

const m = new Map();
m.set(undefined, 'nah');
m.has(undefined)     // true
m.delete(undefined)
m.has(undefined)       // false

6.clear()

Die Methode „clear“ löscht alle Mitglieder und hat keinen Rückgabewert.

let map = new Map();
map.set('foo', true);
map.set('bar', false);
map.size // 2
map.clear()
map.size // 0

三、Map遍历方法

Map 结构原生提供三个遍历器生成函数和一个遍历方法：
keys()：返回键名的遍历器。
values()：返回键值的遍历器。
entries()：返回所有成员的遍历器。
forEach()：遍历 Map 的所有成员。
需要特别注意的是，Map 的遍历顺序就是插入顺序。

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"

四、WeakMap

WeakMap结构与Map结构类似，也是用于生成键值对的集合。

// WeakMap 可以使用 set 方法添加成员
const wm1 = new WeakMap();
const key = {foo: 1};
wm1.set(key, 2);
wm1.get(key) // 2

// WeakMap 也可以接受一个数组，
// 作为构造函数的参数
const k1 = [1, 2, 3];
const k2 = [4, 5, 6];
const wm2 = new WeakMap([[k1, 'foo'], [k2, 'bar']]);
wm2.get(k2) // "bar"

WeakMap与Map的区别有两点：
首先，WeakMap只接受对象作为键名（null除外），不接受其他类型的值作为键名。

const map = new WeakMap();
map.set(1, 2)
// TypeError: 1 is not an object!
map.set(Symbol(), 2)
// TypeError: Invalid value used as weak map key
map.set(null, 2)
// TypeError: Invalid value used as weak map key

上面代码中，如果将数值1和Symbol值作为 WeakMap 的键名，都会报错。其次，WeakMap的键名所指向的对象，不计入垃圾回收机制。
WeakMap的设计目的在于，有时我们想在某个对象上面存放一些数据，但是这会形成对于这个对象的引用。请看下面的例子。

const e1 = document.getElementById('foo');
const e2 = document.getElementById('bar');
const arr = [
  [e1, 'foo 元素'],
  [e2, 'bar 元素'],
];

上面代码中，e1和e2是两个对象，我们通过arr数组对这两个对象添加一些文字说明。这就形成了arr对e1和e2的引用。一旦不再需要这两个对象，我们就必须手动删除这个引用，否则垃圾回收机制就不会释放e1和e2占用的内存。

// 不需要 e1 和 e2 的时候
// 必须手动删除引用
arr [0] = null;
arr [1] = null;

五、Map与其它数据结构的互相转换

1.Map 转为数组：
Map 转为数组最方便的方法，就是使用扩展运算符（...）。

const myMap = new Map()
  .set(true, 7)
  .set({foo: 3}, ['abc']);
[...myMap]
// [ [ true, 7 ], [ { foo: 3 }, [ 'abc' ] ] ]

2.数组 转为 Map：
将数组传入 Map 构造函数，就可以转为 Map。

new Map([
  [true, 7],
  [{foo: 3}, ['abc']]
])
// Map {
//   true => 7,
//   Object {foo: 3} => ['abc']
// }

3.Map 转为对象：
如果所有 Map 的键都是字符串，它可以转为对象。

function strMapToObj(strMap) {
  let obj = Object.create(null);
  for (let [k,v] of strMap) {
    obj[k] = v;
  }
  return obj;
}

const myMap = new Map()
  .set('yes', true)
  .set('no', false);
strMapToObj(myMap)
// { yes: true, no: false }

4.对象转为 Map：

function objToStrMap(obj) {
  let strMap = new Map();
  for (let k of Object.keys(obj)) {
    strMap.set(k, obj[k]);
  }
  return strMap;
}

objToStrMap({yes: true, no: false})
// Map {"yes" => true, "no" => false}

5.Map 转为 JSON：
Map 转为 JSON 要区分两种情况。一种情况是，Map 的键名都是字符串，这时可以选择转为对象 JSON。

function strMapToJson(strMap) {
  return JSON.stringify(strMapToObj(strMap));
}

let myMap = new Map().set('yes', true).set('no', false);
strMapToJson(myMap)
// '{"yes":true,"no":false}'

另一种情况是，Map 的键名有非字符串，这时可以选择转为数组 JSON。

function mapToArrayJson(map) {
  return JSON.stringify([...map]);
}

let myMap = new Map().set(true, 7).set({foo: 3}, ['abc']);
mapToArrayJson(myMap)
// '[[true,7],[{"foo":3},["abc"]]]'

6.JSON 转为 Map：
JSON 转为 Map，正常情况下，所有键名都是字符串。

function jsonToStrMap(jsonStr) {
  return objToStrMap(JSON.parse(jsonStr));
}

jsonToStrMap('{"yes": true, "no": false}')
// Map {'yes' => true, 'no' => false}

但是，有一种特殊情况，整个 JSON 就是一个数组，且每个数组成员本身，又是一个有两个成员的数组。这时，它可以一一对应地转为 Map。这往往是数组转为 JSON 的逆操作。

function jsonToMap(jsonStr) {
  return new Map(JSON.parse(jsonStr));
}

jsonToMap('[[true,7],[{"foo":3},["abc"]]]')
// Map {true => 7, Object {foo: 3} => ['abc']}

Das obige ist der detaillierte Inhalt vonAnalyse von Set und Map in ES6 und Konvertierung zwischen Map und anderen Datenstrukturen. Für weitere Informationen folgen Sie bitte anderen verwandten Artikeln auf der PHP chinesischen Website!