Comment puis-je ajouter de nouveaux éléments de tableau au début d'un tableau en Javascript?

J'ai besoin d'ajouter ou d'ajouter des éléments au début d'un tableau.

Par exemple, si mon tableau ressemble à ci-dessous:

[23, 45, 12, 67]

Et la réponse de mon appel AJAX est 34, je veux que le tableau mis à jour soit comme suit:

[34, 23, 45, 12, 67]

Actuellement, je prévois de le faire comme ceci:

var newArray = [];
newArray.push(response);

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

theArray = newArray;
delete newArray;

Y a-t-il une meilleure façon de procéder? Javascript a-t-il une fonctionnalité intégrée qui le fait?

La complexité de ma méthode est O(n)et il serait vraiment intéressant de voir de meilleures implémentations.

Utilisez unshift. C'est comme push, sauf qu'il ajoute des éléments au début du tableau au lieu de la fin.

• unshift/ push- ajoute un élément au début / fin d'un tableau
• shift/ pop - supprime et retourne le premier / dernier élément d'un tableau

Un schéma simple ...

   unshift -> array <- push
   shift   <- array -> pop

et graphique:

          add  remove  start  end
   push    X                   X
    pop           X            X
unshift    X             X
  shift           X      X

Consultez la documentation de la baie MDN . Pratiquement tous les langages qui ont la capacité de pousser / pop des éléments d'un tableau auront également la possibilité de décaler / déplacer (parfois appelés push_front/ pop_front) des éléments, vous ne devriez jamais avoir à les implémenter vous-même.

Comme indiqué dans les commentaires, si vous souhaitez éviter de muter votre tableau d'origine, vous pouvez utiliser concat, qui concatène deux tableaux ou plus ensemble. Vous pouvez l'utiliser pour pousser fonctionnellement un seul élément à l'avant ou à l'arrière d'un tableau existant; pour ce faire, vous devez transformer le nouvel élément en un seul tableau d'éléments:

const array = [ 3, 2, 1 ]

const newFirstElement = 4

const newArray = [newFirstElement].concat(array) // [ 4, 3, 2, 1 ]

concatpeut également ajouter des éléments. Les arguments de concatpeuvent être de tout type; ils sont implicitement enveloppés dans un tableau à un seul élément, s'ils ne sont pas déjà un tableau:

const array = [ 3, 2, 1 ]

const newLastElement  = 0

// Both of these lines are equivalent:
const newArray1 = array.concat(newLastElement)   // [ 3, 2, 1, 0 ]
const newArray2 = array.concat([newLastElement]) // [ 3, 2, 1, 0 ]

Avec ES6, utilisez l'opérateur d'étalement ...:

DEMO

var arr = [23, 45, 12, 67];
arr = [34, ...arr]; // RESULT : [34,23, 45, 12, 67]

console.log(arr)

Une autre façon de le faire grâce à concat

var arr = [1, 2, 3, 4, 5, 6, 7];
console.log([0].concat(arr));

La différence entre concatet unshiftest que concatrenvoie un nouveau tableau. La performance entre eux peut être trouvée ici .

function fn_unshift() {
  arr.unshift(0);
  return arr;
}

function fn_concat_init() {
  return [0].concat(arr)
}

Voici le résultat du test

Cheatsheet rapide:

Les termes shift / unshift et push / pop peuvent être un peu déroutants, du moins pour les personnes qui ne sont pas familières avec la programmation en C.

Si vous n'êtes pas familier avec le jargon, voici une traduction rapide de termes alternatifs, qui peuvent être plus faciles à retenir:

* array_unshift()  -  (aka Prepend ;; InsertBefore ;; InsertAtBegin )     
* array_shift()    -  (aka UnPrepend ;; RemoveBefore  ;; RemoveFromBegin )

* array_push()     -  (aka Append ;; InsertAfter   ;; InsertAtEnd )     
* array_pop()      -  (aka UnAppend ;; RemoveAfter   ;; RemoveFromEnd ) 

vous avez un tableau: var arr = [23, 45, 12, 67];

Pour ajouter un élément au début, vous souhaitez utiliser splice:

var arr = [23, 45, 12, 67];
arr.splice(0, 0, 34)
console.log(arr);

Sans mutate

En fait, tout unshift/ pushet shift/ pop mute le tableau d'origine.

Le unshift/ pushajouter un élément au tableau existant de début / fin et shift/ popsupprimer un élément du début / fin d'un tableau.

Mais il existe peu de façons d'ajouter des éléments à un tableau sans mutation. le résultat est un nouveau tableau, à ajouter à la fin du tableau, utilisez le code ci-dessous:

const originArray = ['one', 'two', 'three'];
const newItem = 4;

const newArray = originArray.concat(newItem); // ES5
const newArray2 = [...originArray, newItem]; // ES6+

Pour ajouter au début du tableau d'origine, utilisez le code ci-dessous:

const originArray = ['one', 'two', 'three'];
const newItem = 0;

const newArray = (originArray.slice().reverse().concat(newItem)).reverse(); // ES5
const newArray2 = [newItem, ...originArray]; // ES6+

Avec la méthode ci-dessus, vous ajoutez au début / à la fin d'un tableau sans mutation.

Utilisation de la déstructuration ES6: (en évitant la mutation hors du tableau d'origine)

const newArr = [item, ...oldArr]

Si vous devez insérer un élément en continu au début d'un tableau, il est plus rapide d'utiliser des pushinstructions suivies d'un appel à reverse, au lieu d'appeler unshifttout le temps.

Test de référence: http://jsben.ch/kLIYf

En utilisant splicenous insérons un élément dans un tableau au début:

arrName.splice( 0, 0, 'newName1' );