Как добавить элемент в массив JS: 5 способов

Добро пожаловать в краткое руководство о том, как добавлять элементы в массив Javascript. Создание нового массива – дело простое, но добавление элементов в существующий массив может быть довольно запутанным.

Существует несколько различных способов добавления элементов в массив в Javascript. Давайте рассмотрим их.

Функция push()

Как и во введении выше, функция push() используется для добавления элементов в конец существующего массива. Да, обратите внимание, что мы можем добавлять несколько элементов одновременно.

// (A) PUSH - ADD TO END
var arr = ["First", "Second"];
arr.push("Third");
console.table(arr); // First, Second, Third

// (B) WE CAN ALSO ADD MULTIPLE AT ONCE
arr.push("Forth", "Fifth");
console.table(arr); // First, Second, Third, Forth, Fifth

Как и во введении выше, функция push() используется для добавления элементов в конец существующего массива.

Функция unshift()

// (A) UNSHIFT - ADD TO FRONT
var arr = ["First", "Second"];
arr.unshift("Third");
console.table(arr); // Third, First, Second

// (B) WE CAN ALSO ADD MULTIPLE AT ONCE
arr.unshift("Forth", "Fifth");
console.table(arr); // Forth, Fifth, Third, First, Second

Функция unshift() похожа на push(). Она добавляет элементы в начало массива, а не в конец. Также мы можем использовать ее для добавления нескольких элементов одновременно.

Оператор присваивания

var arr = ["First", "Second"];
arr[arr.length] = "Third";
console.table(arr); // First, Second, Third

Это альтернатива функции push(). Как вы уже знаете, мы можем использовать ARRAY[N] = VALUE непосредственно для замены или вставки элемента. Таким образом, ARRAY[ARRAY.length] = VALUE просто добавит новый элемент в конец массива.

Функция concat()

// (A) TWO DIFFERENT ARRAYS
var arrA = ["First", "Second"];
var arrB = ["Third", "Forth"];
 
// (B) CONCAT COMBINE
var combined = arrA.concat(arrB);
console.table(combined); // First, Second, Third, Forth

Как вы уже знаете, мы можем объединить две строки вместе – либо используя оператор +, либо функцию concat(). Да, мы также можем использовать функцию concat() для массивов, чтобы объединить их.

Небольшое замечание: мы также можем использовать оператор + для массивов, ARRAY A + ARRAY B. Но в результате мы получим строку с “сплющенным массивом”. В приведенном выше примере это будет выглядеть так: First,SecondThird,Forth.

Дополнительно: добавление массива в строку

// (A) AN ARRAY
var elements = ["Wind", "Water", "Fire", "Earth"];

// (B) JOIN ARRAY INTO STRING
var quote = elements.join(" ");
console.log(quote); // Wind Water Fire Earth

// WE CAN ALSO SPECIFY THE "JOINTS"
// quote = elements.join("-");
// console.log(quote); // Wind-Water-Fire-Earth

// (C) COMPLETE THE STORY
quote += ". Long ago, the four nations lived together in harmony.";
console.log(quote); // Wind Water Fire Earth. Long ago...

Если вы хотите “объединить” массив в строку, используйте функцию join(). Очень удобно, если вы хотите превратить массив в строку.

Функция splice()

// (A) ONE PARAMETER
var arr = ["First", "Second", "Third", "Forth", "Fifth"];
arr.splice(2); // keep first 2 elements
console.table(arr); // First, Second

// (B) TWO PARAMETERS
arr = ["First", "Second", "Third", "Forth", "Fifth"];
arr.splice(1, 2); // remove 2 elements from index 1
console.table(arr); // First, Forth, Fifth

// (C) THREE OR MORE PARAMETERS
// (C1) INSERT SINGLE
arr = ["First", "Second", "Third"];
arr.splice(1, 0, "FOO"); // insert "foo" at index 1
console.table(arr); // First, FOO, Second, Third
 
// (C2) INSERT MULTIPLE
arr = ["First", "Second", "Third"];
arr.splice(1, 0, "FOO", "BAR"); // insert "foo", "bar" at index 1
console.table(arr); // First, FOO, BAR, Second, Third
 
// (C3) REPLACE
arr = ["First", "Second", "Third"];
arr.splice(0, 2, "FOO"); // remove 2 elements from index 0, then insert "foo"
console.table(arr); // FOO, Third

Наконец, функция splice() – довольно запутанная, но в то же время очень полезная.

• Когда мы вводим один параметр, splice(N) сохранит N количество элементов от начала массива. То есть останутся только ARRAY[0] – ARRAY[N-1]. Однако это не то, что мы хотим
• Когда мы вводим два параметра, splice(N, M) удалит M элементов из массива, начиная с ARRAY[N]. Это тоже не то, чего мы хотим.
• Наконец, splice(N, M, O, O, …) – это то, что мы рассматриваем. Так же, как и выше, это удалит M элементов, начиная с ARRAY[N], а затем заменит их на O. Но если мы установим M равным 0, никакие элементы не будут удалены – это будет действовать как “вставка между”.

Резюме

Давайте подытожим информацию выше:

• ARRAY.push(“ELEMENT”) добавит элемент в конец массива
• ARRAY.unshift(“ELEMENT”) добавит элемент в начало массива
• ARRAY[ARRAY.length] = “ELEMENT” действует так же, как push, и добавит массив в конец
• ARRAYA.concat(ARRAYB) соединит два массива вместе
• ARRAY.splice(INDEX, 0, “ELEMENT”) вставит новый элемент в указанный индекс.

Если у вас появились вопросы о том, как добавить элемент в массив JS, мы будем рады ответить на них в комментариях ниже.