Как я могу добавить новые элементы массива в начале массива в Javascript?

1176

Мне нужно добавить или добавить элементы в начале массива.

Например, если мой массив выглядит следующим образом:

[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) и было бы действительно интересно увидеть лучшие реализации.

  • 6
    К сведению: если вам нужно непрерывно вставлять элемент в начале массива, быстрее использовать операторы push последующим вызовом reverse , вместо того чтобы постоянно вызывать unshift .
  • 2
    @ JennyO'Reilly, ты должен опубликовать это как ответ. Идеально подходит для моего варианта использования. Спасибо
Теги:
arrays

13 ответов

2315
Лучший ответ

Используйте 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 Array. Практически каждый язык, который имеет возможность выталкивать/выталкивать элементы из массива, также имеет возможность смещать/сдвигать (иногда называемые push_front/pop_front) элементы, вам никогда не придется реализовывать их самостоятельно.

  • 37
    Использование concat может быть предпочтительнее, так как он возвращает новый массив. Очень полезно для цепочки. [thingToInsertToFront].concat(originalArray).reduce(fn).reverse().map(fn) т. д. ... Если вы используете unshift , вы не можете сделать это цепочкой, потому что все, что вы получите, это длина.
  • 3
    Shift / Unshift, Push / Pop, соединение. Очень логичные названия для таких методов.
1225

Изображение 2162

var a = [23, 45, 12, 67];
a.unshift(34);
console.log(a); // [34, 23, 45, 12, 67]
  • 98
    Причина, по которой людям нужны визуальные ориентиры для 4-х используемых ежедневно функций, заключается в зашифрованных именах функций ... Почему unshift не называется Insert? Сдвиг должен быть Удалить. так далее...
  • 70
    // Почему unshift не называется Insert? // Это происходит из соглашений языка программирования C, где элементы массива обрабатываются как стек. (полное объяснение см. на perlmonks.org/?node_id=613129 )
Показать ещё 7 комментариев
151

С помощью ES6 используйте оператор распространения ...:

DEMO

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

console.log(arr)
  • 15
    также создает новый массив, полезный для чистых функций
  • 0
    Какое значение здесь имеет производительность? Это медленнее, чем использование unshift ()?
Показать ещё 2 комментария
60

Другой способ сделать это через 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)
}

Вот результат теста

Изображение 2163

  • 0
    Для вашего ответа было бы неплохо добавить сравнение производительности обоих, кроме добавления ссылки.
  • 0
    Я только что получил jsPerf временно недоступен, пока мы работаем над выпуском v2. Пожалуйста, попробуйте позже по ссылке. Еще одна веская причина, чтобы включить результаты вместо ссылки на них.
Показать ещё 5 комментариев
43

Quick Cheatsheet:

Термины shift/unshift и 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 ) 
14

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

Чтобы добавить элемент в начало, вы хотите использовать splice:

var arr = [23, 45, 12, 67];
arr.splice(0, 0, 34)
console.log(arr);
  • 0
    arr.splice (0, длина луча, 34);
  • 1
    @LiorElrom что делает твой фрагмент?
Показать ещё 2 комментария
9

push() добавляет новый элемент в конец массива.
pop() удаляет элемент из конца массива.

unshift() добавляет новый элемент в начало массива.
shift() удаляет элемент из начала массива.

используйте theArray.unshift(response)

5

var testdata = new Array();
testdata = [23, 45, 12, 67];
testdata = [34, ...testdata]; 
console.log(testdata)
    
  • 0
    Это тот же ответ, что и Abdennour TOUMI
3

Если вам нужно постоянно вставлять элемент в начале массива, быстрее использовать push операторы, за которыми следует вызов для reverse вызова, а не для вызова unshift все время.

Тест производительности: http://jsben.ch/kLIYf

2

У нас есть функция, называемая unshift в javascript для добавления элемента в начало массива.

var a = ["a1","a2","a3"];
a.unshift("a0"); // add element in array of first position
console.log(a)
a.shift("a0"); // remove element in array of first position
console.log(a);
a.push("a0"); // add element in array of last position
console.log(a);
a.pop("a0"); // remove element in array of last position
console.log(a); 
1

Без мутирования

На самом деле, все unshift/push и shift/pop мутировать массив происхождения.

unshift/push добавляет элемент в существующий массив из начала/конца, а shift/pop удаляет элемент из начала/конца массива.

Но есть способ добавлять элементы в массив без мутации. В результате получается новый массив, который нужно добавить в конец массива, используя следующий код:

const originArray = ['one', 'two', 'three'];
const newItem = 4;
const newArray = originArray.concat(newItem);

Для добавления в начало оригинального массива используйте код ниже:

const originArray = ['one', 'two', 'three'];
const newItem = 0;
const newArray = (originArray.reverse().concat(newItem)).reverse();

Вышеописанным способом вы добавляете в начало/конец массива без мутации.

-1

Используя push, splice и index number, мы сначала вставляем элемент в массив

arrName.push('newName1');
arrName.splice(0, 0,'newName1');
arrName[0] = 'newName1';
-2

Вот простое решение, в котором вы выбираете элемент из списка и перемещаете его вверх.

private moveUserUp(managedList: ISelectOption[]): ISelectOption[] {
        this.getUser = managedList.filter(fetchName => fetchName.name === 
        "Myself"); //fetching the item from the list that needs to be on top 
        managedList = managedList.filter(item => item.name !== "Myself");
        //removing the item from the list
        var selectedUserDetails = <App.Controls.ISelectOption>
        {
            id: this.getUser[0].id,
            name: this.getUser[0].name
        };
        managedList.unshift(selectedUserDetails); 
        //adding the item at the top
        return managedList;
    }

Ещё вопросы

Сообщество Overcoder
Наверх
Меню