面试常问的js里map和set的区别

一、Set的简介

Set类似于数组，但是它里面每一项的值是唯一的，没有重复的值，Set是一个构造函数，用来生成set的数据结构。

let s = new Set();
let arr = [2, 3, 5, 4, 5, 2, 2];
arr .forEach(item => arr.add(item)); //向set添加重复的值for (let i of s) {
  console.log(i);
}
// 2 3 5 4 结果set不会添加重复的值

set构造函数可以接受一个数组当参数，用来初始化。这就有一些常问的面试题，下面咱们来写一下。

1、看数组的并集

let arr1 = [1,2,3];
let arr2 = [3,4,5];
let s1 = new Set([...arr1,...arr2]) //这样就把重复的3去掉了
console.log([...s1]);//这就是并集的结果了

2、看数组的交集

let arr1 = [1,2,3,1];
let arr2 = [3,4,5,4];
let s1 = new Set(arr1);//先去除arr1数组自身的重复项
let s2 = new Set(arr2);//去除arr2数组自身的重复项
//先简单介结一个数组的filter方法，它是es5的方法，它的参数是一个函数，如果这个函数返回的是true，
//表示把数组的这一项留下，如果是false的话，会把数组的这一项删除掉
let arr = [...s1].filter((item)=>{
     return s2.has(item) //has方法看s2里有没有item这一项
})
console.log(arr)//[3]

3、看数组的差集

let arr1 = [1,2,3,1];
let arr2 = [3,4,5,4];
let s1 = new Set(arr1);
let s2 = new Set(arr2);
let arr = [...s1].filter((item)=>{
     return !s2.has(item) //重点在这里，就是把咱们的交集取个反就ok了
})
console.log(arr)//[1,2] 这是arr1差arr2的结果是[1,2],如果是arr2差arr1就是[4,5]

二、Map的简介

Map类似于对象，也是键值对的集合，但是“键”的范围不限制于字符串，各种类型的值（包含对象）都可以当作键。Map 也可以接受一个数组作为参数，数组的成员是一个个表示键值对的数组。注意Map里面也不可以放重复的项。

let map = new Map([['js','react']]);
map.set('js','react');//看看是否可以放重复的项
map.set('javaScript','vue');
console.log(map)//Map {'js' => 'react','javaScript' => 'vue'} 不可以放重复项

面试也就问这么多吧，大家想看更详细的可以看看阮一峰老师的书《ECMAScript 6 入门》，地址是 http://es6.ruanyifeng.com/#docs/set-map