2024年前端最新JavaScript进阶（二十二）：集合 Set 和 Map_vue set集合，前端面试问题和答案

2401_84437604

于 2024-05-06 23:22:03 发布

阅读量730

点赞数 13

分类专栏：程序员文章标签：前端 javascript vue.js

本文链接：https://blog.csdn.net/2401_84437604/article/details/138512162

版权

程序员专栏收录该内容

164 篇文章 0 订阅

订阅专栏

❤️ 谢谢支持

喜欢的话别忘了关注、点赞哦~。

开源分享：【大厂前端面试题解析+核心总结学习笔记+真实项目实战+最新讲解视频】

Set类的方法—Set.delete(value) set.delete(value) 删除指定数据，返回一个布尔值，表示删除是否成功

const s2 = new Set([1,2,3,4]);

var ba1 = s2.delete(1)
var ba2 = s2.delete('c')

console.log(ba1); //true
console.log(ba2); //false
console.log(s2); //Set { 2, 3, 4 }

Set类的方法—Set.has(value)——判断该值是否为set的成员，返回一个布尔值

const s = new Set([1,2,3,4]);

const bs1 = s.has(1);
const bs2 = s.has('a');
console.log(bs1,bs2);   //true false

Set类的方法—Set.clear()——清除所有的数据，没有返回值

const s = new Set([1,2,3,4]);

s.clear();
console.log(s);  // Set {}

Set的遍历器——keys() 返回键名的遍历器，values() 返回键值的遍历器，entries() 返回键值对的遍历器，forEach() 使用回调函数遍历每个成员

const s = new Set([1,2,3,4]);

console.log(s.keys());  // SetIterator { 1, 2, 3, 4 }
console.log(s.values());   //SetIterator { 1, 2, 3, 4 }
console.log(s.entries());   //SetIterator { [ 1, 1 ], [ 2, 2 ], [ 3, 3 ], [ 4, 4 ] }


//该方法可以接收三个参数，分别是：键值，健名，set本身
s.forEach(function(value,key,set){
    console.log(value+'lina');
    console.log(set)
})

利用Set为数组去重——直接将要给数组放入到，set的构造方法中即可

const arr = [1,2,3,45,2,3,4,13,5,7,1,3,2]

const s = new Set(arr);

console.log(s);  // Set { 1, 2, 3, 45, 4, 13, 5, 7 }
console.log(arr);   //[ 1, 2, 3, 45, 2, 3, 4, 13, 5, 7, 1, 3, 2 ]

console.log([...s]);//将set转成数组，结果是[ 1, 2, 3, 45, 4, 13, 5, 7 ]

三、Map数据结构

Map数据结构概述字典：是用来存储不重复key的Hash结构，不同于集合（Set）的是，字典使用的是[键,值]的形式来存储数据的

JavaScript 的对象（Object），本质上是键值对的集合（Hash 结构），但是传统上只能用字符串当作键。这给它的使用带来了很大的限制。

为了解决这个问题，ES6 提供了 Map 数据结构。它类似于对象，也是键值对的集合，但是“键”的范围不限于字符串，各种类型的值（包括对象）都可以当作键。也就是说，Object 结构提供了“字符串—值”的对应，Map结构提供了“值—值”的对应，是一种更完善的 Hash 结构实现。如果你需要“键值对”的数据结构，Map 比 Object 更合适。

创建Map和Map类的属性——获取Map类中有几个数据

const  m = new Map([
    ['a',1],
    ['b',2]
]);

console.log(m);  //Map { 'a' => 1, 'b' => 2 }
console.log(m.size);  //2

Map类的方法—set(key,value) 设置键名key对应的键值为value，然后返回整个Map结构，如果key已经有值，则键值会被更新，否则就生成该键

Map类的方法—get(key)——get方法读取key对应的键值，如果找不到key，返回undefined

const  m = new Map([
    ['a',1],
    ['b',2]
]);

m.set('miaov','ketang').set('xing','huang');//因为返回的是Map结构本身，所以可以使用调用链的方式
console.log(m);//Map { 'a' => 1, 'b' => 2, 'miaov' => 'ketang', 'xing' => 'huang' }


m.set('b',5);//有相同的key，值会被覆盖
console.log(m); //Map { 'a' => 1, 'b' => 5, 'miaov' => 'ketang', 'xing' => 'huang' }

console.log(m.get('b'));  //5
console.log(m.get('c'));  //undefined

Map类的方法—delete(key) 删除某个键，删除成功放回true，如果删除失败，返回false

const  m = new Map([
    ['a',1],
    ['b',2]
]);

console.log(m.delete('b'));//true
console.log(m.delete('c'));//false
console.log(m);//Map { 'a' => 1 }

Map类的方法—has(key) 方法返回一个布尔值，表示某个键是否在当前Map对象之中

Map类的方法—clear() 清楚Map结构中的所有数据，没有返回值

const  m = new Map([
    ['a',1],
    ['b',2]
]);

console.log(m.has('b'));//true
console.log(m.has('c'));//false

m.clear();
console.log(m);//Map {}

