来自 Web前端 2020-04-29 17:43 的文章
当前位置: 网上澳门金莎娱乐 > Web前端 > 正文

【网上澳门金莎娱乐】JS如何提高展开运算符的性能?

当被扩展的数组位于数组的开头时,由于快速路径优化,您可以获得性能提升。它适用于V8引擎7.2版本。通过此优化,性能测试显示[... array, item]的执行速度至少比[item, ...array]快两倍。

3.快速路径优化( fast-path optimization)

原文链接:

请注意,虽然f快速路径优化确实很有用,但是在大多数情况下,可以不用强制进行优化,因为最终用户很可能不会感觉到差别,当然,如果咱们在处理大型数组,就可能些优化方案。

function appendToHead(item, array) { return [item, ...array];}const numbers = [1, 2, 3];appendToHead(10, numbers); // = [10, 1, 2, 3]

关于map,只支持map.keys()和map.values()方法

const colors = new Set(['blue', 'white']);[...colors, 'green']; // = ['blue', 'white', 'green'][...colors.values(), 'green']; // = ['blue', 'white', 'green'][...colors.keys(), 'green']; // = ['blue', 'white', 'green']

通过快速路径优化,[... array,item]的执行速度至少比[item,... array]快两倍。

appendToTail()可以让你在数组的末尾插入一个值。 此函数使用了以下写法[...array, item]。

当展开数组位于数组文本的开头时,咱们可以通过快速路径优化获得性能提升。该优化在V8引擎v7.2中可用(在Chrome v72和NodeJS v12中提供)。

网上澳门金莎娱乐 1

const result = [...array, item];

在开始性能比较之前,让我们定义两个函数。

const numbers = [1, 2, 3, 4];[...numbers, 5]; // = [1, 2, 3, 4, 5]

我用MacBook Pro在以下3个浏览器的笔记本电脑上测试[... array, item]和[item, ...array],对比两者的性能:

时间: 2019-08-04阅读: 175标签: 性能

字符串

function appendToHead(item, array) { return [item, ...array];}const numbers = [1, 2, 3];appendToHead(10, numbers); // = [10, 1, 2, 3]

appendToHead()是一个纯函数,它返回一个新数组,其中添加的值是插入在原数组的头部。它使用[item, ...array]。

现在有一个有趣的问题,展开运算符在数组中的位置是否可以提高性能?让咱们来look look。

讲道理就上面这两个函数的表现,没有理由认为这些功能会有不一样的效率。但是事实可能跟我们想象中不一样,下面让我们来继续测试吧。

如果没有这种优化,当引擎遇到一个展开操作符[网上澳门金莎娱乐,...iterable, item],它调用iterable对象的iterator (iterator.next())方法。在每次迭代中,最后返回的数组的内存都会增加,并将迭代结果添加到其中。

快速路径优化会跳过迭代对象的创建,只为结果分配一次内存。 从而性能提高。

测试结果:

数组

array

function appendToTail(item, array) { return [...array, item];}const numbers = [1, 2, 3];appendToTail(10, numbers); // = [1, 2, 3, 10]
  1. 性能测试

扩展运算符,也就是我们常用的三个,让数组展开变成每个小块。 然后使用中括号语法[],重新组装这些小块构造一个新数组。扩展运算符可以被放置在中括号[]里面的任何位置。

但是,在Chrome中,[... array,item]的执行速度比[item,... array]快两倍。这个结果对咱们来说很有用。

const numbers = [1, 2, 3, 4];[...numbers, 5]; // = [1, 2, 3, 4, 5]

但是快速路径优化检测到一个已知的可迭代对象(就像一个整数数组),并完全跳过iterator对象的创建。然后,引擎读取扩展数组的长度,只为结果数组分配一次内存。然后传递展开数组的索引,将每个元素添加到结果数组中。

Sets

本文主要讲解怎么提高展开运算的性能,在此之前先简单说说展开运算在数组中的工作原理。展开运算符或三个点,接受一个数组数组或通常是可迭代的[... arrayOrIterable]并将数组元素分解,并使用这些分解部分构造一个新数组。

如果没有这个优化,当引擎遇到扩展运算符[...iterable, item]时,它会调用可迭代对象的迭代器iterator.next()。在每次迭代时,结果数组的内存都会增加,迭代结果会被添加到结果数组中。

function appendToTail(item, array) { return [...array, item];}const numbers = [1, 2, 3];appendToTail(10, numbers); // = [1, 2, 3, 10]

第一个是appendToTail():

const colors = new Set(['blue', 'white']);[...colors, 'green']; // = ['blue', 'white', 'green'][...colors.values(), 'green']; // = ['blue', 'white', 'green'][...colors.keys(), 'green']; // = ['blue', 'white', 'green']

请注意,虽然快速路径确实很有用,建议您在性能很重要或者处理大型数组的地方使用它。因为,在大多数情况下,强制优化,最终用户很可能不会感觉到任何差异。

4.支持数据结构

以下是性能测试结果:

但这又是为啥,为什么会发生这种情况?

const message = 'Hi';[...message, '!']; // = ['H', 'i', '!']
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]

但另一个问题出现了:这种问题怎么引起的?

appendToHead()是一个纯函数,它返回一个新数组,通过[item,... array]骚操作将item放到所传入数组的后面。

本文由网上澳门金莎娱乐发布于Web前端,转载请注明出处:【网上澳门金莎娱乐】JS如何提高展开运算符的性能?

关键词: