var vertices = [
[1, 0, 0, 0],
[0, 1, 0, 0],
[0, 0, 1, 0],
[0, 0, 0, 1],
]
var myCopy = null;
myCopy = JSON.parse(JSON.stringify(vertices));
myCopy = vertices.slice();
myCopy = Array.from(vertices)
myCopy = [vertices]
myCopy = structuredClone(vertices)
--enable-precise-memory-info
flag.
Test case name | Result |
---|---|
JSON.stringify | |
slice | |
Array from | |
Spread | |
structuredClone |
Test name | Executions per second |
---|---|
JSON.stringify | 723909.2 Ops/sec |
slice | 27469528.0 Ops/sec |
Array from | 10357910.0 Ops/sec |
Spread | 13356070.0 Ops/sec |
structuredClone | 366717.7 Ops/sec |
Let's dive into the benchmark and explore what's being tested, compared, and their pros and cons.
Benchmark Overview
The benchmark measures the performance of different methods for creating a copy of an array in JavaScript:
JSON.stringify
slice()
Array.from()
[...vertices]
)structuredClone
Library and Special JS Feature
None of these methods rely on any specific library or special JavaScript feature. They are all built-in or widely supported by most modern browsers.
Benchmark Preparation Code
The script preparation code initializes an array vertices
with four 3D vertices, which will be used as input for the benchmarking tests.
Individual Test Cases
Each test case measures the performance of a specific method for creating a copy of the vertices
array. The methods being tested are:
JSON.stringify
: Converts the entire array to a string using JSON serialization.slice()
: Creates a shallow copy of the array by copying its elements one by one.Array.from()
: Creates a new array from an iterable (in this case, the vertices
array).[...vertices]
): Spreads the elements of the vertices
array into a new array using the spread syntax.structuredClone
: A relatively new method introduced in ECMAScript 2022, which creates a deep copy of an object or array.Comparison and Performance
The benchmark measures the execution frequency per second (in executions per second) for each test case across multiple browsers and devices. The results show that:
slice()
is the fastest way to create a shallow copy of an array.[...vertices]
) is comparable in performance to Array.from()
, but slightly slower than slice()
.structuredClone
is significantly faster than JSON.stringify
, making it a good choice for deep copying arrays.Array.from()
is slower than both slice()
and the spread operator.Pros and Cons
Here's a brief summary of the pros and cons of each method:
slice()
and the spread operator.[...vertices]
):Alternatives
If you need to create a deep copy of an array, structuredClone
is likely the best choice. For shallow copying, slice()
or the spread operator are good options. If you're targeting older browsers, Array.from()
might be a suitable alternative.
Keep in mind that these results may vary depending on your specific use case and requirements. It's essential to consider factors like array size, performance criticality, and compatibility with different browsers when choosing an approach.