持续创作，加速成长！这是我参与「掘金日新计划 · 10 月更文挑战」的第8天，点击查看活动详情

🎈大家好，我是橙橙子，新人初来乍到，请多多关照~

📝小小的前端一枚，分享一些日常的学习和项目实战总结~

😜如果本文对你有帮助的话，帮忙点点赞呀！ღ( ´･ᴗ･` )比心~

Map

Map 是一组键值对的结构，和 JSON 对象类似。

对象是键对应值键必须是字符串
map 的键不局限于字符串可以是任何类型包括对象也可以作为键

(1) Map数据结构

举个栗子：

let map = new Map([
   ['a',1],
   [[1,2,3],2],
   [{},3],
   [obj1,'obj'],
   [null,'obj1111'],
   [null,'obj1112']
]);

效果如下：
可以看出key 不仅可以是字符串还可以是对象

(2) Map常用属性

console.log("设置size的返回值");
console.log(map.size);  //返回map长度

console.log("这是set的返回值");
console.log(map.set("b", 1).set("bb",222)); //返回 map本身  所以可以用连缀的方法继续写set

console.log("这是get的返回值");
console.log(map.get("b"));     //返回 相对的value

console.log("这是has的返回值");
console.log(map.has("b"));    //返回 true 或者false

console.log("这是delete的返回时");
console.log(map.delete("b"));  //返回 true或者false

console.log("这是clear的返回值");
console.log(map.clear());  //没有返回值

(3) 一个key只能对应一个value，多次对一个key放入value，后面的值会把前面的值覆盖掉

console.log(map.get(null));

效果如下：

（4）结合数组的map方法、filter方法，可以实现 Map 的遍历和过滤（Map 本身没有map和filter方法）

const map0 = new Map()
    .set(1, 'a')
    .set(2, 'b')
    .set(3, 'c');

const map1 = new Map(
    [...map0].filter(([k, v]) => k < 3)
);
// 产生 Map 结构 {1 => 'a', 2 => 'b'}

const map2 = new Map(
    [...map0].map(([k, v]) => [k * 2, '_' + v])
);
// 产生 Map 结构 {2 => '_a', 4 => '_b', 6 => '_c'}

（5）Map 转为数组使用扩展运算符（...）

let arr = [...map]

（6）数组转为 Map 将数组传入 Map 构造函数

let map = new Map(["a",1])

Set

Set 对象类似于数组，且成员的值都是唯一的。

set 没有重复数据每个值都是唯一的
开发中用于去除重复数据
key和value是相等的
在 Set 内部，两个NaN是相等的。两个对象总是不相等的

(1) set数据结构

let set = new Set([1,2,"a",1,"a","b"]);
console.log(set); // 值是唯一的

(2) 常用于数组去重

var arr = [1,3,4,2,5,1,4]
var arr2=[...new Set(arr)] // [1,3,4,2,5]

(3) Set常用语法

//初始化一个Set ，需要一个Array数组，要么空Set
var set = new Set([1,2,3,5,6]) 
console.log(set)  // {1, 2, 3, 5, 6}

// 添加元素到Set中
set.add(7) //{1, 2, 3, 5, 6, 7}

// 删除Set中的元素
set.delete(3) // {1, 2, 5, 6, 7}

// 检测是否含有此元素，有为true，没有则为false
set.has(2) //true

// 获取所有的值
set.values(); 

// 获取所有的键和值
set.entries();

// 没有返回值
set.clear();

（4）交集，并集，差集

let a = new Set([1, 2, 3]);
let b = new Set([4, 3, 2]);
// 并集
let union = new Set([...a, ...b]);
console.log(union);
// 交集
let intersect = new Set([...a].filter(x => b.has(x)));
console.log(intersect);
// 差集
let difference = new Set([...a].filter(x => !b.has(x)));
console.log(difference);

总结

(1) 这两种方法具有极快的查找速度

// 首先初始化数据
var lng = 100
var arr = new Array(lng).fill(2)
var set = new Set(arr)
let map = new Map()
for(var i = 0;i<lng;i++){
arr[i] = i
map.set(i,arr[i])
}

// Array
console.time()
for(var j = 0;j < lng;j++){
arr.includes(j)
}
console.timeEnd()  //default: 0.01220703125 ms


// Set
console.time()
for(var j = 0;j < lng;j++){
set.has(j)
}
console.timeEnd()  // default: 0.005859375 ms

// Map
console.time()
for(var j = 0;j < lng;j++){
map.has(j)
}
console.timeEnd()
// default: 0.007080078125 ms

可以得出结论：Set执行时间最短，查找速度最快。

(2) 初始化需要的值不一样，Map需要的是一个二维数组，而Set 需要的是一维 Array 数组

(3) Map 和 Set 都不允许键重复

(4) Map的键是不能修改，但是键对应的值是可以修改的；Set不能通过迭代器来改变Set的值，因为Set的值就是键。

(5) Map 是键值对的存在，值也不作为健；而 Set 没有 value 只有 key，value 就是 key；

⏰什么Map和Set你还不会用？

Map

Set

总结