面试题---Set和Map的区别；Map和Object 的区别

许兴港
204 阅读5分钟

Set和Map的区别

简述：

  • Set和Map主要应用场景在于数据重组和数据储存。
  • Set是一种叫做集合的数据结构，Map是一种叫做字典的数据结构。 集合和字典的区别：
  • 共同点：集合和字典可以存储不重复的值。
  • 不同点：集合是以[value,value]的形式存储元素，字典是以[key,value]的形式储存

集合（Set）

ES6新增的一种新的数据结构，类似于数组（差别：集合当中没有重复的值，并且使用键对数据排序即顺序存储）。 Set本身就是一种构造函数，用来生成Set数据结构。 Set对象允许你存储任何类型的唯一值，无论是原始值还是对象引用。

const s = new Set()
[1, 2, 3, 4, 3, 2, 1].forEach(x => s.add(x))
for (let i of s) {
    console.log(i)	// 1 2 3 4
}
// 去重数组的重复对象
let arr = [1, 2, 3, 2, 1, 1]
[... new Set(arr)]	// [1, 2, 3]

注意：向 Set 加入值的时候，不会发生类型转换，所以5和"5"是两个不同的值。Set 内部判断两个值是否不同，使用的算法叫做“Same-value-zero equality”，它类似于精确相等运算符（===），主要的区别是NaN等于自身，而精确相等运算符认为NaN不等于自身。 另外，NaN和undefined都可以被存储在Set 中， NaN之间被视为相同的值（NaN被认为是相同的，尽管 NaN !== NaN）。

let set = new Set();
let a = NaN;
let b = NaN;
set.add(a);
set.add(b);
set // Set {NaN}
 
let set1 = new Set()
set1.add(5)
set1.add('5')
console.log([...set1])	// [5, "5"]

操作方法：

  1. add(value)：新增，相当于 array里的push。
  2. delete(value)：存在即删除集合中value。
  3. has(value)：判断集合中是否存在 value。
  4. clear()：清空集合。

便利方法：遍历方法（遍历顺序为插入顺序）

  1. keys()：返回一个包含集合中所有键的迭代器。
  2. values()：返回一个包含集合中所有值得迭代器。
  3. entries()：返回一个包含Set对象中所有元素得键值对迭代器。
  4. forEach(callbackFn, thisArg)：用于对集合成员执行callbackFn操作，如果提供了 thisArg 参数，回调中的this会是这个参数，没有返回值。

WeakSet

WeakSet对象允许你讲弱引用对象存储在一个集合中。

WeakSet和Set的区别：

  • WeakSet只能存储对象引用，不能存放值，而Set都可以。

  • WeakSet 对象中储存的对象值都是被弱引用的，即垃圾回收机制不考虑 WeakSet 对该对象的应用，如果没有其他的变量或属性引用这个对象值，则这个对象将会被垃圾回收掉（不考虑该对象还存在于 WeakSet 中），所以，WeakSet 对象里有多少个成员元素，取决于垃圾回收机制有没有运行，运行前后成员个数可能不一致，遍历结束之后，有的成员可能取不到了（被垃圾回收了），WeakSet 对象是无法被遍历的（ES6 规定 WeakSet 不可遍历），也没有办法拿到它包含的所有元素。 方法：

  • add(value)：在WeakSet 对象中添加一个元素value。

  • has(value)：判断 WeakSet 对象中是否包含value。

  • delete(value)：删除元素 value。

字典（Map）:

是一组键值对的结构，具有极快的查找速度。

const m = new Map()
const o = {p: 'haha'}
m.set(o, 'content')
m.get(o)	// content
 
m.has(o)	// true
m.delete(o)	// true
m.has(o)	// false

Map和Object 的区别

在JavaScript中，Map 和 Object 看起来都是用键值对来存储数据，那么他们有什么不同呢？

不同点：

在 Object 中， key 必须是简单数据类型（整数，字符串或者是 symbol），而在 Map 中则可以是 JavaScript 支持的所有数据类型，也就是说可以用一个 Object 来当做一个Map元素的 key。 元素顺序：

Map 元素的顺序遵循插入的顺序，而 Object 的则没有这一特性。 继承：

Map 继承自 Object 对象。 新建实例 Object 支持以下几种方法来创建新的实例：

var obj = {...};
var obj = new Object();
var obj = Object.create(null);

Map 仅支持下面这一种构建方法：

var map = new Map([[1, 2], [2, 3]]); // map = {1 => 2, 2 => 3}

数据访问 Map 想要访问元素，可以使用 Map 本身的原生方法：

  • map.get(1); // 2 访问元素
  • map.has(1); 判断某个元素是否在 Map 中可以使用
  • map.set(key, value); 新增一个数据
  • map.delete(1); 删除指定数据
  • map.clear(); 全部删除 Object 可以通过 . 和 [ ] 来访问：
// 获取数据
obj.id;
obj['id'];
 
// 新增/修改数据
obj['key'] = value;
obj.key = value;
 
// 删除数据
delete obj.id;
// 下面这种做法效率更高
obj.id = undefined

需要注意的是，使用 delete 会真正的将属性从对象中删除，而使用赋值 undefined 的方式，仅仅是值变成了 undefined。属性仍然在对象上，也就意味着 在使用 for … in… 去遍历的时候，仍然会访问到该属性。

判断某个元素是不是在 Object 中需要以下操作：

obj.id === undefined;
// 或者
'id' in obj;

另外需要注意的一点是，Object 可以使用 Object.prototype.hasOwnProperty() 来判断某个key是否是这个对象本身的属性，从原型链继承的属性不包括在内。

获取size Map 自身有 size 属性，可以自己维持 size 的变化。 Object 则需要借助 Object.keys() 来计算

console.log(Object.keys(obj).length);

Iterating Map 自身支持迭代，Object 不支持。

如何确定一个类型是不是支持迭代呢？ 可以使用以下方法：

console.log(typeof obj[Symbol.iterator]); // undefined
console.log(typeof map[Symbol.iterator]); // function

何时使用 Map ，何时使用 Object？ 虽然Map 在很多时候优于 Object，但是作为 JavaScript 最基础的数据类型，还是有很多情景更适合使用 Object。 当所要存储的是简单数据类型，并且 key 都为字符串或者整数或者 Symbol 的时候，优先使用 Object ，因为Object可以使用 字符变量 的方式创建，更加高效。 当需要在单独的逻辑中访问属性或者元素的时候，应该使用 Object，例如：

var obj = {
    id: 1, 
    name: "It's Me!", 
    print: function(){ 
        return `Object Id: ${this.id}, with Name: ${this.name}`;
    }
}
console.log(obj.print());//Object Id: 1, with Name: It's Me.

// 以上操作不能用 Map 实现 JSON 直接支持 Object，但不支持 Map Map 是纯粹的 hash， 而 Object 还存在一些其他内在逻辑，所以在执行 delete 的时候会有性能问题。所以写入删除密集的情况应该使用 Map。 Map 会按照插入顺序保持元素的顺序，而Object做不到。 Map 在存储大量元素的时候性能表现更好，特别是在代码执行时不能确定 key 的类型的情况。

avatar
文章
阅读
粉丝