Array Map Set 都是数组，那么它们之间有什么性能差别吗？下面我们来试试
1、添加
- Array使用push
- Map使用set
- Set使用add
分别取10000，100000，100000 3组随机字符串各测10次，取平均值
let testAdd = (num) => {
let demo_arr = [];
let demo_map = new Map();
let demo_set = new Set();
let rand_arr = rand(num);
add_arr(demo_arr, rand_arr);
add_arr(demo_map, rand_arr);
add_arr(demo_set, rand_arr);
};
let add_arr = (obj, rand) => {
let Start = Date.now();
let type = obj.constructor;
let key = "";
rand.forEach((item, index, arr) => {
switch (type) {
case Array:
key = "Array";
obj.push(item);
break;
case Map:
key = "Map";
obj.set(index, item);
break;
case Set:
key = "Set";
obj.add(item);
break;
}
});
let End = Date.now();
console.log(key + ":" + (End - Start));
};
let rand = (len) => {
let rand = [];
while (rand.length < len) {
let num = Math.random().toString(36).substr(2);
rand.push(num);
}
return rand;
};| 随机数个数 | Array耗时(ms) | Map耗时(ms) | Set耗时(ms) |
|---|---|---|---|
| 10000 | 1 | 1 | 1.4 |
| 100000 | 3.7 | 11.5 | 9.64 |
| 1000000 | 35.77 | 173.55 | 154.764 |
新增元素速度 数组>Set>Map
2、遍历
- Array
- forEach 使用回调函数遍历每个成员
- map
- filter
- reduce
- every
- some
- SET
- keys()：返回键名的遍历器
- values()：返回键值的遍历器
- entries()：返回键值对的遍历器
- forEach()：使用回调函数遍历每个成员
- Map
- keys()：返回键名的遍历器。
- values()：返回键值的遍历器。
- entries()：返回所有成员的遍历器。
- forEach()：遍历 Map 的所有成员。
let testForEach = (num) => {
let demo_arr = [];
let demo_map = new Map();
let demo_set = new Set();
let rand_arr = rand(num);
add_arr(demo_arr, rand_arr);
foreach_arr(demo_arr);
add_arr(demo_map, rand_arr);
foreach_arr(demo_map);
add_arr(demo_set, rand_arr);
foreach_arr(demo_set);
};
let foreach_arr = (obj, rand) => {
let Start = Date.now();
let type = obj.constructor;
let key = "";
switch (type) {
case Array:
key = "Array";
obj.forEach((v, k, arr) => {
if (k > 500) {
}
});
break;
case Map:
key = "Map";
obj.forEach((v, k, arr) => {
if (k > 500) {
}
});
break;
case Set:
key = "Set";
obj.forEach((v, k) => {
if (k > 500) {
}
});
break;
}
let End = Date.now();
console.log(key + "forEach:" + (End - Start));
};| 随机数个数 | Array耗时(ms) | Map耗时(ms) | Set耗时(ms) |
|---|---|---|---|
| 100000 | 1 | 1 | 1 |
| 1000000 | 8 | 8.67 | 7.33 |
| 10000000 | 90 | 89 | 127.5 |
遍历元素速度 数组>Map>Set
数组处理速度最快,但是是不是说Set和Map就没用了，并不是，他们有自己的应用场景
- 1、Set的成员的值都是唯一的，没有重复的值。所以你可以用它过滤重复的数据,但是两个对象总是不相等的。所以不能用它过滤对象。再来看看他的操作方法
- size 属性
- add(value)：添加某个值，返回 Set 结构本身。
- delete(value)：删除某个值，返回一个布尔值，表示删除是否成功。
- has(value)：返回一个布尔值，表示该值是否为Set的成员。
- clear()：清除所有成员，没有返回值。
let a=[1,2,3,1,2,4,5];
let b=[...new Set(a)];
console.log(b); // [1, 2, 3, 4, 5]let set = new Set();
set.add({a:1});
set.add({a:1});
console.log(set); // Set {Object {a: 1}, Object {a: 1}}我们可以得出结论Set适用于单个数值组成数组的操作，可以使用它求2个数组交集，并集等
let a=[1,2,3];
let b=[1,2,4,5];
console.log([...new Set([...a,...b])]);//求a∪b
b=new Set(b);
console.log([...new Set([...a].filter(x => b.has(x)))]);//求a∩b
console.log([...new Set([...a].filter(x =>! b.has(x)))]);//求a与b中不相同的a中的元素
a=new Set(a);
console.log([...new Set([...b].filter(x =>! a.has(x)))]);//求a与b中不相同的b中的元素- 2、Map本质上就是键值对的集合,而且他的键可以是各种类型的值,甚至可以是对象。
- size属性
- set(key, value) key值相同，value则会被更新,注意，如果键是对象，即使对象内容一致，也会产生2条记录，因为它们对应的内存地址不同
- get(key) 获取不到，返回undefined
- has(key) 是否存在对应键
- delete(key)
- clear()
Map适用于操作对象组成的数组