Eine kurze Diskussion über Map, WeakMap, Set und WeakSet in JavaScript

Ich schätze, dass über 70 % der JavaScript-Entwickler Objekte nur zum Sammeln und Verwalten von Daten in ihren Projekten verwenden. Nun, es stimmt, neue Sammlungsobjekte wie Map und Set werden selbst bei ihrer Veröffentlichung im Jahr 2015 nicht ausreichend genutzt.

Heute werde ich über die erstaunlichen neuen Funktionen von 2015 sprechen – Map, Set, WeakMap und WeakSet.

Vor dem Lesen

• Dieser Artikel soll Ihnen nicht sagen, dass Sie nur diese verwenden sollen. Aber ich habe gesehen, dass einige Kandidaten eines davon bei Codierungsprüfungen verwenden, und ich verwende es in bestimmten Situationen gerne. Es liegt an Ihnen, zu entscheiden, wann Sie sie in Ihrem Projekt verwenden.
• Sie sollten wissen, was ein Iterable ist, um meine Diskussion besser zu verstehen.

Objekte

Wir sollten zunächst besprechen, wie man Objekte verwendet.

Okay, ich glaube, mehr als 90 % der Leute kennen diesen Teil bereits, weil Sie auf diesen Artikel geklickt haben, um mehr über die neuen Sammlungsobjekte zu erfahren, aber für Anfänger in JavaScript, lassen Sie uns kurz darüber sprechen.

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

Also habe ich ein algorithm-Objekt erstellt, dessen Schlüssel und Wert ein String-Wert sind, und ich habe den Wert mit dem Schlüsselwort . aufgerufen. algorithm 对象，它的key和value是一个字符串类型的值，而我通过用 . 关键字来调用该值。

另外，for-in 循环也很适合在对象中循环。你可以用 [] 关键字访问其键对应的值。但是不能使用 for-of 循环，因为对象是不可迭代的。

对象的属性可以用 delete 关键字来删除。这样就可以彻底摆脱对象的属性，大家要注意不要和这种方法混淆。

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

algorithm.site = undefined 只是将新值分配给 site。

好的，我们已经快速讨论了有关对象的一些事项：

• 如何添加属性
• 如何遍历对象
• 如何删除属性

Map

Map 是JavaScript中新的集合对象，其功能类似于对象。但是，与常规对象相比，存在一些主要差异。

首先，让我们看一个创建Map对象的简单示例。

如何添加属性

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

Map 不需要创建任何内容，但是添加数据的方式略有不同。

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

Map 有一种特殊的方法可在其中添加称为 set 的属性。它有两个参数：键是第一个参数，值是第二个参数。

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

要记住的一件事是 Map 以数组形式提供数据，你应该解构数组或访问每个索引以获取键或值。

要仅获取键或值，还有一些方法可供你使用。

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

你甚至可以使用展开操作符(...)来获取Map的全部数据，因为展开操作符还可以在幕后与可迭代对象一起工作。

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：key必须是对象

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

Darüber hinaus eignet sich die for-in-Schleife auch sehr gut zum Durchlaufen von Objekten. Sie können auf den Wert zugreifen, der seinem Schlüssel entspricht, indem Sie das Schlüsselwort [] verwenden. Sie können jedoch keine for-of-Schleifen verwenden, da Objekte nicht iterierbar sind.

Objekteigenschaften können mit dem Schlüsselwort delete gelöscht werden. Auf diese Weise können Sie die Eigenschaften des Objekts vollständig entfernen. Sie sollten darauf achten, es nicht mit dieser Methode zu verwechseln.

const set = new Set();

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

algorithm.site = undefiniert weist einfach den neuen Wert site zu.

Okay, wir haben schnell ein paar Dinge über Objekte besprochen:

🎜Wie man Eigenschaften hinzufügt 🎜🎜Wie man über Objekte iteriert 🎜🎜Wie man Eigenschaften entfernt 🎜🎜

Map 🎜🎜 Map ist JavaScript. Ein neues Sammlungsobjekt, das wie ein Objekt funktioniert. Es gibt jedoch einige wesentliche Unterschiede zu regulären Objekten. 🎜🎜Schauen wir uns zunächst ein einfaches Beispiel für die Erstellung eines Kartenobjekts an. 🎜

So fügen Sie Attribute hinzu 🎜

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

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

