JavaScript API性能对比系列一：Map，Set，数组，对象性能对比

于 2024-06-22 19:25:08 发布
阅读量1.7k 收藏 23
点赞数 45
分类专栏： javascript api 性能分析 文章标签： javascript 开发语言 ecmascript
版权声明：本文为博主原创文章，遵循 CC 4.0 BY-SA 版权协议，转载请附上原文出处链接和本声明。
本文链接：https://blog.csdn.net/zzyp1927314/article/details/139881608
版权

以下是测试性能的环境

CPUAMD Ryzen 9 5900HX with Radeon Graphics 八核
操作系统Windows 11 家庭中文版 (64位)
内存16GB(3200 MHz / 3200 MHz)
Nodejsv18.16.0

测试一：循环赋值

Array

const arr = [];

console.time('数组')
for (let i = 0; i < time; i++) {
    arr.push(i);
}
console.timeEnd('数组')

Set

const set = new Set();
console.time('set')
for (let i = 0; i < time; i++) {
    set.add(i);
}
console.timeEnd('set')

Map

const map = new Map();
console.time('map')
for (let i = 0; i < time; i++) {
    map.set(i, undefined);
}
console.timeEnd('map')

Object

const obj = {};
console.time('对象')
for (let i = 0; i < time; i++) {
    obj[i] = undefined;
}
console.timeEnd('对象')

测试结果

数组和对象的插入速度很快。

Nodejs

类型1万次10万次100万次1000万次
数组0.4ms4ms20ms210ms
Set0.7ms6ms72ms2.2s
对象0.26ms3ms23ms592ms
Map1.24ms7ms110ms2.7s

测试二：数组赋值

Set

const setArr = [];
for (let i = 0; i < time; i++) {
    setArr.push(i);
}
console.time('set')
const set = new Set(setArr);
console.timeEnd('set')

Map

const mapArr = [];
for (let i = 0; i < time; i++) {
    mapArr.push([i, undefined]);
}
console.time('map')
const map = new Map(mapArr);
console.timeEnd('map')

测试结果

Nodejs

类型1万次10万次100万次1000万次
Set0.7ms6ms89ms2.4s
Map0.59ms7ms152ms3.5s

测试三：循环遍历

 Array

console.time('数组 forEach')
arr.forEach(val => {});
console.timeEnd('数组 forEach')

console.time('数组 for...in')
for (let i in arr) {
    arr[i];
}
console.timeEnd('数组 for...in')

console.time('数组 for...of')
for (let val of arr) {}
console.timeEnd('数组 for...of')

console.time('数组 for')
const length = arr.length;
for (let i; i < length; i++) {
    arr[i];
}
console.timeEnd('数组 for')

Set

console.time('set forEach')
set.forEach(val => {});
console.timeEnd('set forEach')

console.time('set for...of')
for (let val of set) {}
console.timeEnd('set for...of')

Map

console.time('map forEach')
map.forEach((val, key) => {});
console.timeEnd('map forEach')

console.time('map for...of')
for (let val of map) {}
console.timeEnd('map for...of')

Object

console.time('对象 forEach')
Object.keys(obj).forEach((key) => {})
console.timeEnd('对象 forEach')

console.time('对象 for...in')
for (let key in obj) {
    obj[key]
}
console.timeEnd('对象 for...in')

测试结果

数组的普通for循环在大数据量的情况下速度非常快，比forEach快了太多了。

普通对象的遍历性能非常低（虽然在插入数据的时候要比Map和Set快），如果要对哈希表数据结构做遍历操作，还是建议使用Map或Set。

Nodejs

类型方法1万次10万次100万次1000万次
数组forEach0.107ms1.054ms5.598ms50.962ms
for...in0.762ms6.372ms103.741ms1.369s
for...of0.614ms3.906ms28.793ms97.9ms
for0.104ms1.251ms3.016ms7.216ms
SetforEach0.102ms0.922ms5.537ms43.978ms
for...of0.167ms3.458ms8.406ms57.894ms
MapforEach0.104ms0.867ms5.886ms47.26ms
for...of0.461ms3.486ms17.414ms133.956ms
对象forEach0.206ms5.356ms87.389ms1.612s
for...in0.424ms7.009ms98.209ms1.921s

测试四：随机查询

Array

console.time('数组')
for (let i = 0; i < time; i++) {
    const tmp = arr[i];
}
console.timeEnd('数组')

Map

console.time('map')
for (let i = 0; i < time; i++) {
    const tmp = map.get(i);
}
console.timeEnd('map')

Object

