视频1 视频21 视频41 视频61 视频文章1 视频文章21 视频文章41 视频文章61 推荐1 推荐3 推荐5 推荐7 推荐9 推荐11 推荐13 推荐15 推荐17 推荐19 推荐21 推荐23 推荐25 推荐27 推荐29 推荐31 推荐33 推荐35 推荐37 推荐39 推荐41 推荐43 推荐45 推荐47 推荐49 关键词1 关键词101 关键词201 关键词301 关键词401 关键词501 关键词601 关键词701 关键词801 关键词901 关键词1001 关键词1101 关键词1201 关键词1301 关键词1401 关键词1501 关键词1601 关键词1701 关键词1801 关键词1901 视频扩展1 视频扩展6 视频扩展11 视频扩展16 文章1 文章201 文章401 文章601 文章801 文章1001 资讯1 资讯501 资讯1001 资讯1501 标签1 标签501 标签1001 关键词1 关键词501 关键词1001 关键词1501 专题2001
es6中Set和Map的对比介绍(附代码)
2020-11-27 19:29:26 责编:小采
文档


本篇文章给大家带来的内容是关于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

下载本文
显示全文
专题