이 기사에서는 스프레드 연산자의 성능을 어떻게 향상시킬 수 있는지 알아보기 위해 흥미로운 테스트를 수행할 것입니다.
먼저 스프레드 연산자가 배열에서 어떻게 작동하는지 간단히 설명하겠습니다.
일반적으로 사용되는 세 가지 연산자인 확장 연산자를 사용하면 배열을 각 작은 블록으로 확장할 수 있습니다. 그런 다음 대괄호 구문 []을 사용하여 이러한 작은 조각을 재조립하여 새 배열을 구성합니다. []，重新组装这些小块构造一个新数组。
扩展运算符可以被放置在中括号[]里面的任何位置。
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]，对比两者的性能：
以下是性能测试结果：
正如预期的那样，在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]
当被扩展的数组位于数组的开头时，由于快速路径优化，您可以获得性能提升。它适用于V8引擎7.2版本（Chrome v72和NodeJS v12附带的特性）。
通过此优化，性能测试显示[... array, item]的执行速度至少比[item, ...array]
[] 안의 어느 곳에나 배치할 수 있습니다. rrreee
처음에 물었던 질문에 대답하자면, 배열 리터럴 내에서 스프레드 연산자를 배치하면 성능이 향상됩니까? 좀 더 자세히 살펴보겠습니다.appendToTail()입니다. rrreee
appendToTail()을 사용하면 배열 끝에 값을 삽입할 수 있습니다. 이 함수는 다음과 같은 쓰기 방법 [...array, item]을 사용합니다. 두 번째는
rrreeeappendToHead()입니다.
appendToHead()는 순수 함수로, 원본에 추가된 값이 삽입된 새 배열을 반환합니다. 배열 머리. [항목, ...배열]을 사용합니다.
MacBook Pro를 사용합니다. 브라우저를 사용하여 노트북에서 [... array, item] 및 [item, ...array]를 테스트하고 두 성능을 비교합니다. 🎜
🎜🎜예상대로 Firefox 및 Safari에서 [ ...array, item] 및 [item, ...array]는 동일한 성능을 갖습니다. 🎜🎜그러나 Chrome에서는 [...array, item]이 [item, ...array]보다 두 배 빠르게 실행됩니다. 이는 유용한 결과입니다. 🎜🎜Chrome에서 스프레드 연산자의 성능을 향상하려면 배열 리터럴 시작 부분에 스프레드 연산자를 사용하세요. 🎜rrreee🎜 하지만 또 다른 질문이 생깁니다. 이 문제의 원인은 무엇입니까? 🎜🎜 V8 엔진 버전 7.2부터 Chrome에서 JavaScript 실행 지원을 제공하여 스프레드 연산자에 대한 새로운 최적화인 빠른 경로 최적화를 수행할 수 있습니다. 🎜🎜다음과 같이 작동 방식을 몇 문장으로 설명합니다. 🎜🎜이 최적화가 없으면 엔진이 스프레드 연산자 [...iterable, item]를 만나면 반복 가능한 개체 Iterator를 호출합니다. iterator.next(). 반복할 때마다 결과 배열의 메모리가 증가하고 반복 결과가 결과 배열에 추가됩니다. 🎜🎜그러나빠른 경로 최적화는 알려진 반복 가능 항목(예: 정수 배열)을 감지하고 반복자 객체 생성을 완전히 건너뜁니다. 그런 다음 엔진은 확장 배열의 길이를 읽고 결과 배열에 대해 메모리를 한 번만 할당합니다. 그런 다음 배열은 인덱스별로 전파되어 결과 배열에 각 항목을 추가합니다. 🎜🎜빠른 경로 최적화는 반복 개체 생성을 건너뛰고 결과에 대한 메모리를 한 번만 할당합니다. 이로써 성능이 향상됩니다. 🎜map.keys() 및 map.values() 메서드 지원: 🎜rrreee[... array, item]가 [item, ...array]보다 최소 2배 빠른 성능을 발휘하는 것으로 나타났습니다. 🎜🎜빠른 경로는 확실히 유용하지만 성능이 중요하거나 대규모 배열을 처리할 때 사용하는 것이 좋습니다. 🎜🎜대부분의 경우 강제 최적화를 사용하면 최종 사용자가 아무런 차이를 느끼지 못할 가능성이 높기 때문입니다. 🎜🎜아래 댓글을 통해 알려주실 수 있는 JavaScript의 다른 흥미로운 성능 최적화에 대해 알고 계시나요? 🎜🎜글이 여러분에게 도움이나 영감을 줄 수 있다면 좋아요와 별에 인색하지 마세요. 그것이 제가 앞으로 나아갈 수 있는 원동력이자 가장 큰 긍정입니다🎜🎜🎜원본링크: https://dmitripavlutin .com/javascript-spread-operator -performance-optimization/🎜🎜🎜더 많은 프로그래밍 관련 지식을 보려면 🎜프로그래밍 비디오🎜를 방문하세요! ! 🎜위 내용은 자바스크립트에서 스프레드 연산자의 성능을 향상시키는 방법은 무엇입니까?의 상세 내용입니다. 자세한 내용은 PHP 중국어 웹사이트의 기타 관련 기사를 참조하세요!
![[웹 프런트엔드] Node.js 빠른 시작](https://img.php.cn/upload/course/000/000/067/662b5d34ba7c0227.png)
