likes
comments
collection
share

JavaScript 中 Set 和 Map 相关面试题合集

作者站长头像
站长
· 阅读数 13

开始

最近复习ES6的知识，看自己以前在语雀做的一些总结，真的感觉每次看都有一种全新的理解，可能也代表自己对这门语言理解也达到了一定的深度了。本人目前24届双非普本，秋招至今 0 offer，真的颓了，工作还没找到，还是得逼自己学。

我打算建一个专栏，专门做一些面试题相关的合集，这样也能起到复习作用，加深理解，也可以分享给有需要的人。

这一篇写的是关于JavaScript 的Set和Map相关讲解，知识比较简单，不过建议提前复习下迭代器相关的知识。

Set和Map的基本使用

我们可以说Set是一种叫集合的数据结构，Map是一种叫字典的数据结构，它们也统一叫做哈希表，都可以用来存储不重复的值。同时Set和Map都是可迭代对象。

是可迭代对象，说明可以通过for...of来进行遍历。

Set和Map所有的Api都在这啦。

JavaScript 中 Set 和 Map 相关面试题合集

简单说一下怎么遍历Set和Map吧，最简单的方式就是使用for...of，当然也可以用forEach、keys、values、entries。就只有这些Api。

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

for (const item of set) {
  console.log(item);
  // 1
  // 4
  // 6
  // 3
  // 2
}

const map = new Map([
  ["a", 1],
  ["b", 2],
  ["a", 3],
]);

for (const [key, value] of map) {
  console.log(key, value);
  // a 1
  // b 2
  // c 3
}

Map 和 object 的区别？

  • 键的类型：object 只能是 string 和 symbol 类型，而 Map 可以是任意类型。

  • 键的遍历顺序：Map 的键值对是有序的（按插入顺序，for...of测试打印），object的键的顺序，按以下排列，可以通过for...in测试打印顺序：

    1. 先是，数字键从小到大排

    2. 然后，字符串键按插入顺序排

    3. 最后，Symbol键按插入顺序排

  • 获取大小：Map 可以通过 size 获取键值对的数量，而 object 不能

  • 迭代器：Map 是可迭代对象，可以使用 for...of 遍历，object 不是可迭代对象，使用 for...in遍历

  • 性能：在非常大的数据集合下，涉及到插入/删除操作时，Map 的性能更佳。

Set 和 WeakSet 的区别？

WeakSet 叫弱引用集合。MDN。

  • 没有 clear() 和 size
  • 不再是可迭代对象，不能使用 keys、values、entries、forEach
  • 只能存储对象值的集合
  • 弱引用：对象在外部的引用消失，在WeakSet中也会消失，被被当成垃圾回收掉。

可以看一下MDN，WeakSet只有这几个方法了，WeakMap同理。

JavaScript 中 Set 和 Map 相关面试题合集

Map 和 WeakMap 的区别？

WeakMap 叫弱引用映射表。MDN。

  • 没有 clear() 和 size
  • 不再是可迭代对象，不能使用 keys、values、entries、forEach
  • 键必须是对象，值可以是任意类型。
  • 弱引用：对象在外部的引用消失，在WeakSet中也会消失，被被当成垃圾回收掉。

WeakSet 和 WeakMap 的应用场景？

我自己没怎么用过这两。WeakSet和WeakMap最有用的特性就是弱引用了，大概了解的使用场景：

  • DOM 节点引用：在 Web 开发中，WeakSet 可以用来存储对 DOM 节点的弱引用，当节点从 DOM 树中删除时，不会阻止节点被垃圾回收。
  • 处理深拷贝循环引用的问题。

有其他使用场景的可以在评论区告知下。

使用 Set 实现交集、并集、差集

实现思路：展开运算符、filter、has

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

// 并集
const union = new Set([...a, ...b]);
// Set {1, 2, 3, 4}

// 交集
const intersect = new Set([...a].filter(x => b.has(x)));
// set {2, 3}

// （a 相对于 b 的）差集
const difference = new Set([...a].filter(x => !b.has(x)));

Map 和 object 怎么转换？

  • object -> Map：Object.formEntries(myMap)
  • Map -> object：Object.entries(myObject)
const myMap = new Map([
  ['key1', 'value1'],
  ['key2', 'value2'],
]);

const myObject = Object.fromEntries(myMap);
console.log(myObject); // { key1: 'value1', key2: 'value2' }

const myObject = {
  key1: 'value1',
  key2: 'value2',
};

const myMap = new Map(Object.entries(myObject));
console.log(myMap); // Map { 'key1' => 'value1', 'key2' => 'value2' }

Set 和 数组之间怎么转换？

  • Set -> Array：展开运算符（[...set]）、Array.from()
  • Array -> Set：new Set(arr)，Set 还会做去重的操作。
const set = new Set([1, 3, 4, 6]);

const arr1 = [...set];
const arr2 = Array.from(set);

console.log(arr1, arr2);

const arr = [1, 4, 5, 2, 4, 1];

const set = new Set(arr);

console.log(set); //[1,4,5,2]

JavaScript 中 Set 和 Map 相关面试题合集

写完了，有问题可以在评论区讨论~~