这篇文章主要介绍JavaScript中Map、WeakMap、Set和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 是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起源于Map,因此它们彼此非常相似。但是,WeakMap具有很大的不同。
WeakMap的名字是怎么来的呢?嗯,是因为它与它的引用链接所指向的数据对象的连接或关系没有Map的连接或关系那么强,所以它是弱的。
那么,这到底是什么意思呢?
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不同,它只接受一个对象作为键,否则,它将返回一个错误。
可以使用WeakMap的方法如下。
delete
get
has
set
这个话题最大的不同是WeakMap不支持迭代对象的方法。但是为什么呢?下面将对此进行描述。
与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
对象被垃圾回收时,Map对象将保持引用链接,而WeakMap对象将丢失链接。所以当你使用WeakMap时,你应该考虑这个功能。
Set也非常类似于Map,但是Set对于单个值更有用。
const set = new Set();
set.add(1);
set.add('john');
set.add(BigInt(10));
// Set(4) {1, "john", 10n}
与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);
与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:
不是一个可迭代的对象,不能循环。
如果引用数据被垃圾收集,则无法访问数据。
支持较少的方法。
以上是“JavaScript中Map、WeakMap、Set和WeakSet有什么用”这篇文章的所有内容,感谢各位的阅读!希望分享的内容对大家有帮助,更多相关知识,欢迎关注亿速云行业资讯频道!
亿速云「云服务器」,即开即用、新一代英特尔至强铂金CPU、三副本存储NVMe SSD云盘,价格低至29元/月。点击查看>>
免责声明:本站发布的内容(图片、视频和文字)以原创、转载和分享为主,文章观点不代表本网站立场,如果涉及侵权请联系站长邮箱:is@yisu.com进行举报,并提供相关证据,一经查实,将立刻删除涉嫌侵权内容。