Is it better to merge arrays with concat or extension operators?

let arr1 = [1, 2];
let arr2 = [3, 4];
// concat
arr1 = arr1.concat(arr2);
// 
arr1 = [...arr1, ...arr2];
// 
arr1.push(...arr2);

which is better and why? Performance?

Javascript
Feb.24,2022

which one to use or according to your actual needs

concat is available when es5 . The advantage is that compatibility is high, and there is no need to translate
. is a new syntax of es6 . simplifies writing, and the code looks more concise and intuitive, but in fact, it only does encapsulation , and the underlying layer is still using the original method. The following is the result of babel translation

.

the second way to write 

arr1 = [...arr1, ...arr2];
   
function _toConsumableArray(arr) {
 if (Array.isArray(arr)) { 
   for (var i = 0, arr2 = Array(arr.length); i < arr.length; iPP) { arr2[i] = arr[i]; } return arr2; 
   } else { return Array.from(arr); }
}
arr1 = [].concat(_toConsumableArray(arr1), arr2);

the third way to write 

arr1.push(...arr2);
   
arr1.push.apply(arr1, arr2);

Let's take a look at the time taken by the three writing methods to deal with different amounts of data (the data is 10100 respectively) unit: ten thousand 

num:10000
 s1: 0.01813671875ms
 s2: 0.1808984375ms
 s3: 0.078857421875ms

num:100000
 s1: 0.8310546875ms
 s2: 10.428955078125ms
 s3: 8.025146484375ms

num:1000000
s1: 11.42724609375ms
s2: 83.867919921875ms
s3: Maximum call stack size exceeded

Summary:
concat performance
there is no significant difference among the three when the amount of data is extremely small
when there is a certain amount of data, the performance of concat is far ahead of arr1 = [.arr1, .arr2] and arr1.push (.arr2)
when the data is too large, the third method will lead to heap because of the characteristics of apply .

first take a look at the differences between the three ways you mentioned:

this difference exists in two environments:

  • first, your actual environment is still that of es5, so take a look at how babel handles it.

you use babel to convert es5 to look at the extension operator

[.arr1, .arr2] = > [] .concat (arr1, arr2)

arr1.push (.arr2) = > arr1.push.apply (arr1, arr2)

in the case of this difference, you can see the benefits of
: the extension operator looks more intuitive, more readable, and calls less api, and is concise.
performance: you may need to make an evaluation, but I didn't do this,

  • second: your actual environment already supports the extension operator, that is, it is natively implemented, so

benefit: everyone uses this to improve your image in other front ends. You are a person who keeps pace with the times and will not be eliminated.
performance: find an environment that supports this syntax and test it, such as node environment

in addition, you can also judge the performance by some common comparison methods.
for example, you can evaluate it by connecting 100 million elements to an array and looking at the time spent in different ways;
you can do this yourself.

The second way of writing

creates a new array. (no matter how the js engine optimizes the extension operator) the performance will definitely be poor.
the third way of writing is because push is recursive, so the performance is also poor (errors will be reported if there is too much data)

Previous: Android layout, how can this protruding dot be added to my layout?

Next: How to achieve smooth scrolling of webApp in the case of nested routing components

css mysql arrays josn react html typescript webpack npm sass R objective-c .net sql-server jquery python-3.x angularjs django angular excel regex iphone ajax linux xml pandas vba spring database wordpress string wpf xcode windows bash postgresql oracle multithreading eclipse list firebase algorithm macos forms image scala visual-studio azure bootstrap spring-boot react-native python-2.7 docker performance function winforms matlab powershell apache dataframe api sqlite numpy rest shell selenium flutter dart maven loops qt swing android-studio csv express file class tensorflow sorting codeigniter perl
© 2021 CodesHelper
Advertising Contact us About us
Menu