你真的知道何时使用map、set而非Object、Array吗?

199 阅读1分钟

Set

const mySet = new Set();

mySet.add(1); // add item 
mySet.add('a');
mySet.size; // 2 
mySet.delete(1)
mySet.has(1); // false
mySet.clear(); // empties set 

数组去重

最常见的一种处理数据的一种方式,当你的数据需要去重时,使用如下的方法

const arr = [1,2,3,4,4,5,6,7,7,7]
const unique = [...new Set(arr)]
// unique equals [1,2,3,4,5,6,7]

算法相关、需要高性能

Set 到底快了多少?

虽然运行时间可能会有很大差异,具体取决于所使用的系统、所提供数据的大小以及其他变量。但我希望我的测试结果能够让你真实地了解Set 的速度。我将分享三个简单的测试和我得到的结果。

测试准备

在进行测试前,我们先创建一个数组和一个 Set 集合,它们都包含一百万个元素。为了简单,我将使用 0 到 999999 。

let arr = [],
  set = new Set(),
  n = 1000000;
for (let i = 0; i < n; i++) {
  arr.push(i);
  set.add(i);
}

测试 :搜索元素

首先,我们搜索一个已知存在的数字 123123。

let result;
console.time('Array');
result = arr.indexOf(15555) !== -1;
console.timeEnd('Array');
console.time('Set');
result = set.has(15555);
console.timeEnd('Set');
  • Array: 0.126ms,Set: 0.008ms
  • Set 比数组快了 7.5 倍。

Map

map本身带来的感觉和js原有的Object差不多,不过还是有十分明显的差异

const myMap = new Map();
myMap.set('a', 1);
myMap.set('b', 2);
myMap.set('c', 3);
myMap.get('a'); // 1
myMap.set('a', 'ok');
myMap.get('a'); // 'ok'
myMap.size; // 3
myMap.delete('b'); // removes b key/value
myMap.clear() // empties map

你当需要non-string keys的时候

Object并不支持,在某些场合下,不需要做复杂的数据转换,直接塞入map中做映射就可以

const map = new Map();
const obj = {a:1}
map.set(obj,1)

当你关注插入顺序时

从技术上讲,Object确实在现代 JS 中维护了插入顺序。但是,维护关键顺序似乎有一些注意事项。如果确实需要确保键/值对保持其迭代顺序,请使用map。

stackoverflow.com/questions/5…

// key order: 1, foo, bar
const obj = { "foo": "foo", "1": "1", "bar": "bar" }

大数据

因浏览器而异,但对于 chrome 浏览器,map可以容纳 1600 万个条目,而Object只能容纳 1100 万个条目。

所以……这在技术上是一回事,只是一般大家可能碰不到这种问题