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.

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

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

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