您好,欢迎访问一九零五行业门户网

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'    });}
weaksetweakset和set的不同点:
weakset的元素只能是对象,不能是数值、字符串、布尔值...
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相同}
map1.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) {}}
weakmapweakmap和map的不同点:
weakmap的key只能是对象
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) {}}
建议:
优先使用map,不使用array,特别是复杂的数据结构
考虑数据唯一性,使用set,放弃array和obj
以上就是es6中set和map的对比介绍(附代码)的详细内容。
其它类似信息

推荐信息