JavaScript ES6—Map的妙用

Stella981
• 阅读 728

多重嵌套 for 循环太丑,运行效率又低,有没有什么办法可以降低它的嵌套层数?游戏内怎么简洁优雅的获取我想要的数据,又有良好的智能提示效果?

有没有通用的提高运行效率的方案?没错,ES6 的 Map 就是为你定制的。

先看一个简单的例子,数组去重:

`let myArray = [1, 2, 3, 4, 5, 2, 1];`

  


`function getArray(array) {`

  


`let newArray = [];`

  


`for (let i = 0, l = array.length; i < l; i++) {`

  


`for (let j = i + 1; j < l; j++) {`

  


`if (array[i] === array[j]) {`

  


` j = ++i;`

  


` }`

  


` }`

  


` newArray.push(array[i]);`

  


` }`

  


`return newArray;`

  


`}`

  


`console.warn(getArray(myArray));`

 

上面用了最基本的2重 for 循环遍历数组达到去重的效果,代码运行效率低,时间复杂度达到了O(n2),如何优化成一重for循环呢?用 Map 试一试!

Map 是 ES6 新出的一种数据结构,用来表示键值对,object也是键值对结构,Map算是对object的一种加强,object的键只能为string,Map的键可以为任意值。我们用Map来存储中间遍历的值,从而可以达到一轮for循环就完成去重的目的,如下:

`let myArray = [1, 2, 3, 4, 5, 2, 1];`

  


`function getArray(array) {`

  


` let newArray = [];`

  


` let map = new Map();`

  


`for (let i = 0, l = array.length; i < l; i++) {`

  


`if(typeof map.get(array[i]) == "undefined"){`

  


`map.set(array[i], array[i]);`

  


` newArray.push(array[i]);`

  


` }`

  


` }`

  


`return newArray;`

  


`}`

  


`console.warn(getArray(myArray));`

 

很明显,上面通过 Map 减少了一层for循环,将时间复杂度降到了O(n),提高了运行效率。

Map这种键值对结构(字典,哈希表),可以直接根据键名找到对应的值,不需要遍历,大大提高了查找的效率。我们常用的对象和数组结构也有同样的效果,但是Map功能更强大,配合ts的智能提示效果更好。

理论分析:为什么用 Map 能提高运行效率呢,仔细思考,发现,这个里面蕴含了一个重要的计算机理论知识——空间换时间!计算机理论里面,对于一个算法,他的时间负责度和空间复杂度是对立的。简单的理解就是,占用空间多,运行就快,占用空间少,运行就慢。上面的 Map 就是开辟的额外存储空间,用来保存一些中间状态,从而将2重 for 循环降低为1重 for 循环,降低了运行时间。

Map的强大还体现在他的充足的智能提示的地方:

JavaScript ES6—Map的妙用

上面通过声明键和值的类型,当调用对应的 API 时候,会对参数和返回类型有一个提示作用,这是对象和数组没有的优势,而且 Map 的 key 也可以为对象等任意类型,这在有些地方也能起到意向不到的方便作用。

所以游戏中,凡是想提高运行效率,想降低查找等时间消耗的地方,都请尽可能的用Map来解决吧,这一定是一个百试不爽的万精油方案,而且是一个一定能有效果的方案,因为背后有理论知识支撑着他JavaScript ES6—Map的妙用

JavaScript ES6—Map的妙用

关注公众号,教你更优雅简洁的开发游戏,write less,do more!

本文分享自微信公众号 - Creator星球游戏开发社区(creator-star)。
如有侵权,请联系 support@oschina.cn 删除。
本文参与“OSC源创计划”,欢迎正在阅读的你也加入,一起分享。

点赞
收藏
评论区
推荐文章
Jeffong Jeffong
3年前
GraalVM学习系列一:GraalVM介绍及安装方法,有了这个教程,可避免很多坑,本人亲自操作+淌雷后的经验
什么是GraalVM呢?这个东西好啊,这个东西是一个超级虚拟机,可虚可实,怎么说呢,它可以运行脚本代码,可以运行跨平台代码,最牛B的是,它TM还能把这些代码编译成机器码,你说上哪说理去,执行效率CUA的一下就上去了,速度可媲美C,就是这么不讲武德。它可以运行什么代码呢?有:Java,Python,Ruby,JavaScript&Node.js
Promise入门
ES6为什么推出PromisePromise是ES6新增的引用类型,让我们的异步逻辑代码更加优雅。异步就相当于你会了影分身,本来你只能同一时间做一个事情,但是当你有了分身之后,你可以和他同一时间做不同的事情。所以,异步增加了我们事情完成的效率,这也就是我们常说的避免进程等待一个长时间的线程操作,同时执行,减少耗时,增加性能。异步是JavaScript的基
待兔 待兔
5个月前
手写Java HashMap源码
HashMap的使用教程HashMap的使用教程HashMap的使用教程HashMap的使用教程HashMap的使用教程22
Wesley13 Wesley13
3年前
java16
1:List的子类(掌握)(1)List的子类特点ArrayList:底层数据结构是数组,查询快,增删慢线程不安全,效率高Vector:底层数据结构是数组,查询快,增删慢线程安全,效率低LinkedList:底层数据结构是链表,查询慢,增删快线程不安全,效率高(2)ArrayListA:
Wesley13 Wesley13
3年前
java 性能优化:35 个小细节,让你提升 java 代码的运行效率
前言代码 优化 ,一个很重要的课题。可能有些人觉得没用,一些细小的地方有什么好修改的,改与不改对于代码的运行效率有什么影响呢?这个问题我是这么考虑的,就像大海里面的鲸鱼一样,它吃一条小虾米有用吗?没用,但是,吃的小虾米一多之后,鲸鱼就被喂饱了。代码优化也是一样,如果项目着眼于尽快无BUG上线,那么此时可以抓大放小,代码的细节可以不精打细磨;但
Stella981 Stella981
3年前
Redis都有哪些数据类型
string这是最基本的类型了,就是普通的set和get,做简单的kv缓存hash这个是类似map的一种结构,这个一般就是可以将结构化的数据,比如一个对象(前提是这个对象没嵌套其他的对象)给缓存在redis里,然后每次读写缓存的时候,可以操作hash里的某个字段。key150value{“id”:
Stella981 Stella981
3年前
ES6中的map和reduce
一 实战<!DOCTYPEhtml<htmllang"en"<head<metacharset"UTF8"<metaname"viewport"content"widthdevicewidth,initialscale1.0"
Stella981 Stella981
3年前
ES6中自带的promise的问题
ES6中的Promise作用:解决异步嵌套问题。但是只能解决两层嵌套,不能解决两层以上嵌套;解决方法是我自己封装的函数如下:functionPromising(){var_arr;this.thenfunction(fx){
Stella981 Stella981
3年前
ES6的Set()方法实现数组去重
letarr1,1,2,5,2;lets1newSet();s1.add(arr0);s1.add(arr1);s1.add(arr2);s1.add(arr3);s1.add(arr4);letarr1;
Easter79 Easter79
3年前
Tool系列—Babel
1、简单介绍     这些转换器(更准确地说是源代码到源代码的编译器)可以把你写的符合ECMAScript6标准的代码完美地转换为ECMAScript5标准的代码,并且可以确保良好地运行在所有主流JavaScript引擎中。    Babel对ES6的支持程度比其它同类更高,而且Babel拥有完善的文档和一个