console.time('对象')
for (let i = 0; i < time; i++) {
    const tmp = obj[i];
}
console.timeEnd('对象')

测试结果

Nodejs

类型1万次10万次100万次1000万次
数组0.263ms1.12ms1.633ms5.835ms
对象0.141ms1.113ms1.392ms5.425ms
Map0.43ms4.434ms41.235ms455.84ms

测试五：判断数据存不存在

Array

console.time('数组')
for (let i = 0; i < time; i++) {
    if (arr[i]) {}
}
console.timeEnd('数组')

Map

console.time('对象')
for (let i = 0; i < time; i++) {
    if (obj[i]) {}
}
console.timeEnd('对象')

Set

console.time('set')
for (let i = 0; i < time; i++) {
    if(set.has(i)) {}
}
console.timeEnd('set')

Object

console.time('map')
for (let i = 0; i < time; i++) {
    if(map.has(i)) {}
}
console.timeEnd('map')

测试结果

Nodejs

类型1万次10万次100万次1000万次
数组0.241ms1.119ms1.666ms5.662ms
对象0.141ms1.161ms1.693ms5.785ms
Set0.325ms4.785ms51.14ms803.376ms
Map0.354ms4.835ms48.093ms449.937ms

测试五：随机删除

Array

console.time('数组')
for (let i = 0; i < time; i++) {
    arr.splice(i, 1);
}
console.timeEnd('数组')

Map

console.time('对象')
for (let i = 0; i < time; i++) {
   delete obj[i];
}
console.timeEnd('对象')

Set

console.time('set')
for (let i = 0; i < time; i++) {
    set.delete(i);
}
console.timeEnd('set')

Object

console.time('map')
for (let i = 0; i < time; i++) {
    map.delete(i)
}
console.timeEnd('map')

测试结果

数组是从后往前删的，严格意义讲不算随即删除，后续会单独补充CASE测试一下

Nodejs

类型1万次10万次100万次1000万次
数组1.368ms5.185ms35.957ms255.075ms
对象0.773ms5.272ms48.731ms421.327ms
Set0.78ms7.587ms97.004ms1.734s
Map0.914ms9.43ms113.456ms1.930s

测试六：指定size和不指定size的区别

const time = 10000 * 1000;
const randomArr = [];
for (let i = 0; i < time; i++) {
    randomArr.push(Math.random() * time >> 0);
}

console.time('数组,不指定size, push')
const arr = [];
for (let i = 0; i < time; i++) {
    arr.push(i);
}
console.timeEnd('数组,不指定size, push')

console.time('数组,不指定size, shift')
const arr1 = [];
for (let i = 0; i < time; i++) {
    arr1.unshift(i);
}
console.timeEnd('数组,不指定size, shift')

console.time('数组,不指定size, 正序')
const arr2 = [];
for (let i = 0; i < time; i++) {
    arr2[i] = 0;
}
console.timeEnd('数组,不指定size, 正序')

console.time('数组,不指定size, 倒序')
const arr3 = [];
for (let i = time - 1; i >= 0; i--) {
    arr3[i] = i;
}
console.timeEnd('数组,不指定size, 倒序')

console.time('数组,不指定size, 随机')
const arr4 = [];
for (let i = time - 1; i >= 0; i--) {

    arr4[randomArr[i]] = i;
}
console.timeEnd('数组,不指定size, 随机')

console.time('数组,指定size，正序')
const arr5 = new Array(time);
for (let i = 0; i < time; i++) {
    arr5[i] = 0;
}
console.timeEnd('数组,指定size，正序');

console.time('数组,指定size，倒序')
const arr6 = new Array(time);
for (let i = 0; i < time; i++) {
    arr6[i] = 0;
}
console.time('数组,指定size，倒序')

console.time('数组,指定size，随机')
const arr7 = new Array(time);
for (let i = time - 1; i >= 0; i--) {

    arr7[randomArr[i]] = i;
}
console.time('数组,指定size，随机')

console.time('数组,指定size，随机，非稀疏数组')
const arr8 = new Array(time).fill(undefined);
for (let i = time - 1; i >= 0; i--) {

    arr8[randomArr[i]] = i;
}
console.timeEnd('数组,指定size，随机，非稀疏数组')

测试结果

数组是从后往前删的，严格意义讲不算随即删除，后续会单独补充CASE测试一下

Nodejs

