广告
返回顶部
首页 > 资讯 > 前端开发 > JavaScript >如何使用JavaScript的Map提升性能
  • 284
分享到

如何使用JavaScript的Map提升性能

javascriptmap 2022-10-19 03:10:34 284人浏览 安东尼
摘要

这篇文章将为大家详细讲解有关如何使用javascript的Map提升性能,小编觉得挺实用的,因此分享给大家做个参考,希望大家阅读完这篇文章后可以有所收获。Map与常规对象有什么不同Map和常规对象主要有2个

这篇文章将为大家详细讲解有关如何使用javascript的Map提升性能,小编觉得挺实用的,因此分享给大家做个参考,希望大家阅读完这篇文章后可以有所收获。

Map与常规对象有什么不同

Map和常规对象主要有2个不同之处。

1.无限制的键(Key)

常规JavaScript对象的键必须是String或Symbol,下面的对象说明的这一点:

const symbol = Symbol();
const string2 = 'string2';

const regularObject = {
 string1: 'value1',
 [string2]: 'value2',
 [symbol]: 'value3'
};

相比之下,Map允许你使用函数、对象和其它简单的类型(包括NaN)作为键,如下代码:

const func = () => null;
const object = {};
const array = [];
const bool = false;
const map = new Map();

map.set(func, 'value1');
map.set(object, 'value2');
map.set(array, 'value3');
map.set(bool, 'value4');
map.set(NaN, 'value5');

在链接不同数据类型时,这个特性提供了极大的灵活性。

2.直接遍历

在常规对象中,为了遍历keys、values和entries,你必须将它们转换为数组,如使用Object.keys()、Object.values()和Object.entries(),或者使用for ... in循环,因为常规对象不能直接遍历,另外for ... in循环还有一些限制:它仅仅遍历可枚举属性、非Symbol属性,并且遍历的顺序是任意的。
而Map可以直接遍历,并且由于它是键控集合,遍历的顺序和插入键值的顺序是一致的。你可以使用for ... of循环或forEach方法来遍历Map的entries,如下代码:

for (let [key, value] of map) {
 console.log(key);
 console.log(value);
};
map.forEach((key, value) => {
 console.log(key);
 console.log(value);
});

还有一个好处就是,你可以调用map.size属性来获取键值数量,而对于常规对象,为了做到这样你必须先转换为数组,然后获取数组长度,如:Object.keys({}).length。

Map和Set有何不同

Map的行为和Set非常相似,并且它们都包含一些相同的方法,包括:has、get、set、delete。它们两者都是键控集合,就是说你可以使用像forEach的方法来遍历元素,顺序是按照插入键值排列的。
最大的不同是Map通过键值(key/value)成对出现,就像你可以把一个数组转换为Set,你也可以把二维数组转换为Map:

const set = new Set([1, 2, 3, 4]);
const map = new Map([['one', 1], ['two', 2], ['three', 3], ['four', 4]]);

类型转换

要将Map切换回数组,你可以使用es6的结构语法:

const map = new Map([['one', 1], ['two', 2]]);
const arr = [...map];

到目前为止,将Map与常规对象的互相转换依然不是很方便,所以你可能需要依赖一个函数方法,如下:

const mapToObj = map => {
 const obj = {};
 map.forEach((key, value) => { obj[key] = value });
 return obj;
};
const objToMap = obj => {
 const map = new Map();
 Object.keys(obj).forEach(key => { map.set(key, obj[key]) });
 return map;
};

但是现在,在八月份ES2019的首次展示中,我们看见了Object引入了2个新方法:Object.entries()和Object.fromEntries(),这可以使上述方法简化许多:

const obj2 = Object.fromEntries(map);
const map2 = new Map(Object.entries(obj));

在你使用Object.fromEntries转换map为object之前,确保map的key在转换为字符串时会产生唯一的结果,否则你将面临数据丢失的风险。

性能测试

为了准备测试,我会创建一个对象和一个map,它们都有1000000个相同的键值。

let obj = {}, map = new Map(), n = 1000000;
for (let i = 0; i < n; i++) {
 obj[i] = i;
 map.set(i, i);
}

然后我使用console.time()来衡量测试,由于我特定的系统和node.js版本的原因,时间精度可能会有波动。测试结果展示了使用Map的性能收益,尤其是添加和删除键值的时。

查询

let result;
console.time('Object');
result = obj.hasOwnProperty('999999');
console.timeEnd('Object');
// Object: 0.250ms

console.time('Map');
result = map.has(999999);
console.timeEnd('Map');
// Map: 0.095ms (2.6 times faster)

添加

console.time('Object');
obj[n] = n;
console.timeEnd('Object');
// Object: 0.229ms

console.time('Map');
map.set(n, n);
console.timeEnd('Map');
// Map: 0.005ms (45.8 times faster!)

删除

console.time('Object');
delete obj[n];
console.timeEnd('Object');
// Object: 0.376ms

console.time('Map');
map.delete(n);
console.timeEnd('Map');
// Map: 0.012ms (31 times faster!)

Map在什么情况下更慢