🎜Karte Es ist nicht nötig, etwas zu erstellen, aber die Art und Weise, Daten hinzuzufügen, ist etwas anders. 🎜

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

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

🎜Map verfügt über eine spezielle Möglichkeit zum Hinzufügen von Eigenschaften namens set. Es benötigt zwei Parameter: Der Schlüssel ist der erste Parameter und der Wert ist der zweite Parameter. 🎜

set.delete(5); 
// true

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

🎜 Es ​​ist jedoch nicht möglich, vorhandene Daten darin hinzuzufügen. Wenn im Map-Objekt bereits ein Wert vorhanden ist, der dem Schlüssel der neuen Daten entspricht, werden die neuen Daten nicht hinzugefügt. 🎜

/* 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);

🎜 Sie können aber vorhandene Daten mit anderen Werten überschreiben. 🎜

So iterieren Sie über ein Objekt 🎜🎜Map ist ein iterierbares Objekt, was bedeutet, dass es mithilfe einer for-of-Anweisung zugeordnet werden kann. 🎜

let John = { major: "math" };

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

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

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

🎜Eine Sache, die Sie beachten sollten, ist, dass Map Daten in Form eines Arrays bereitstellt. Sie sollten das Array zerstören oder auf jeden Index zugreifen, um den Schlüssel oder Wert zu erhalten. 🎜🎜Um nur Schlüssel oder Werte zu erhalten, stehen Ihnen einige Methoden zur Verfügung. 🎜rrreee🎜Sie können sogar den Spread-Operator (...) verwenden, um die gesamten Daten einer Karte abzurufen, da der Spread-Operator auch im Hintergrund mit iterierbaren Objekten arbeitet. 🎜rrreee

So löschen Sie Attribute 🎜🎜Das Löschen von Daten aus einem Kartenobjekt ist ebenfalls einfach, Sie müssen lediglich delete aufrufen. 🎜rrreee🎜delete Gibt einen booleschen Wert zurück, der angibt, ob die Funktion delete die Daten erfolgreich gelöscht hat. Wenn ja, wird true zurückgegeben, andernfalls wird false zurückgegeben. 🎜

WeakMap🎜🎜WeakMap stammt von Map, daher sind sie einander sehr ähnlich. WeakMap ist jedoch ganz anders. 🎜🎜Woher kommt der Name WeakMap? Das liegt daran, dass seine Verbindung oder Beziehung zu dem Datenobjekt, auf das sein Referenzlink verweist, nicht so stark ist wie die von Map und daher schwach ist. 🎜🎜Also, was bedeutet das? 🎜

Unterschied 1: Schlüssel muss ein Objekt sein🎜rrreee🎜Sie können jeden Wert als Schlüssel an das Map-Objekt übergeben, aber WeakMap ist anders, es akzeptiert nur ein Objekt als Schlüssel Andernfalls wird ein Fehler zurückgegeben. 🎜

Unterschied 2: Nicht alle Methoden in Map werden unterstützt 🎜🎜Die Methoden, die WeakMap verwenden können, sind wie folgt. 🎜🎜🎜delete🎜🎜get🎜🎜has🎜🎜set🎜🎜🎜Der größte Unterschied in diesem Thema besteht darin, dass WeakMap die Methode zum Iterieren von Objekten nicht unterstützt. Aber warum? Dies wird im Folgenden beschrieben. 🎜

Unterschied 3: Wenn GC Referenzen bereinigt, werden die Daten gelöscht🎜🎜Im Vergleich zu Map ist dies der größte Unterschied. 🎜rrreee🎜Wenn das John-Objekt durch Garbage Collection erfasst wird, behält das Map-Objekt den Referenzlink, während das WeakMap-Objekt den Link verliert. Wenn Sie also WeakMap verwenden, sollten Sie diese Funktion in Betracht ziehen. 🎜🎜Set🎜🎜Set ist Map ebenfalls sehr ähnlich, aber Set ist für einzelne Werte nützlicher. 🎜🎜So fügen Sie Attribute hinzu🎜rrreee🎜Wie Map verhindert auch Set, dass wir denselben Wert hinzufügen. 🎜

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

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

Das obige ist der detaillierte Inhalt vonEine kurze Diskussion über Map, WeakMap, Set und WeakSet in JavaScript. Für weitere Informationen folgen Sie bitte anderen verwandten Artikeln auf der PHP chinesischen Website!