Як я можу додати нові елементи масиву на початку масиву в Javascript?

У мене є необхідність додавати або додавати елементи на початку масиву.

Наприклад, якщо мій масив виглядає нижче:

[23, 45, 12, 67]

І відповідь на мій дзвінок AJAX 34: я хочу, щоб оновлений масив був таким:

[34, 23, 45, 12, 67]

В даний час я планую це зробити так:

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

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

theArray = newArray;
delete newArray;

Чи є кращий спосіб зробити це? Чи у Javascript є якась вбудована функціональність, яка це робить?

Складність мого методу полягає в тому, O(n)що було б цікаво побачити кращі втілення в життя.

Використовуйте unshift. Це як push, за винятком того, що додає елементи на початок масиву замість кінця.

• unshift/ push- додати елемент до початку / кінця масиву
• shift/ pop - видалити та повернути перший / останній елемент масиву

Проста схема ...

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

та діаграма:

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

Ознайомтеся з документацією на масив MDN . Практично кожна мова, яка має здатність натискати / виконувати елементи з масиву, також матиме можливість змінити / зміщувати (іноді називаються push_front/ pop_front) елементи, вам ніколи не доведеться їх реалізовувати самостійно.

Як зазначено в коментарях, якщо ви хочете уникнути мутації свого початкового масиву, ви можете використовувати concat, який об'єднує два або більше масивів разом. Ви можете використовувати це для функціонального натискання одного елемента на передню або задню частину наявного масиву; для цього вам потрібно перетворити новий елемент в єдиний масив елементів:

const array = [ 3, 2, 1 ]

const newFirstElement = 4

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

concatтакож можна додавати елементи. Аргументи до concatможуть бути будь-якого типу; вони неявно загорнуті в одноелементний масив, якщо вони вже не є масивом:

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 ]

За допомогою ES6 використовуйте оператор розкидання ...:

DEMO

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

console.log(arr)

Ще один спосіб зробити це через concat

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

Різниця між concatі unshiftполягає в тому, що concatповертає новий масив. Виступ між ними можна знайти тут .

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

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

Ось результат тесту

Швидка шпаргалка:

Терміни shift / unhift і push / pop можуть бути дещо заплутаними, принаймні для людей, які, можливо, не знайомі з програмуванням в C.

Якщо ви не знайомі з лінгвом, ось короткий переклад альтернативних термінів, який може бути простіше запам’ятати:

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

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

у вас є масив: var arr = [23, 45, 12, 67];

Щоб додати елемент до початку, потрібно використовувати splice:

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

Без мутації

Насправді всі unshift/ pushта shift/ pop мутують вихідний масив.

unshift/ pushДодати елемент до існуючого масиву з початку / кінця і shift/ popвидалити елемент з початку / кінця масиву.

Але є кілька способів додати елементи до масиву без мутації. результат - новий масив, який потрібно додати до кінця використання масиву нижче коду:

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

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

Щоб додати до початку вихідного масиву, використовуйте нижче код:

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

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

Вищенаведеним способом ви додаєте до початку / кінця масиву без мутації.

Використання ES6 деструктуризації: (уникнення мутації від вихідного масиву)

const newArr = [item, ...oldArr]

Якщо вам потрібно постійно вставляти елемент на початку масиву, швидше використовувати pushоператори, за якими слід виклик reverse, а не постійно дзвонити unshift.

Тест тестування: http://jsben.ch/kLIYf

Використовуючи spliceми вставляємо елемент до масиву на початку:

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