Benchmark: array item replacement performance comparisons

Script Preparation code:


var arr = Array.from({ length: 5000 }, (item, index) => index);

Tests:

Slice and splice
const changeIndex = 111; const newTestArray = arr.slice(); newTestArray.splice(changeIndex, 1, 8080);
Slice and concat
const changeIndex = 222; const newTestArray = arr.slice(0, changeIndex).concat(13, arr.slice(changeIndex + 1));
Slice and spread
const changeIndex = 333; const newTestArray = [ ...arr.slice(0, changeIndex), 42, ...arr.slice(changeIndex + 1)];
Spread and splice
const changeIndex = 444; const newTestArray = [...arr]; newTestArray.splice(changeIndex, 1, 1111);

Rendered benchmark preparation results:

Previous results

ⓘ Get performance results from real users on your website with Request Metrics.

Latest run results:

Run details: (Test run date: 2 years ago)

User agent: Mozilla/5.0 (Macintosh; Intel Mac OS X 10.15; rv:89.0) Gecko/20100101 Firefox/89.0

Browser/OS: Firefox 89 on Mac OS X 10.15

array item replacement performance comparisons (version: 0)