var existing = [ 1, 2, "hello", true, 7 ];
var newi = 1;
var other = existing.concat([newi]);
var other = [ existing, newi ];
var other = existing.concat().push(newi);
existing.push(newi);
--enable-precise-memory-info
flag.
Test case name | Result |
---|---|
Array.prototype.concat | |
spread operator | |
copy on push | |
directly push |
Test name | Executions per second |
---|---|
Array.prototype.concat | 10465505.0 Ops/sec |
spread operator | 10813093.0 Ops/sec |
copy on push | 6784341.0 Ops/sec |
directly push | 14048991.0 Ops/sec |
The provided JSON represents a JavaScript benchmark test case, specifically comparing the performance of three different approaches for concatenating an array: Array.prototype.concat
, the spread operator (...
), and pushing elements to an existing array.
Let's break down each option:
Pros: Simple, straightforward approach that works well with large arrays. Cons: Creates a new array instance, which can be memory-intensive for very large datasets.
...
): Introduced in ECMAScript 2015 (ES6), this operator allows you to expand an iterable (like an array) into individual elements.Pros: More efficient than concat()
since it doesn't create a new array instance; it uses native CPU instructions.
Cons: Requires modern JavaScript versions (ES6+) and may not work in older browsers or environments.
Pros: Similar to concat()
, as it also creates a new array instance; however, it might be faster than concat()
since it avoids the overhead of creating an entirely new array.
Cons: Creates an additional memory allocation for the copied array.
The benchmark test case includes four test cases:
Array.prototype.concat
: The traditional method of concatenating arrays.spread operator
: The spread operator approach, which is more efficient than concat()
.copy on push
: A hybrid approach that creates a copy of the existing array before pushing the new element.directly push
: This test case is not directly related to the original question but seems to be an error in the benchmark. It likely compares performance to other methods, such as push()
.The latest benchmark results show the performance of each approach on Safari 16 running on a Mac with Intel Mac OS X 10.15.7:
Test Name | ExecutionsPerSecond |
---|---|
directly push | 14048991.0 (very high) |
spread operator | 10813093.0 |
Array.prototype.concat | 10465505.0 |
copy on push | 6784341.0 |
The results suggest that:
directly push
is the fastest, likely due to its direct manipulation of the array's internal buffer.concat()
.copy on push
is slower than concat()
and the spread operator.Keep in mind that these results may vary depending on other factors, such as system resources, browser version, and JavaScript engine optimizations.
Other alternatives to consider:
: Some modern browsers (e.g., Chrome) support
pushAll()` method, which pushes multiple elements at once. However, this method may not be widely supported across all browsers and versions.Please note that JavaScript performance optimizations can be complex and depend on various factors, including browser implementation, system resources, and specific use cases. These results should be considered in the context of a benchmark test case, rather than as absolute truths for every situation.