在测试中,我发现一种情况常规对象的性能更好:使用for循环去创建常规对象和map。这个结果着实令人震惊,但是没有for循环,map添加属性的性能胜过常规对象。

console.time('Object');
for (let i = 0; i < n; i++) {
 obj[i] = i;
}
console.timeEnd('Object');
// Object: 32.143ms

let obj = {}, map = new Map(), n = 1000000;
console.time('Map');
for (let i = 0; i < n; i++) {
 map.set(i, i);
}
console.timeEnd('Map');
// Map: 163.828ms (5 times slower)

举个例子

最后,让我们看一个Map比常规对象更合适的例子,比如说我们想写一个函数去检查2个字符串是否由相同的字符串随机排序

console.log(isAnagram('anagram', 'gramana')); // Should return true
console.log(isAnagram('anagram', 'margnna')); // Should return false

有许多方法可以做到,但是这里,map可以帮忙我们创建一个最简单、最快速的解决方案:

const isAnagram = (str1, str2) => {
 if (str1.length !== str2.length) {
  return false;
 }
 const map = new Map();
 for (let char of str1) {
  const count = map.has(char) ? map.get(char) + 1 : 1;
  map.set(char, count);
 }
 for (let char of str2) {
  if (!map.has(char)) {
   return false;
  }
  const count = map.get(char) - 1;
  if (count === 0) {
   map.delete(char);
   continue;
  }
  map.set(char, count);
 }
 return map.size === 0;
};

在这个例子中,当涉及到动态添加和删除键值,无法提前确认数据结构(或者说键值的数量)时,map比object更合适。

关于“如何使用JavaScript的Map提升性能”这篇文章就分享到这里了,希望以上内容可以对大家有一定的帮助,使各位可以学到更多知识,如果觉得文章不错,请把它分享出去让更多的人看到。

--结束END--

本文标题: 如何使用JavaScript的Map提升性能

本文链接: https://www.lsjlt.com/news/69583.html(转载时请注明来源链接)

有问题或投稿请发送至: 邮箱/279061341@qq.com    QQ/279061341

本篇文章演示代码以及资料文档资料下载

下载Word文档到电脑,方便收藏和打印~

