javascript中怎么提高扩展运算符的性能-创新互联
这篇“javascript中怎么提高扩展运算符的性能”文章,文中示例代码介绍的非常详细,具有一定的参考价值,感兴趣的小伙伴们一定要参考一下,对于“javascript中怎么提高扩展运算符的性能”,小编整理了以下知识点,请大家跟着小编的步伐一步一步的慢慢理解,接下来就让我们进入主题吧。
成都创新互联公司10多年企业网站设计服务;为您提供网站建设,网站制作,网页设计及高端网站定制服务,企业网站设计及推广,对成都卫生间隔断等多个领域拥有丰富的网站营销经验的网站建设公司。Java可以用来干什么
Java主要应用于:1. web开发;2. Android开发;3. 客户端开发;4. 网页开发;5. 企业级应用开发;6. Java大数据开发;7.游戏开发等。
让我们首先简要介绍一下扩展运算符在数组中的工作原理。
扩展运算符,也就是我们常用的三个,让数组展开变成每个小块。 然后使用中括号语法[]
,重新组装这些小块构造一个新数组。
扩展运算符可以被放置在中括号[]
里面的任何位置。
const numbers = [1, 2, 3]; [0, ...numbers]; // => [0, 1, 2, 3] [0, ...numbers, 4]; // => [0, 1, 2, 3, 4] [...numbers, 4]; // => [1, 2, 3, 4]
回答我们一开始提出的问题,扩展运算符在数组文字中的位置是否可以提高性能?让我们往后继续探究。
附加到头部和尾部功能
在开始性能比较之前,让我们定义两个函数。
第一个是appendToTail()
:
function appendToTail(item, array) { return [...array, item]; } const numbers = [1, 2, 3]; appendToTail(10, numbers); // => [1, 2, 3, 10]
appendToTail()
可以让你在数组的末尾插入一个值。 此函数使用了以下写法[...array, item]
。
第二个是appendToHead()
:
function appendToHead(item, array) { return [item, ...array]; } const numbers = [1, 2, 3]; appendToHead(10, numbers); // => [10, 1, 2, 3]
appendToHead()
是一个纯函数,它返回一个新数组,其中添加的值是插入在原数组的头部。它使用[item, ...array]
。
讲道理就上面这两个函数的表现,没有理由认为这些功能会有不一样的效率。但是事实可能跟我们想象中不一样,下面让我们来继续测试吧。
性能测试
我用MacBook Pro
在以下3个浏览器的笔记本电脑上测试[... array, item]
和[item, ...array]
,对比两者的性能:
Chrome 76
Firefox 68
Safari 12.1
以下是性能测试结果:
正如预期的那样,在Firefox和Safari浏览器中[...array, item]
和[item, ...array]
具有相同的性能。
但是,在Chrome中,[...array, item]
的执行速度比[item, ...array]
快两倍。 这是一个有用的结果。
要在Chrome中提高扩展运算符的性能,请在数组文字的开头使用扩展运算符:
const result = [...array, item];
但另一个问题出现了:这种问题怎么引起的?
从V8引擎的7.2版本之后,为Chrome中的JavaScript执行提供支持,可以对扩展运算符进行新的优化:快速路径优化。
用几句话描述它的工作原理,如下:
如果没有这个优化,当引擎遇到扩展运算符[...iterable, item]时
,它会调用可迭代对象的迭代器iterator.next()
。在每次迭代时,结果数组的内存都会增加,迭代结果会被添加到结果数组中。
但是快速路径优化检测到已知的可迭代(如整数数组)并完全跳过迭代器对象的创建。 然后引擎读取扩展数组的长度,仅为结果数组分配一次内存。 然后通过索引传播数组,将每个项目添加到结果数组中。
快速路径优化会跳过迭代对象的创建,只为结果分配一次内存。 从而性能提高。
支持的数据结构
快速路径优化适用于以下标准JavaScript数据结构。
数组
const numbers = [1, 2, 3, 4]; [...numbers, 5]; // => [1, 2, 3, 4, 5]
字符串
const message = 'Hi'; [...message, '!']; // => ['H', 'i', '!']
Sets
const colors = new Set(['blue', 'white']); [...colors, 'green']; // => ['blue', 'white', 'green'] [...colors.values(), 'green']; // => ['blue', 'white', 'green'] [...colors.keys(), 'green']; // => ['blue', 'white', 'green']
Maps
在Map对象中,仅支持map.keys()
和map.values()
方法:
const names = new Map([[5, 'five'], [7, 'seven']]); [...names.values(), 'ten']; // => ['five', 'seven', 'ten'] [...names.keys(), 10]; // => [5, 7, 10]
以上是“javascript中怎么提高扩展运算符的性能”这篇文章的所有内容,感谢各位的阅读!相信大家都有了一定的了解,希望分享的内容对大家有所帮助,如果还想学习更多知识,欢迎关注创新互联行业资讯频道!
当前标题:javascript中怎么提高扩展运算符的性能-创新互联
标题路径:http://scyanting.com/article/dgipij.html