类型指定size初始化方法顺序1万次10万次100万次1000万次
数组否- 
push
正序1.12ms3.534ms18.844ms215.098ms
否-unshift倒序7.502ms677.837ms1:08.297 (m:ss.mmm)时间太久放弃
否- 
随机存储
正序0.74ms4.047ms22.124ms199.869ms
否-随机存储倒序0.571ms6.463ms63.207ms1.391s
否-随机存储随机1.336ms8.192ms85.356ms1.881s
是否随机存储正序0.526ms4.254ms5.39ms60.065ms
是否随机存储倒序0.171ms5.827ms5.513ms45.6ms
是否随机存储随机0.241ms2.449ms10.456ms182.37ms
是是随机存储随机0.277ms1.917ms8.862ms168.578ms
爱文Irwin
关注
专栏目录
Vue 进阶 [七] Vue 源码剖析 01 剖析入口 & 数据响应式
Sandy_zhi的博客
09-29 307
业精于勤荒于嬉 今天又听了一节课，吸收的没那么好，但也是有收获，一直想像看Android 源码那样，研究研究Vue的源码，苦于不知道从何下手，听了这节课，大概知道应该从哪里入手了。 项目地址：https://github.com/vuejs/vue 迁出项目： git clone https://github.com/vuejs/vue.git 当前版本号：2.6.X 入口 dev脚本中 -c scripts/config.js 指明配置文件所在 参数 TARGET:web-..
javascript的Map实现（高性能）
04-10
高性能的 javascript map实现，稳定性强的 基于 JSON的map！ *同时附赠网络上搜索的map一个，用于对比。 经过笔者测试，网络上的map不如笔者所写的map性能高，容量也相差很多。
【js】for、forEach、map数组遍历性能比较
热门推荐
qq_24357165的博客
09-17 1万+
【js】for、forEach、map数组遍历性能比较 先上结果：遍历时间上 for循环遍历 &lt; for…of遍历 &lt; forEach遍历 &lt; for…in遍历 &lt; map遍历 背景 常用的数组遍历方式有很多， 如最经典的for循环 for (var i = 0; i &lt; arr.length; i++) {} 再者有了for…in for (var...
js的Map和Object对比
feilzhang的博客
05-26 1513
前言 在日常的 JavaScript 项目中，我们最常用到的数据结构就是各种形式的键值对格式了（key-value pair）。在 JavaScript 中，除了最基础的Object是该格式外，ES6 新增的Map也同样是键值对格式。它们的用法在很多时候都十分接近。不知道有没有人和我一样纠结过该选择哪个去使用呢？在本菜最近的项目中，我又遇到了这样的烦恼，索性一不做二不休，去对比一下究竟该使用哪一个。 本文将会探讨一下Object和Map的不同，从多个角度对比一下Object和Map...
js数组去重效率——Map,Set是最高的吗
weixin_44156518的博客
03-08 3126
这篇文章初衷是想探索去重效率，真的是Map,Set最高?实际开发中用哪些最快？ 我一次性写好下面的测试数据和方法（可粘贴后在Node环境直接跑） 测试结果 结论：unique,uniqueBySet,uniqueByMap是值得推荐使用的。 10万级别结果: 过程：测试了三组数据（防止样本重复不足的偏差） 结论：个人习惯用的自定义 unique方法(原理是hash+reduce)基本和Set,Ma...
用JS对象实现map功能与方法
06-06
部分IE浏览器不支持ecmascript 6,无法使用map对象，用原生js对象实现map功能
Javascript之高级数组API的使用实例
10-17
JavaScript的高级数组API为我们提供了一系列便捷的操作方法，以简化常见的数组操作任务。 在本文中，我们将探讨几个高级数组API的使用实例。首先，我们来看一看如何处理“伪数组”。伪数组通常指那些拥有数组的外观...
JavaScript进阶笔记：数据类型、数组、对象与DOM操作详解
4. **Map和Set**：ES6引入了新的数据结构Map和Set，Map用于存储键值对，键可以是任何类型的值，而Set则只存储唯一的值，这对于数据管理和查找具有高效性。 5. **迭代器和生成器**：介绍如何通过iterator函数进行...
JavaScriptAPI.rar_javascript_javascriptapi
09-21
ES6（ECMAScript 6）及后续版本引入了更多强大的API，如Promise对象用于处理异步操作，`Map`和`Set`提供了更灵活的数据结构，`Array.prototype.forEach()`等方法增强了数组操作，以及`class`语法简化了面向对象编程...
js代码-2个数组对象去重获取合并后的数组
07-16
在JavaScript编程中，数组对象去重和合并是一个常见的需求，特别是在处理数据集合时。本话题主要探讨如何使用JS实现两个包含对象的数组去重并合并为一个新数组。以下是一些关键知识点： 1. **数组对象去重**： 在...
利用JavaScript的Map提升性能的方法详解
12-09
前言 在ES6中引入JavaScript的新特性中，我们看到了Set和Map的介绍。与常规对象和Array不同的是，它们是“键控集合（keyed collections）”。这就是说它们的行为有稍许不同，并且在特定的上下文中使用，它们可以提供相当大的性能优势。 在这篇文章中，我将剖析Map，它究竟有何不同，哪里可以派上用场，相比于常规对象有什么性能优势。 Map与常规对象有什么不同 Map和常规对象主要有2个不同之处。 1.无限制的键（Key） 常规JavaScript对象的键必须是String或Symbol，下面的对象说明的这一点： const symbol = Symbol(
vue 监听map数组变化_【Vue.js】数据监听和3.0的Proxy API
weixin_39770311的博客
12-20 909
从数据绑定开始数据绑定是目前主流前端框架普及的一个重要原因，它们让开发者专注于处理数据而非DOM的实现。Angular是基于scope的脏检查机制，React是组件的state，Vue则是基于Object.defineProperty，今天我们将Vue的数据绑定原理和新API的特性和优势。Vue是双向绑定吗？不是，原则上Vue的子组件不能改变父组件传下来的数据(prop)，但可以通过v-model...
js遍历数组和对象的方法比较
要这头发有何用
06-21 1261
**数组遍历选用的顺序：基础for循环 ＞ for of 、map、filter > forEach > for in** **对象遍历选用的顺序：for in > 先获得key数组再基础循环 不过获得的方法有两种：Object.keys，Object.getOwnProperty** **Object.keys获取所有key、包括父对象的，Object.getOwnProperty只获取自己的key**
JS中集合对象(Array、Map、Set)及类数组对象的使用与对比
小昱的博客
11-27 7870
原文地址 在使用js编程的时候，常常会用到集合对象，集合对象其实是一种泛型，在js中没有明确的规定其内元素的类型，但在强类型语言譬如Java中泛型强制要求指定类型。 ES6引入了iterable类型，Array，Map，Set都属于iterable类型，它们可以使用for…of循环来遍历，都内置forEach方法。 数组遍历普通遍历最简单的一种，也是使用频率最高的一种。let arr
(转)高性能JavaScript的几点
lanjiasheng的专栏
12-02 131
       随着web应用的复杂度日渐提高，JavaScript代码量也变得越来越多，所以JavaScript在浏览器中性能应得到更多的关注。这事又因为JavaScript的阻塞特性而变得复杂。要提高JavaScript的性能一方面需要浏览器方面提升优化自身的JS引擎，另一方面作为JS程序开发员应该编写高效的JS代码来提高web程序的性能。本文立足于后一种情况。这将是一系列的文章，有关优化...
js for forEach map执行性能
初心
09-17 241
【代码】js for forEach map执行性能。
JavaScript模拟map的实现及其性能分析
q2979978的专栏
02-21 1353
JavaScript模拟map的实现极其性能分析 由于JavaScript原生的没有提供Map，而Map又是非常常用的工具类，在这里我为大家介绍几种JavaScript下的Map实现方式。 Map我们需要实现的核心其实就是他的put()和get()方法，至于其他的size()等方法可后续添加。 不了解JavaScript的同学可能首先想到的实现的方式可能会是用一个Array数组来保存数据然后
JavaScript中Array的map函数和for的性能差不多？别闹了
低代码观察
08-24 538
问题出在for中，使用push将对象添加到数组中，动态调整数组的长度。而map则是在调用之初直接创建出尺寸足够的数组，然后再分别更新各个对象的引用。
ES6 javascript中的object与map性能简单测试2
过客2019
07-23 475
之前写过一个文章，测试object与map，ES6 javascript中的object与map性能简单测试_过客2019-CSDN博客,使用的是连续性整数。结果Object的性能比map强。一网友说Object的连续性做了优化，所以，我这里重新用md5生成key，做测试，代码如下： let {datetimeUtils, codeUtils} = require('xmcommon'); const MM = 1000000; const NN = 10000; let keys = []; .
评论 1
添加红包

请填写红包祝福语或标题

个

红包个数最小为10个

元

红包金额最低5元

当前余额3.43元 前往充值 >
需支付：10.00元
成就一亿技术人!
领取后你会自动成为博主和红包主的粉丝 规则
hope_wisdom
发出的红包
实付元
使用余额支付
点击重新获取
扫码支付
钱包余额 0

抵扣说明：

1.余额是钱包充值的虚拟货币，按照1:1的比例进行支付金额的抵扣。
2.余额无法直接购买下载，可以购买VIP、付费专栏及课程。

余额充值