Метод Array push() в JavaScript с примерами

В этом руководстве вы узнаете, как использовать метод Array push()в JavaScript для добавления одного или нескольких элементов в конец массива на примерах.

Метод Array.prototype.push() добавляет один или несколько элементов в конец массива и возвращает длину нового массива.

Синтаксис:

push(newElement);
push(newElement1,newElement2);
push(newElement1,newElement2,...,newElementN);

Метод push() возвращает новое значение свойства length объекта массива, для которого вы вызываете метод.

Примеры

Давайте рассмотрим несколько примеров использования метода push().

1) Использование метода для добавления одного элемента в массив

В следующем примере число 40 добавляется в конец массива numbers :

let numbers = [10, 20, 30];

const length = numbers.push(40);

console.log(length);
console.log(numbers);

Выход:

4
[ 10, 20, 30, 40 ]

Как это работает:

• Сначала определите массив numbers, содержащий три числа:

let numbers = [10, 20, 30];

• Во-вторых, добавьте число 40 в конец массива numbers с помощью метода push() и присвойте возвращаемое значение переменной length :

const length = numbers.push(40);

• В-третьих, выведите переменную length и массив numbers :

console.log(length);
console.log(numbers);

На следующем рисунке показано, как работает пример:

2) Добавление нескольких элементов в конец массива

В следующем примере показано, как использовать метод push() для добавления нескольких элементов в конец массива:

let numbers = [10, 20, 30];

const length = numbers.push(40, 50);

console.log(length);
console.log(numbers);

Выход:

5
[ 10, 20, 30, 40, 50 ]

На следующем рисунке показано, как это работает:

3) Добавление элементов массива в другой массив

Предположим, у вас есть два массива colors и cmyk :

let colors = ['red', 'green', 'blue'];
let cmyk = ['cyan', 'magenta', 'yellow', 'back'];

И вы хотите добавить элементы cmyk в массив colors.

Для этого вы можете использовать цикл for...of, который перебирает элементы массива cmyk, и использовать метод push() для добавления каждого элемента в массив colors следующим образом:

let colors = ['red', 'green', 'blue'];
let cmyk = ['cyan', 'magenta', 'yellow', 'back'];

for(const color of cmyk) {
  colors.push(color);
}

console.log(colors);

Выход:

['red', 'green', 'blue', 'cyan', 'magenta', 'yellow', 'back']

Начиная с ES6, вы можете использовать оператор распространения( ... ), чтобы распространять элементы массива cmyk и одновременно помещать их в массив colors следующим образом:

let colors = ['red', 'green', 'blue'];
let cmyk = ['cyan', 'magenta', 'yellow', 'back'];

colors.push(...cmyk);

console.log(colors);

Использование с массивоподобными объектами

Метод Array.prototype.push() специально разработан, чтобы быть универсальным. Следовательно, вы можете вызвать метод push() с помощью call() или apply() для объектов, подобных массиву.

Под капотом метод push() использует свойство length для определения позиции для вставки элементов. Если метод push() не может преобразовать свойство length в число, он будет использовать 0 в качестве значения для индекса.

См. следующий пример:

let greetings = {
    0 : 'Hi',
    1 : 'Hello',
    length: 2,
    append(message) { [].push.call(this, message);
    },
};
greetings.append('Howdy');
greetings.append('Bonjour');

console.log(greetings);

Выход:

{
  '0': 'Hi',
  '1': 'Hello',
  '2': 'Howdy',
  '3': 'Bonjour',
  length: 4,
  add: [Function: add]
}

Как это работает:

• Во-первых, определите объект greetings, который имеет три свойства 1, 2 и length и один метод append() :

let greetings = {
  0: 'Hi',
  1: 'Hello',
  length: 2,
  append(message) {
    [].push.call(this, message);
  },
};

Метод append() вызывает метод push() объекта массива, чтобы добавить message к объекту greetings.

• Во-вторых, вызовите метод append() объекта greetings :

greetings.append('Howdy');
greetings.append('Bonjour');

В каждом вызове push() использует свойство length объекта greetings, чтобы определить позицию, в которую добавляется новый элемент, и увеличивает свойство length на единицу.

В результате объект greetings имеет еще два элемента с индексами 2 и 3. И свойство length равно 4 после вызовов.

• В-третьих, выведите объект greetings в консоль:

console.log(greetings);

Чтобы разрешить методу append() принимать несколько сообщений, вы можете изменить метод следующим образом:

let greetings = {
  0: 'Hi',
  1: 'Hello',
  length: 2,
  append() {
    [].push.call(this, ...arguments);
  },
};
greetings.append('Howdy', 'Bonjour');

console.log(greetings);

Как это работает:

• Во-первых, удалите параметр сообщения из метода добавления.
• Во-вторых, распределите элементы объекта arguments и поместите их в объект greetings.

Заключение

• Используйте метод push() массива JavaScript, чтобы добавить один или несколько элементов в массив.
• push() также работает с объектами, подобными массивам.