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: 10 months ago by: Registered User

Jump 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: 10 months ago)

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

Browser/OS: Chrome 118 on Windows

View result in a separate tab

Test name	Executions per second
[...]	179262.5 Ops/sec
length + push + ...	16287.2 Ops/sec
length + forEach + push	8233.4 Ops/sec
length + forEach + index	17120.5 Ops/sec
splice + push + ...	14428.6 Ops/sec
splice + forEach + push	7921.6 Ops/sec
splice + forEach + index	12073.5 Ops/sec
length + Object.assign	153.2 Ops/sec

Related benchmarks: