Run results for: Ways to copy an array

Run details:

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: Chrome 118

Operating system: Windows

Device Platform: Desktop

Date tested: one year ago

Test name	Executions per second
✓ [...]	179,263 Ops/sec
length + forEach + index	17,121 Ops/sec
length + push + ...	16,287 Ops/sec
splice + push + ...	14,429 Ops/sec
splice + forEach + index	12,074 Ops/sec
length + forEach + push	8,233 Ops/sec
splice + forEach + push	7,922 Ops/sec
length + Object.assign	153 Ops/sec

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;

Run results for: Ways to copy an array

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.

[...]

length + push + ...

length + forEach + push

length + forEach + index

splice + push + ...

splice + forEach + push

splice + forEach + index

length + Object.assign