Map的遍历器 keys() 返回键名的遍历器；values() 返回键值的遍历器；entries() 返回键值对的遍历器；forEach() 使用回调函数遍历每个成员

const  m = new Map([
    ['a',1],
    ['b',2],
    ['c',3]
]);

console.log(m.keys());//MapIterator { 'a', 'b', 'c' }
console.log(m.values()); //MapIterator { 1, 2, 3 }
console.log(m.entries());  //MapIterator { [ 'a', 1 ], [ 'b', 2 ], [ 'c', 3 ] }

//该方法可以接收三个参数：值，键，Map本身
m.forEach(function (value, key, Map) {
    console.log(value);
    console.log(key);
})

Map在使用过程中的一些注意事项一两个NaN本身是不相等的，但在Map结构中，NaN作为键的话，视为相等的（同一个键）

const  map = new Map();
map.set(NaN,1);
map.set(NaN,2);

console.log(map); //Map { NaN => 2 }

Map在使用过程中的一些注意事项二如果Map结构中的key是一个对象的情况下，每个对象都是不同的键，即使是两个空的对象，因为两个对象的地址值不同，以后引用别人的插件，使用对象作为键，就能避免同名碰撞的情况

const map = new Map();

map.set({},'x').set({},'y');

console.log(map); //Map { {} => 'x', {} => 'y' }

Map 结构转为数组结构——比较快速的方法是使用扩展运算符（…）。

const  m = new Map([
    ['a',1],
    ['b',2]
]);

console.log([...m.keys()]);  //[ 'a', 'b' ]
console.log([...m.values()]);  //[ 1, 2 ]
console.log([...m.entries()]);   //[ [ 'a', 1 ], [ 'b', 2 ] ]
console.log([...m]);   //[ [ 'a', 1 ], [ 'b', 2 ] ]

数组结构转为Map结构——将数组传入 Map 构造函数，就可以转为 Map

const arr = [[1,'one'],[2,'two'],[3,'three']];

const map = new Map(arr);

console.log(map);//Map { 1 => 'one', 2 => 'two', 3 => 'three' }

Map结构转为对象——如果所有 Map 的键都是字符串，它可以转为对象

const myMap = new Map();

myMap.set('yes', true)
myMap .set('no', false);
console.log(myMap);   //Map { 'yes' => true, 'no' => false }

const obj = strMapToObj(myMap);
console.log(obj); //{ yes: true, no: false }

function strMapToObj(strMap) {
    let obj = Object.create(null);


### 最后

面试一面会问很多基础问题，而这些基础问题基本上在网上搜索，面试题都会很多很多。最好把准备一下常见的面试问题，毕竟面试也相当与一次考试，所以找工作面试的准备千万别偷懒。面试就跟考试一样的，时间长了不复习，现场表现肯定不会太好。表现的不好面试官不可能说，我猜他没发挥好，我录用他吧。

**[开源分享：【大厂前端面试题解析+核心总结学习笔记+真实项目实战+最新讲解视频】](https://bbs.csdn.net/topics/618166371)**

**96道前端面试题：**

- ![](https://img-blog.csdnimg.cn/img_convert/765344068fa80bde11c4dd3670b45f6f.webp?x-oss-process=image/format,png)

**常用算法面试题：**

- ![](https://img-blog.csdnimg.cn/img_convert/05975a22fdb4aa9995e890ed05854aa0.webp?x-oss-process=image/format,png)

**前端基础面试题：**
内容主要包括**HTML，CSS，JavaScript，浏览器，性能优化**

- ![](https://img-blog.csdnimg.cn/img_convert/ff781e68648edd9e7ef0938fd68ed3e0.webp?x-oss-process=image/format,png)

面试题解析+核心总结学习笔记+真实项目实战+最新讲解视频】](https://bbs.csdn.net/topics/618166371)**

**96道前端面试题：**

- [外链图片转存中...(img-9pXAfzZR-1715008912459)]

**常用算法面试题：**

- [外链图片转存中...(img-fekfeVOa-1715008912460)]

**前端基础面试题：**
内容主要包括**HTML，CSS，JavaScript，浏览器，性能优化**

- [外链图片转存中...(img-j7xE3tb6-1715008912460)]

2401_84437604

关注

13
点赞
踩
8

收藏

觉得还不错? 一键收藏
0
评论
2024年前端最新JavaScript进阶（二十二）：集合 Set 和 Map_vue set集合，前端面试问题和答案

也就是说，Object 结构提供了“字符串—值”的对应，Map结构提供了“值—值”的对应，是一种更完善的 Hash 结构实现。Map在使用过程中的一些注意事项二如果Map结构中的key是一个对象的情况下，每个对象都是不同的键，即使是两个空的对象，因为两个对象的地址值不同，以后引用别人的插件，使用对象作为键，就能避免同名碰撞的情况。Set的遍历器——keys() 返回键名的遍历器，values() 返回键值的遍历器，entries() 返回键值对的遍历器，forEach() 使用回调函数遍历每个成员。
复制链接

扫一扫