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

}

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的不同点：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