JavaScript의 Map, WeakMap, Set 및 WeakSet에 대한 간략한 토론

JavaScript 개발자의 70% 이상이 프로젝트에서 데이터를 수집하고 유지하는 데에만 객체를 사용하는 것 같습니다. 사실, Map 및 Set과 같은 새로운 컬렉션 개체는 2015년에 출시되었을 때에도 활용도가 낮습니다.

그래서 오늘은 2015년의 놀라운 새 기능인 Map, Set, WeakMap 및 WeakSet에 대해 이야기하겠습니다.

읽기 전에

• 이 글은 그냥 사용하라는 글이 아닙니다. 하지만 일부 응시자가 코딩 시험에서 이들 중 하나를 사용하는 것을 보았고 특정 상황에서는 이를 사용하는 것을 좋아합니다. 프로젝트에서 언제 사용할지는 사용자가 결정합니다.
• 내 토론을 더 잘 이해하려면 반복 가능이 무엇인지 알아야 합니다.

객체

먼저 객체를 사용하는 방법에 대해 논의해야 합니다.

알겠습니다. 이 부분은 이미 90% 이상의 분들이 알고 계시리라 믿습니다. 새로운 컬렉션 객체에 대해 알아보기 위해 이 글을 클릭하셨기 때문입니다. 하지만 JavaScript 초보자를 위해 간단하게 이야기해보겠습니다.

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

그래서 알고리즘 객체를 만들었고, 그 키와 값은 문자열 형식의 값이고, . 키워드를 사용하여 값을 호출했습니다. 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

또한 for-in 루프는 객체를 통한 루프에도 매우 적합합니다. [] 키워드를 사용하여 해당 키에 해당하는 값에 액세스할 수 있습니다. 그러나 객체는 반복 가능하지 않기 때문에 for-of 루프를 사용할 수 없습니다.

개체 속성은 delete 키워드를 사용하여 삭제할 수 있습니다. 이렇게 하면 객체의 속성을 완전히 없앨 수 있으므로 이 방법과 혼동하지 않도록 주의해야 합니다.

const set = new Set();

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

algorithm.site = undefine은 site에 새 값을 할당합니다.

좋아요, 객체에 관한 몇 가지 사항을 빠르게 논의했습니다.

🎜속성을 추가하는 방법 🎜🎜객체를 반복하는 방법 🎜🎜속성을 제거하는 방법 🎜🎜

지도 🎜🎜 Map은 JavaScript로 객체처럼 기능하는 새로운 컬렉션 객체입니다. 그러나 일반 객체와 비교하면 몇 가지 중요한 차이점이 있습니다. 🎜🎜먼저 Map 객체를 생성하는 간단한 예를 살펴보겠습니다. 🎜

속성 추가 방법 🎜

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

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

🎜Map 아무것도 생성할 필요는 없지만 데이터를 추가하는 방법이 살짝 다릅니다. 🎜

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

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

🎜Map에는 set이라는 속성을 추가하는 특별한 방법이 있습니다. 두 개의 매개변수가 필요합니다. 키는 첫 번째 매개변수이고 값은 두 번째 매개변수입니다. 🎜

set.delete(5); 
// true

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

🎜 하지만 기존 데이터를 추가하는 것은 허용되지 않습니다. 새 데이터의 키에 해당하는 값이 Map 객체에 이미 존재하는 경우 새 데이터가 추가되지 않습니다. 🎜

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

🎜 하지만 기존 데이터를 다른 값으로 덮어쓸 수 있습니다. 🎜

객체를 반복하는 방법 🎜🎜Map은 반복 가능한 객체이므로 for-of 문을 사용하여 매핑할 수 있습니다. 🎜

let John = { major: "math" };

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

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

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

🎜한 가지 기억해야 할 점은 Map은 배열 형태로 데이터를 제공하므로 키나 값을 얻으려면 배열을 분해하거나 각 인덱스에 액세스해야 한다는 것입니다. 🎜🎜키나 값만 얻으려면 몇 가지 방법을 사용할 수 있습니다. 🎜rrreee🎜확산 연산자(...)를 사용하여 지도의 전체 데이터를 가져올 수도 있습니다. 확산 연산자는 반복 가능한 개체를 사용하여 백그라운드에서 작동하기 때문입니다. 🎜rrreee

속성을 삭제하는 방법 🎜🎜지도 객체에서 데이터를 삭제하는 것도 쉽습니다. 삭제를 호출하기만 하면 됩니다. 🎜rrreee🎜delete delete 함수가 데이터를 성공적으로 삭제했는지 여부를 나타내는 부울 값을 반환합니다. 그렇다면 true가 반환되고, 그렇지 않으면 false가 반환됩니다. 🎜

WeakMap🎜🎜WeakMap은 Map에서 유래되었기 때문에 서로 매우 유사합니다. 그러나 WeakMap은 매우 다릅니다. 🎜🎜WeakMap이라는 이름은 어디서 유래했나요? 뭐, 참조 링크가 가리키는 데이터 객체와의 연결이나 관계가 Map만큼 강하지 않아서 약하기 때문입니다. 🎜🎜그럼 이게 무슨 뜻인가요? 🎜

차이점 1: 키는 객체여야 합니다🎜rrreee🎜모든 값을 Map 객체에 키로 전달할 수 있지만 WeakMap은 다릅니다. 객체만 키로 허용합니다. , 그렇지 않으면 오류가 반환됩니다. 🎜

차이점 2: Map의 모든 메소드가 지원되는 것은 아닙니다. 🎜🎜WeakMap을 사용할 수 있는 메소드는 다음과 같습니다. 🎜🎜🎜delete🎜🎜get🎜🎜has🎜🎜set🎜🎜🎜 이 주제의 가장 큰 차이점은 WeakMap이 객체 반복 방법을 지원하지 않는다는 것입니다. 그런데 왜? 이에 대해서는 아래에 설명되어 있습니다. 🎜

차이점 3: GC가 참조를 정리하면 데이터가 삭제됩니다.🎜🎜Map과 비교하면 이것이 가장 큰 차이점입니다. 🎜rrreee🎜John 개체가 가비지 수집되면 Map 개체는 참조 링크를 유지하지만 WeakMap 개체는 링크를 잃게 됩니다. 따라서 WeakMap을 사용할 때 이 기능을 고려해야 합니다. 🎜🎜Set🎜🎜Set도 Map과 매우 유사하지만 Set은 단일 값에 더 유용합니다. 🎜🎜속성 추가 방법🎜rrreee🎜Map과 마찬가지로 Set도 동일한 값을 추가하는 것을 방지합니다. 🎜

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

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

위 내용은 JavaScript의 Map, WeakMap, Set 및 WeakSet에 대한 간략한 토론의 상세 내용입니다. 자세한 내용은 PHP 중국어 웹사이트의 기타 관련 기사를 참조하세요!