var params = [ "hello", true, 1, { foo: 'bar' } ];
var concat = (input) => [].concat(params);
var push = (input) => [].push(input);
var concatApply = (input) => Array.prototype.concat.apply([], input);
var pushApply = (input) => Array.prototype.push.apply([], input);
var spread = (input) => [input];
const result = concat(params);
const result = push(params);
const result = concatApply(params);
const result = pushApply(params);
const result = spread(params);
--enable-precise-memory-info
flag.
Test case name | Result |
---|---|
Array.prototype.concat | |
Array.prototype.push spread | |
Array.prototype.concat.apply | |
Array.prototype.push.apply | |
Spread |
Test name | Executions per second |
---|---|
Array.prototype.concat | 3542806.0 Ops/sec |
Array.prototype.push spread | 4535958.5 Ops/sec |
Array.prototype.concat.apply | 1586129.5 Ops/sec |
Array.prototype.push.apply | 2686974.5 Ops/sec |
Spread | 5354829.5 Ops/sec |
Let's break down the provided benchmark and explain what's being tested.
Benchmark Overview
The benchmark compares four ways to concatenate or spread arrays in JavaScript:
Array.prototype.concat
Array.prototype.push
with the spread operator (...
)Array.prototype.concat.apply
Array.prototype.push.apply
These methods are used to add one or more arrays (or values) to the end of another array.
Benchmark Definition
The benchmark definition json provides some context:
concat
, push
, concatApply
, and pushApply
.params
and concatenate/spread it using different methods.Test Cases
The individual test cases are defined as:
Array.prototype.concat
: Calls the concat
function with the params
array as input.Array.prototype.push spread
: Calls the push
function with the ...
operator on the params
array as input.Array.prototype.concat.apply
: Calls the concatApply
function with the apply
method on the Array.prototype.concat
function, passing an empty array and the params
array as input.Array.prototype.push.apply
: Calls the pushApply
function with the apply
method on the Array.prototype.push
function, passing an empty array and the params
array as input.Spread
: Calls the spread
function with the ...
operator on the params
array as input.Library Usage
The benchmark uses the following library:
Special JS Features or Syntax
This benchmark doesn't use any special JavaScript features or syntax beyond the spread operator (...
). However, it does rely on the apply
method, which is a non-standard feature in some browsers.
Pros and Cons of Different Approaches
Here's a brief overview of the pros and cons of each approach:
Array.prototype.concat
:Array.prototype.push spread
:Array.prototype.concat.apply
:Array.prototype.push.apply
:Other Alternatives
Some alternative ways to concatenate or spread arrays in JavaScript include:
reduce
method:arr.concat([...params]);
let result = [];
for (let i of params) {
result.push(i);
}
result;
map
function:params.map((item) => {
// do something with item
});
Note that these alternatives may have different performance characteristics and are not necessarily better or worse than the methods tested in this benchmark.