Fastest way to move first element to the end of an Array

JavascriptArraysElement

Javascript Problem Overview


I'm wondering what is the fastest way in JavaScript to move an element from the beginning of an Array to the end. For example if we have

[8,1,2,3,4,5,6,7]

And we want: [1,2,3,4,5,6,7,8]

I want to move the first element to the end. I was thinking about switching element 0 with element 1, after that switching element 1 with element 2 and so on until the 8 is at the and (basically how bubblesort works). I was wondering if there is a faster way to bring the first element to the end.

I will be using small Arrays (around 10 elements), and I want to avoid shift() since it's pretty slow.

This is what I have now on chrome it's 45% faster than normal shift+push: http://jsperf.com/shift-myfunc

The arrays will have objects in them for a game.

Javascript Solutions


Solution 1 - Javascript

Use the shift() and push() functions:

var ary = [8,1,2,3,4,5,6,7];
ary.push(ary.shift());  // results in [1, 2, 3, 4, 5, 6, 7, 8] 

Example:

var ary = [8,1,2,3,4,5,6,7];

console.log("Before: " + ary);

ary.push(ary.shift());  // results in [1, 2, 3, 4, 5, 6, 7, 8] 

console.log("After: " + ary);

Solution 2 - Javascript

Use shift and push

var a = ["a","b","c"];
var b = a.shift();
a.push(b);

or

var b = a.shift();
a[a.length] = b;

Edit Based on updated question

What is going to be the fastest? Really depends on content of the array and what browser/version!

Now what are the ways to remove the first index?

  • shift()
  • splice()
  • slice()

Now what are the ways to add to the last index?

  • push()
  • array[array.length]
  • concat() -- not even going to try

Other ways

  • for loop - make new array [going to be horrible on large arrays]

JSPerf:

http://jsperf.com/test-swapping-of-first-to-last


What is really the fastest?

What is the fastest really depends on what you are doing with the array. If you are just using the first index, it will be fastest just to make your code read an index and not shift the values. If you are using all the indexes, than just loop and through and when you get to the end start back at zero. Basic counters.

Solution 3 - Javascript

And here is a sweet ES6 version

let arr = [1,2,3,4,5,6]

const [first, ...rest] = arr;
arr = [...rest,first]

Solution 4 - Javascript

Use splice to get the first element

var first = array.splice(0,1);

Then push to make if the last.

Since the return value of the splice method is an array, you have to say

array.push(first[0]);

Working example here: JSFIDDLE

Solution 5 - Javascript

Just in case you want to put any element to the end:

var ary = [8,1,2,3,4,5,6,7];
ary.push(ary.splice(position, 1)[0]);

for position just wrap this in a forEach.

Solution 6 - Javascript

var a = [1,2,3,4,5,6,7,8];
var b= a[7];
var c = a.slice(1, 8);
c.push(b);

Edit: It's probably better to just shift, like epascarello did in his answer.

Solution 7 - Javascript

With ES20...

const newArr = [
   ...arr.slice(1),
   arr[0]
];

Solution 8 - Javascript

> one more flavour

var arr = [0, 1, 2];
arr = arr.concat(arr.shift())

> concat can add not just a element but another array at the end or beginning

Solution 9 - Javascript

Updating the arrays moving elements from one extreme to the other:

const array = ['First', 'Second', 'Third', 'Fourth'];

const next = [...array]
next.push(next.shift())
console.log(next); // [ 'Second', 'Third', 'Fourth', 'First' ]

const prev = [...array]
prev.unshift(prev.pop())
console.log(prev); // [ 'Fourth', 'First', 'Second', 'Third' ]

Attributions

All content for this solution is sourced from the original question on Stackoverflow.

The content on this page is licensed under the Attribution-ShareAlike 4.0 International (CC BY-SA 4.0) license.

Content TypeOriginal AuthorOriginal Content on Stackoverflow
QuestionBosiwowView Question on Stackoverflow
Solution 1 - Javascriptj08691View Answer on Stackoverflow
Solution 2 - JavascriptepascarelloView Answer on Stackoverflow
Solution 3 - JavascriptNicholasView Answer on Stackoverflow
Solution 4 - JavascriptFelipe FonsecaView Answer on Stackoverflow
Solution 5 - Javascriptartdias90View Answer on Stackoverflow
Solution 6 - JavascriptJeroenView Answer on Stackoverflow
Solution 7 - JavascriptMauro SalgadoView Answer on Stackoverflow
Solution 8 - JavascriptMohitGhodasaraView Answer on Stackoverflow
Solution 9 - JavascriptferalamilloView Answer on Stackoverflow