How to duplicate elements in a js array?

Question

Whats the easiest way (with \"native\" javascript) to duplicate every element in a javascript array?

The order matters.

For example:

Answer 1

I came up with something similar to tymeJV's answer

[2, 3, 1, 4].reduce(function (res, current, index, array) {
    return res.concat([current, current]);
}, []);

Answer 2

These functions may help see .sort(), .concat()

function duplicate(arr) {
    return arr.concat(arr).sort()
} 
console.log(duplicate([1,2,3,4,5]))

Answer 3

Lot of ways to add items to an array as seen above. I have compared it and you can view the performance by yourself in the console. Whatever is timed goes between the two "console.time"

console.clear();

function loopMyArray(){
 var loopArray = new Array(10000);
 for(var i = 0; i < loopArray.length; i++){
   loopArray[i] = i+1;
 }
 console.log(loopArray);
}
console.time('loopMyArray');
loopMyArray();
console.timeEnd('loopMyArray');

function fillArray(){
 let x = 0;
 let filledArray = new Array(10000).fill(null).map(()=> ++x);
 console.log(filledArray);
}

console.time('fillArray');
fillArray();
console.timeEnd('fillArray');

function keyMyArray(){
 let fromKeyArray = Array.from(Array(10000).keys());
 console.log(fromKeyArray);
}
console.time('keyMyArray');
keyMyArray();
console.timeEnd('keyMyArray');

function spreadKeysArray(){
 let spreadArray = [...Array(10000).keys()];
 console.log(spreadArray);
}
console.time('spreadKeysArray');
spreadKeysArray();
console.timeEnd('spreadKeysArray');

console.log(' Start from 1');

function mapKeyArray(){
 //let mapArray = ([...Array(1000).keys()].map(x => x++)); //increment after return
 let mapArray = [...Array(10000).keys()].map(x => ++x);
 console.log(mapArray);
}

console.time('mapKeyArray');
mapKeyArray();
console.timeEnd('mapKeyArray');

function sliceKeyArray(){
 let sliceFirstElementArray = [...Array(10000+1).keys()].slice(1);
 console.log(sliceFirstElementArray);
}
console.time('sliceKeyArray');
sliceKeyArray();
console.timeEnd('sliceKeyArray');

function calcFromLength(){
 let fromLengthArray = Array.from({length: 10000}, (v, k) => k+1);
 console.log(fromLengthArray);
}
console.time('calcFromLength');
calcFromLength();
console.timeEnd('calcFromLength');

console.log('======== add a double for every item ========');

function loopDoubleArray(){
 var first5000Array = [...Array(5000+1).keys()].slice(1);
 var double5000Array =[];

 for(var i = 0; i< first500Array.length;++i){
   double5000Array.push(first5000Array[i]);
   double5000Array.push(first5000Array[i]);
 }
 console.log(double5000Array);
}
console.time('loopDoubleArray');
loopDoubleArray(); // Whatever is timed goes between the two "console.time"
console.timeEnd('loopDoubleArray');

function mapDoubleArray(){
 // adding 1,1,2,2,3,3 etc
 let doubleArray = [...Array(10000).keys()].map(x => Math.floor(++x/2) + x%2);
 console.log(doubleArray);
}
console.time('mapDoubleArray');
mapDoubleArray();
console.timeEnd('mapDoubleArray');

function fromDoubleArray(){
 let fromDoubleArray = Array.from({length: 10000}, (v, x) => Math.floor(++x/2) + x%2);
 console.log(fromDoubleArray);
}
console.time('fromDoubleArray');
fromDoubleArray(); // Whatever is timed goes between the two "console.time"
console.timeEnd('fromDoubleArray');

function doubleSpreadArray(){
 let keyArray = [...Array(500+1).keys()].slice(1);
 let doubleSpreadArray = [...keyArray,...keyArray];
 console.log(doubleSpreadArray);
}
console.time('doubleSpreadArray');
doubleSpreadArray(); // Whatever is timed goes between the two "console.time"
console.timeEnd('doubleSpreadArray');

function reduceDoubleArray(){
 let reduceDoubleArray = Array.from({length: 5000}, (v, k) => k+1).reduce((m,i) => m.concat([i,i]), []);
 console.log(reduceDoubleArray);
}
console.time('reduceDoubleArray');
reduceDoubleArray(); // Whatever is timed goes between the two "console.time"
console.timeEnd('reduceDoubleArray');

I compared some speeds and it looks as if there are not so many differences. The speed(in ms for 10000 items) of calculation between map, slice and from are not so different (slice one seems a bit better). Using reduce in the calculation for double items array is way more slower then the rest of methods

| mapMyArray     | 5,342041016 | 5,21484375  | 8,424804688 | 5,516113281 |
| sliceKeyArray  | 5,221191406 | 4,854248047 | 6,069091797 | 4,940185547 |
| calcFromLength | 6,156005859 | 5,988037109 | 6,031982422 | 6,739990234 |

Answer 4

how 'bout that?

for (i=a.length-1;i>=0;i--)a.splice(i,0,a[i]);

iterating backwards is undervalued, in this case it keeps the index intact ;)

Answer 5

I suppose you could do:

var duplicated = a.map(function(item) {
    return [item, item];
}).reduce(function(a, b) { return a.concat(b) });

//duplicated: [2, 2, 3, 3, 1, 1, 4, 4]

Answer 6

Basically:

a = [2, 3, 1, 4];
b=[];

for(var i = 0; i< a.length;++i){
  b.push(a[i]);
  b.push(a[i]);
}

a=b;