Jak mogę dodać nowe elementy tablicy na początku tablicy w JavaScript?

Mam potrzebę dodania lub dodania elementów na początku tablicy.

Na przykład, jeśli moja tablica wygląda jak poniżej:

[23, 45, 12, 67]

Odpowiedź z mojego wywołania AJAX brzmi 34: chcę, aby zaktualizowana tablica wyglądała następująco:

[34, 23, 45, 12, 67]

Obecnie planuję to zrobić w następujący sposób:

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

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

theArray = newArray;
delete newArray;

Czy jest na to lepszy sposób? Czy Javascript ma jakieś wbudowane funkcje, które to robią?

Złożoność mojej metody jest O(n)i byłoby naprawdę interesujące zobaczyć lepsze implementacje.

Zastosowanie unshift. To jest tak push, że dodaje elementy na początku tablicy zamiast na końcu.

• unshift/ push- dodaj element na początku / końcu tablicy
• shift/ pop - usuń i zwróć pierwszy / ostatni element tablicy

Prosty schemat ...

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

i wykres:

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

Sprawdź dokumentację macierzy MDN . Praktycznie każdy język, który ma możliwość wypychania / wyskakiwania elementów z tablicy, będzie miał również możliwość cofania / zmiany (czasem nazywanych push_front/ pop_front) elementów, nigdy nie powinieneś ich implementować.

Jak wskazano w komentarzach, jeśli chcesz uniknąć mutowania oryginalnej tablicy, możesz użyć concat, która łączy dwie lub więcej tablic razem. Możesz użyć tego, aby funkcjonalnie popchnąć pojedynczy element na przód lub tył istniejącej tablicy; aby to zrobić, musisz przekształcić nowy element w tablicę z jednym elementem:

const array = [ 3, 2, 1 ]

const newFirstElement = 4

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

concatmoże również dodawać elementy. Argumenty concatmogą być dowolnego typu; są domyślnie opakowane w tablicę jednoelementową, jeśli nie są już tablicą:

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 ]

W przypadku ES6 użyj operatora rozkładania ...:

PRÓBNY

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

console.log(arr)

Kolejny sposób to zrobić concat

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

Różnica między concati unshiftpolega na tym, że concatzwraca nową tablicę. Występ między nimi można znaleźć tutaj .

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

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

Oto wynik testu

Szybki ściąg:

Terminy shift / unshift i push / pop mogą być nieco mylące, przynajmniej dla osób, które mogą nie znać programowania w C.

Jeśli nie znasz języka lingo, oto szybkie tłumaczenie alternatywnych terminów, które mogą być łatwiejsze do zapamiętania:

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

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

masz tablicę: var arr = [23, 45, 12, 67];

Aby dodać element na początku, chcesz użyć splice:

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

Bez mutacji

Właściwie wszystko unshift / pushi shift/ pop mutują tablicę początkową.

unshift/ pushDodać element do istniejącej tablicy od rozpoczęcia / zakończenia i shift/ popusunąć element z początku / końca tablicy.

Ale istnieje kilka sposobów dodawania elementów do tablicy bez mutacji. wynikiem jest nowa tablica, aby dodać na końcu tablicy użyj poniższego kodu:

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

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

Aby dodać na początek oryginalnej tablicy, użyj poniższego kodu:

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

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

W powyższy sposób dodajesz na początku / na końcu tablicy bez mutacji.

Korzystanie z destrukcji ES6: (unikanie mutacji oryginalnej tablicy)

const newArr = [item, ...oldArr]

Jeśli musisz ciągle wstawiać element na początku tablicy, szybciej jest używać pushinstrukcji, a następnie wywoływać reverse, zamiast wywoływaćunshift cały czas.

Test porównawczy: http://jsben.ch/kLIYf

Za pomocą splicewstawiamy element do tablicy na początku:

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