es6中Set和Map的对比介绍(附代码)

如果下载的源码需要作者授权,请更换源码。本站免费分享资源不会增加授权

本篇文章给大家带来的内容是关于es6中Set和Map的对比介绍(附代码),有一定的参考价值,有需要的朋友可以参考一下,希望对你有所帮助。

Set

1、add()方法和size属性

{     let list = new Set();     // add()方法向Set数据添加元素     list.add(5);     list.add(7);     // size属性返回数据的长度     console.log(list.size); // 2      let arr = [1, 2, 3, 4, 5];     let set = new Set(arr);     console.log(set, set.size); // Set(5) {1, 2, 3, 4, 5} 5 }

2.Set的元素必须是唯一的

{     let list = new Set();     list.add(1);     list.add(2);     list.add(1); // 重复元素不会添加进去     console.log(list); // Set(2) {1, 2}      // 数组去重     let arr = [1, 2, 3, 1, '2'];     let list2 = new Set(arr);     console.log(list2); // Set(4) {1, 2, 3, "2"} }

3.has(),delete(),clear()

{     let arr = ['add', 'delete', 'clear', 'has'];     let list = new Set(arr);     console.log(list.has('add')); // true     list.delete('add');     console.log(list); // Set(3) {"delete", "clear", "has"}     list.clear();     console.log(list); // Set(0) {} }

4.Set的遍历

{     let arr = ['add', 'delete', 'clear', 'has'];     let list = new Set(arr);     // Set结构的数据,key和value是同一个值     for (let value of list) {         console.log('value', value); // 'add' 'delete' 'clear' 'has'     }     for (let key of list.keys()) {         console.log('keys', key); // 'add' 'delete' 'clear' 'has'     }     for (let value of list.values()) {         console.log('values', value); // 'add' 'delete' 'clear' 'has'     }     for (let [key, value] of list.entries()) {         console.log('entries', key, value);     }     list.forEach(function (item) {         console.log(item); // 'add' 'delete' 'clear' 'has'     }); }

WeakSet

WeakSet和Set的不同点:

  1. WeakSet的元素只能是对象,不能是数值、字符串、布尔值…

  2. WeakSet中的对象都是弱引用,垃圾回收机制不考虑WeakSet对该对象的引用。WeakSet里面的引用,都不计入垃圾回收机制,所以不会引发内存泄漏的问题。所以,WeakSet适合临时存放一组对象,以及存放跟对象绑定的信息。只要这些对象在外部消失,它在WeakSet里面的引用就会自动消失。

{     let weakList = new WeakSet();     let arg = {name: 'hhh'};     weakList.add(arg); // WeakSet的元素只能是对象     // weakList.add(2); // Uncaught TypeError: Invalid value used in weak set     console.log(weakList); // WeakSet {{name: 'hhh'}}     // 注意:WeakSet没有size属性,没有clear方法,不能遍历。其他的用法和Set相同 }

Map

1.set()方法和get()方法

{     let map = new Map();     let arr = ['123'];     // Map的key可以是任意数据类型     map.set(arr, 456); // map.set(key, value),这里用数组作为key,添加一个值为456的元素     console.log(map.get(arr)); // 456 }

2.Map的另一种定义方式

{     let map = new Map([['a', 123], ['b', 456]]); // 接收一个数组作为参数,数组的每一项为:[key,value]     console.log(map); // Map(2) {"a" => 123, "b" => 456}     console.log(map.size); // 2     console.log(map.has('b')); // true     map.delete('a');     console.log(map); // Map(1) {"b" => 456}     map.clear();     console.log(map); // Map(0) {} }

WeakMap

WeakMap和Map的不同点:

  1. WeakMap的key只能是对象

  2. WeakMap的键名所引用的对象都是弱引用,垃圾回收机制不考虑对此对象的引用。(注意,WeakMap弱引用的只是键名,而不是键值。键值依然是正常引用。)基本上,如果你要往对象上添加数据,又不想干扰垃圾回收机制,就可以使用WeakMap。

{     let weakmap = new WeakMap();     let o = {};     weakmap.set(o, 123);     console.log(weakmap.get(o)); // 123     // 注意:WeakMap没有size属性,没有clear方法,不能遍历。类似于Set与WeakSet的区别 }

Set,Map和Array,Object的对比

Map与Array对比

{     // 数据结构横向对比,增 查 改 删     let map = new Map();     let array = [];      // 增     map.set('t', 1);     array.push({'t': 1});     console.log(map, array); // {"t" => 1} [{'t': 1}]      // 查     let map_exist = map.has('t');     let array_exist = array.find(item => item.t);     console.log(map_exist, array_exist); // true {t: 1}      // 改     map.set('t', 2);     array.forEach(item => item.t ? item.t = 2 : '');     console.log(map, array); // {"t" => 2} [{'t': 2}]      // 删     map.delete('t');     let index = array.findIndex(item => item.t);     array.splice(index, 1);     console.log(map, array); // {} [] }

Set与Array对比

{     let set = new Set();     let array = [];     let item = {'t': 1};      // 增     set.add(item);     array.push(item);     console.log(set, array); // {{'t': 1}} [{'t': 1}]      // 查     let set_exist = set.has(item);     let array_exist = array.find(item => item.t);     console.log(set_exist, array_exist); // true {t: 1}      // 改     set.forEach(item => item.t ? item.t = 2 : '');     array.forEach(item => item.t ? item.t = 2 : '');     console.log(set, array); // {{'t': 2}} [{'t': 2}]      // 删     set.forEach(item => item.t ? set.delete(item) : '');     let index = array.findIndex(item => item.t);     array.splice(index, 1);     console.log(set, array); // {} [] }

Map,Set与Object对比

{     let item = {t: 1};     let map = new Map();     let set = new Set();     let obj = {};      // 增     map.set('t', 1);     set.add(item);     obj['t'] = 1;     console.log(obj, map, set); // {t: 1} Map(1) {"t" => 1} Set(1) {{t: 1}}      // 查     console.log(map.has('t'), set.has(item), 't' in obj); // true true true      // 改     map.set('t', 2);     item.t = 2;     obj['t'] = 2;     console.log(obj, map, set); // {t: 2} Map(1) {"t" => 2} Set(1) {{t: 2}}      // 删     map.delete('t');     set.delete(item);     delete obj['t'];     console.log(obj, map, set); // {} Map(0) {} Set(0) {} }

建议:

  1. 优先使用map,不使用array,特别是复杂的数据结构

  2. 考虑数据唯一性,使用set,放弃array和obj

本文由(壳先生)整理自网络,如转载请注明出处:https://www.mrshell.com;
本站发布的内容若侵犯到您的权益,请邮件联系 i@mrshell.com 删除,我们将及时处理!
===========================================================================

1. 本站大部分下载资源收集于网络,不保证其完整性以及安全性,请下载后自行测试。
2. 本站资源仅供学习和交流使用,版权归资源原作者所有,请在下载后24小时之内自觉删除。
3. 不得使用于非法商业用途,商用请支持正版!不得违反国家法律,否则后果自负!
4. 若作商业用途,请购买正版,由于未及时购买和付费发生的侵权行为,与本站无关。
5. 如有链接无法下载、失效或广告,请联系管理员处理!
6. 本站资源售价只是赞助,收取费用仅维持本站的日常运营所需!

=================================================================

壳先生 » es6中Set和Map的对比介绍(附代码)

发表评论

提供最优质的资源集合

立即查看 了解详情