Benchmark: Ways to copy an array

Ways to copy an array (version: 1)

Reactive arrays cannot be completely changed in VueJS. We need to change the elements. Here are ways to do this without losing reactivity. The first test is a reference test and is not applicable for reactive arrays.

Comparing performance of: `[...] vs length + push + ... vs length + forEach + push vs length + forEach + index vs splice + push + ... vs splice + forEach + push vs splice + forEach + index vs length + Object.assign`

Created: one year ago by: Registered User

Go to the latest result

Script Preparation code:

const source1 = Array.from({length: 10_000}, () => Math.floor(Math.random() * 10_000_000));
const source2 = Array.from({length: 20_000}, () => Math.floor(Math.random() * 10_000_000));

Tests:

[...]
let result = source1; result = [...source2]; return result;
length + push + ...
const result = source1; result.length = 0; result.push(...source2); return result;
length + forEach + push
const result = source1; result.length = 0; source2.forEach(x => result.push(x)); return result;
length + forEach + index
const result = source1; result.length = 0; result.length = source2.length; source2.forEach((x, i) => (result[i] = x)); return result;
splice + push + ...
const result = source1; result.splice(0); result.push(...source2); return result;
splice + forEach + push
const result = source1; result.splice(0); source2.forEach(x => result.push(x)); return result;
splice + forEach + index
const result = source1; result.splice(0); result.length = source2.length; source2.forEach((x, i) => (result[i] = x)); return result;
length + Object.assign
const result = source1; result.length = 0; Object.assign(result, source2); return result;

Rendered benchmark preparation results:

Suite status: <idle, ready to run>

Previous results

Test case name	Result
[...]
length + push + ...
length + forEach + push
length + forEach + index
splice + push + ...
splice + forEach + push
splice + forEach + index
length + Object.assign

Fastest: N/A

Slowest: N/A

Latest run results:

Run details: (Test run date: one month ago)

User agent: Mozilla/5.0 (Windows NT 10.0; Win64; x64) AppleWebKit/537.36 (KHTML, like Gecko) Chrome/132.0.0.0 Safari/537.36

Browser/OS: Chrome 132 on Windows

View result in a separate tab

[...]

127K/s

length + push + ...

12K/s

length + forEach + index

11K/s

splice + push + ...

10K/s

splice + forEach + index

9K/s

length + forEach + push

6K/s

splice + forEach + push

5K/s

length + Object.assign

110/s

View exact numbers

Test name	Executions per second
✓ [...]	126,711 Ops/sec
length + push + ...	12,001 Ops/sec
length + forEach + index	11,125 Ops/sec
splice + push + ...	10,009 Ops/sec
splice + forEach + index	9,192 Ops/sec
length + forEach + push	6,414 Ops/sec
splice + forEach + push	5,132 Ops/sec
length + Object.assign	110 Ops/sec