下载Word文档
猜你喜欢
  • 如何使用JavaScript的Map提升性能
    这篇文章将为大家详细讲解有关如何使用JavaScript的Map提升性能,小编觉得挺实用的,因此分享给大家做个参考,希望大家阅读完这篇文章后可以有所收获。Map与常规对象有什么不同Map和常规对象主要有2个...
    99+
    2022-10-19
    javascript map
  • 如何使用OPCache提升PHP的性能
    目录什么是 OPcache安装 Opcacheab 测试效果配置参考总结参考文档对于 PHP 这样的解释型语言来说,每次的运行都会将所有的代码进行一次加载解析,这样一方面的好处是代码...
    99+
    2022-11-12
    使用OPCache 提升PHP性能
  • 如何使用C++的StringBuilder提升性能
    今天就跟大家聊聊有关如何使用C++的StringBuilder提升性能,可能很多人都不太了解,为了让大家更加了解,小编给大家总结了以下内容,希望大家根据这篇文章可以有所收获。介绍经常出现客户端打电话抱怨说:你们的程序慢如蜗牛。你开始检查可能...
    99+
    2023-06-17
  • 如何提升MongoDB的性能
    如何提升MongoDB的性能?相信很多没有经验的人对此束手无策,为此本文总结了问题出现的原因和解决方法,通过这篇文章希望你能解决这个问题。(1)文档中的_id键推荐使用默认值,禁止向_id中保存自定义的值。...
    99+
    2022-10-18
    mongodb
  • 使用PhpFastCache提升您的网站性能
    在本文中,我们将探索PhpFastCache库,该库使您可以在PHP应用程序中实现缓存。 因此,它有助于改善整体网站性能和页面加载时间。什么是PhpFastCache?PhpFastCache是一个库,可轻松在PHP应用程序中实现缓存。 这...
    99+
    2023-03-17
    PhpFastCache php
  • 怎么使用OPCache提升PHP的性能
    这篇文章给大家分享的是有关怎么使用OPCache提升PHP的性能的内容。小编觉得挺实用的,因此分享给大家做个参考,一起跟随小编过来看看吧。PHP开发环境搭建工具有哪些一、phpStudy,是一个新手入门最常用的开发环境。二、WampServ...
    99+
    2023-06-14
  • 如何使用php函数来提升程序的性能?
    在开发Web应用程序时,性能是一个非常重要的因素。用户期望获得快速的响应和高效的操作体验。PHP是一种流行的服务器端开发语言,它提供了许多内置函数来完成各种任务。在编写PHP代码时,合理地使用这些函数可以显着提升程序的性能。本文将介绍一些常...
    99+
    2023-10-21
    缓存 (Cache) 多线程 (Multithreading) 优化 (Optimize)
  • 如何使用Memcache提升PHP应用程序的性能和可用性?
    如何使用Memcache提升PHP应用程序的性能和可用性?引言:随着互联网应用程序的迅速发展和用户访问量的增加,提高应用程序的性能和可用性成为了开发者亟需解决的问题之一。其中,使用缓存是一种常见的优化手段。Memcache是一种常用的缓存技...
    99+
    2023-11-09
    PHP应用程序 Memcache(缓存) 性能和可用性
  • Vite使用Esbuild提升性能详解
    目录前言初探 Esbuild关键 API - transfrom & buildpluginEsbuild 在 Vite 中的巧妙使用预构建middlewares 中内容转换...
    99+
    2022-11-13
    Vite Esbuild性能提升 Vite Esbuild
  • PHP7性能优化如何提升
    这篇文章主要介绍“PHP7性能优化如何提升”,在日常操作中,相信很多人在PHP7性能优化如何提升问题上存在疑惑,小编查阅了各式资料,整理出简单好用的操作方法,希望对大家解答”PHP7性能优化如何提升”的疑惑有所帮助!接下来,请跟着小编一起来...
    99+
    2023-06-21
  • 如何提升Node.js 服务性能
    这篇文章给大家介绍如何提升Node.js 服务性能,内容非常详细,感兴趣的小伙伴们可以参考借鉴,希望对大家能有所帮助。author如何使用find-my-way 通过 on 方法绑定路由,并且提供了 HTT...
    99+
    2022-10-19
    node.js
  • PHP如何提升网站性能
    这篇文章给大家分享的是有关PHP如何提升网站性能的内容。小编觉得挺实用的,因此分享给大家做个参考,一起跟随小编过来看看吧。***条、尽可能的减少 HTTP 的请求数 (Make Fewer HTTP Requests ) http请求是要开...
    99+
    2023-06-17
  • 如何使用Memcache提升PHP应用程序的排序性能?
    如何使用Memcache提升PHP应用程序的排序性能?概述:在开发PHP应用程序时,经常需要对数据库中的数据进行排序。然而,如果数据集非常大,常规的排序方法可能会导致性能问题。为了解决这个问题,我们可以利用Memcache来缓存已排序的数据...
    99+
    2023-11-07
    PHP(编程语言) Memcache(缓存) 排序性能
  • 如何使用Memcache提升PHP应用程序的计算性能?
    如何使用Memcache提升PHP应用程序的计算性能?随着Web应用程序的复杂性不断增加,优化应用程序的性能成为开发者的首要任务之一。在PHP应用程序中,我们可以使用Memcache来提升计算性能,以减少数据库查询,增加数据的缓存并减少计算...
    99+
    2023-11-07
    Memcache(存储) 提升(性能) PHP(应用程序)
  • PHP8中如何使用JIT编译提升代码性能?
    PHP语言一直以来都被广泛用于构建Web应用程序,但是由于解释执行的特性,导致了其性能相对较低。为了提升PHP的性能,从PHP7开始引入了JIT(Just-in-Time)编译器,而在全新的PHP8版本中,JIT编译的功能得到了进一步的改进...
    99+
    2023-10-22
    PHP JIT编译 代码性能
  • win10 2004游戏性能如何提升
    本篇内容主要讲解“win10 2004游戏性能如何提升”,感兴趣的朋友不妨来看看。本文介绍的方法操作简单快捷,实用性强。下面就让小编来带大家学习“win10 2004游戏性能如何提升”吧!win10 2004游戏性能怎么样:Windows ...
    99+
    2023-07-01
  • 如何使用Spring框架提升Go语言函数的性能?
    Spring框架是一款非常强大的Java开发框架,它可以帮助开发者快速构建高性能的应用程序。但是,你知道吗?Spring框架也可以用来提升Go语言函数的性能! 在本篇文章中,我们将介绍如何使用Spring框架来提升Go语言函数的性能。我们将...
    99+
    2023-11-05
    spring 框架 函数
  • .NET使用Collections.Pooled提升性能优化的方法
    目录简介Collections.Pooled如何使用性能对比PooledList<T>PooledDictionary<TKey, TValue>Pooled...
    99+
    2022-11-13
    .net性能优化 .net Collections.Pooled性能优化
  • Laravel 容器中的 Python:如何提升性能?
    Laravel 是一个使用 PHP 编写的开源 Web 应用程序框架,它使用了一些强大的工具来帮助开发者快速构建 Web 应用程序。其中一个强大的工具是 Laravel 容器,它提供了一种简单而有效的方式来管理应用程序中的对象依赖关系。 然...
    99+
    2023-07-08
    响应 容器 laravel
  • ASP 容器的使用是否能提升 Laravel 应用的性能?
    Laravel 是一个广受欢迎的 PHP Web 框架,它提供了许多强大的功能和工具,使得 Web 应用的开发变得更加容易和高效。然而,随着 Laravel 应用规模的增大,性能问题也逐渐浮现。为了解决这个问题,很多开发者开始研究使用 A...
    99+
    2023-09-30
    容器 关键字 laravel
软考高级职称资格查询
编程网,编程工程师的家园,是目前国内优秀的开源技术社区之一,形成了由开源软件库、代码分享、资讯、协作翻译、讨论区和博客等几大频道内容,为IT开发者提供了一个发现、使用、并交流开源技术的平台。
  • 官方手机版

  • 微信公众号

  • 商务合作