通过百万条数据分别测试map、set、数组检索数据的速度究竟多快

前言

早之前在学习过程中有过对set的学习记录一些基础的前置知识可以点此传送门进行简单学习,当时并没有考虑什么时候用map,什么时候用set。存在即合理,当我们尝试去深入的了解他们的时候,发现其实在某些情况下,他们能给我们带来意想不到的效果。

运行速度以及时间复杂度

当我们仅考虑运行速度,不考虑存储空间时,我们要看代码的运行效率,我们可以把这段代码的时间复杂度作为一个重要的衡量指标,那么什么是时间复杂度呢,下面数据结构书中对时间复杂度的描述。
一个算法的执行时间大致上等千其所有语句执行时间的总和,而语句的执行时间则为该条语 句的重复执行次数和执行一次所需时间的乘积。

下面是理论上mapset数组它们对元素查找和删除操作的时间复杂度

操作 map set 数组
查找元素 O(1) O(1) O(n)
删除元素 O(1) O(1) O(n)

百万条数据对比

那么在数据量大的时候他们对数据的检索速度究竟有多快,接下来准备了一个好玩的小demo,用100万条数据分别测试查询和删除值为888888这个元素。

查询

ini 复制代码
const array = [];
const set = new Set();
const map = new Map();
for (let i = 0; i < 1000000; i++) {
    set.add(i);
    array.push(i);
    map.set(i, i);
}

let result = 0;
console.log('第一次');
console.time('search by indexof');
result = array.indexOf(888888);
console.timeEnd('search by indexof');

console.time('search by includes');
result = array.includes(888888);
console.timeEnd('search by includes');

console.time('search by set');
result = set.has(888888);
console.timeEnd('search by set');

console.time('search by map');
result = map.has(888888);
console.timeEnd('search by map');

console.log('第二次');
console.time('search by indexof');
result = array.indexOf(888888);
console.timeEnd('search by indexof');

console.time('search by includes');
result = array.includes(888888);
console.timeEnd('search by includes');

console.time('search by set');
result = set.has(888888);
console.timeEnd('search by set');

console.time('search by map');
result = map.has(888888);
console.timeEnd('search by map');

结果

删除

ini 复制代码
console.log('第一次');
console.time('delete by splice');
result = array.splice(array.indexOf(888888), 1);
console.timeEnd('delete by splice');

console.time('delete by slice');
result = array.slice(array.indexOf(888888), array.indexOf(888888) + 1);
console.timeEnd('delete by slice');

console.time('delete by set');
result = set.delete(888888);
console.timeEnd('delete by set');

console.time('delete by map');
result = map.delete(888888);
console.timeEnd('delete by map');

console.log('第二次');
console.time('delete by splice');
result = array.splice(array.indexOf(888888), 1);
console.timeEnd('delete by splice');

console.time('delete by slice');
result = array.slice(array.indexOf(888888), array.indexOf(888888) + 1);
console.timeEnd('delete by slice');

console.time('delete by set');
result = set.delete(888888);
console.timeEnd('delete by set');

console.time('delete by map');
result = map.delete(888888);
console.timeEnd('delete by map');

结果

总结

  1. 由此看来,当数据量较大时,map对数据的查找和删除操作都是非常快的,而时间复杂度为O(n)的数组在做这些数据操作时,速度要慢上不少。
  2. set集合的值不能直接修改,map的值可以通过对应的key进行修改,所以没有测试直接修改值的速度。
  3. 如果我们要对数据量大列表进行检索,不妨考虑map、set。

set使用场景

  1. 数组去重
  2. 数据量大,且只需要存储值并且只对值进行查询删除等操作时

map使用场景

  1. 可以用来存储数字的key,用数字类型当做键使用,
  2. 双重for循环时使用map降低时间复杂度
  3. 存储键值映射关系的权限信息、存储信息等
相关推荐
不会敲代码12 小时前
手写 Mini React:从 JSX 到虚拟 DOM 再到 render,搞懂 React 底层原理
前端·javascript·react.js
kyriewen3 小时前
你的代码仓库变成“毛线团”了?Monorepo 用 Turborepo 拆成“乐高积木”
前端·javascript·面试
身如柳絮随风扬3 小时前
你知道什么是 Ajax 吗?—— 从入门到原理,一篇彻底搞懂
前端·ajax·okhttp
IT大白鼠3 小时前
AIGC性能的关键瓶颈:算力、数据、算法三者如何互相制约?
算法·aigc
旷世奇才李先生3 小时前
Vue3\+TypeScript 2026实战——企业级前端项目架构搭建与性能优化全指南
前端·架构·typescript
白雪茫茫4 小时前
监督学习、半监督学习、无监督学习算法详解
python·学习·算法·ai
FengyunSky4 小时前
浅析 空间频率响应 SFR 计算
算法
Beginner x_u4 小时前
前端八股整理(工程化 02)|CommonJS/ESM、Webpack Loader/Plugin 与Vite 对比
前端·webpack·node.js·plugin·loader
树下水月4 小时前
PHP 一种改良版的雪花算法
算法·php·dreamweaver
openKaka_4 小时前
createRoot 到底创建了什么:FiberRootNode 和 HostRootFiber 的初始化过程
前端·javascript·react.js