Полное руководство: Добавление объектов в массивы JavaScript

JavaScript предоставляет несколько методов для добавления объектов в массивы, с наиболее распространенными из которых являются push() для добавления элементов в конец и unshift() для добавления элементов в начало. Эти методы изменяют исходный массив и возвращают новую длину, в то время как splice() предлагает более гибкую вставку в любой позиции.

Содержание

• Базовые методы массивов
• Продвинутые техники вставки
• Вопросы производительности
• Иммутабельные альтернативы
• Практические примеры

Базовые методы массивов

Метод push()

Метод push() - это самый простой способ добавить один или несколько объектов в конец массива. Он изменяет исходный массив и возвращает новую длину.

const fruits = ['apple', 'banana'];
const newLength = fruits.push('orange');
console.log(fruits); // ['apple', 'banana', 'orange']
console.log(newLength); // 3

Вы также можете добавить несколько объектов одновременно:

const colors = ['red', 'blue'];
colors.push('green', 'yellow', 'purple');
console.log(colors); // ['red', 'blue', 'green', 'yellow', 'purple']

Метод unshift()

Чтобы добавить объекты в начало массива, используйте unshift(). Этот метод также изменяет исходный массив и возвращает новую длину.

const numbers = [3, 4, 5];
numbers.unshift(1, 2);
console.log(numbers); // [1, 2, 3, 4, 5]

Примечание: unshift() обычно медленнее, чем push(), поскольку он требует сдвига всех существующих элементов, чтобы освободить место для новых.

Продвинутые техники вставки

Метод splice()

splice() - это самый универсальный метод для вставки объектов в массивы. Он позволяет вставлять элементы в любую позицию, при этом опционально удаляя элементы.

const letters = ['a', 'b', 'c'];
// Вставить 'x' в индекс 1
letters.splice(1, 0, 'x');
console.log(letters); // ['a', 'x', 'b', 'c']

// Вставить несколько элементов
const numbers = [1, 2, 3, 4];
numbers.splice(2, 0, 10, 20, 30);
console.log(numbers); // [1, 2, 10, 20, 30, 3, 4]

Синтаксис: array.splice(startIndex, deleteCount, item1, item2, ...)

Использование синтаксиса разворота (ES6+)

Современный JavaScript предлагает синтаксис разворота для создания новых массивов с добавленными объектами:

const original = [1, 2, 3];
const newArray = [...original, 4, 5];
console.log(newArray); // [1, 2, 3, 4, 5]

// Для вставки в конкретные позиции
const modified = [0, ...original];
console.log(modified); // [0, 1, 2, 3]

Вопросы производительности

При работе с большими массивами различия в производительности между методами становятся значительными:

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

• Всегда предпочитайте push() при добавлении в конец
• Избегайте unshift() в критически важном для производительности коде
• Рассмотрите возможность использования splice() вместо синтаксиса разворота для модификаций на месте

Иммутабельные альтернативы

Если вам необходимо поддерживать иммутабельность (распространено в React и функциональном программировании):

Использование concat()

const original = [1, 2, 3];
const newArray = original.concat(4, 5);
console.log(newArray); // [1, 2, 3, 4, 5]
console.log(original); // [1, 2, 3] (неизменен)

Использование оператора разворота (Иммутабельно)

const original = [1, 2, 3];
const newArray = [...original, 4];
console.log(newArray); // [1, 2, 3, 4]
console.log(original); // [1, 2, 3] (неизменен)

Использование Array.prototype.push() с разворотом

const state = { items: [1, 2, 3] };
const newState = {
  ...state,
  items: [...state.items, 4]
};

Практические примеры

Добавление объектов в массив

const users = [
  { id: 1, name: 'Alice' },
  { id: 2, name: 'Bob' }
];

// Добавить нового пользователя
users.push({ id: 3, name: 'Charlie' });

// Вставить в начало
users.unshift({ id: 0, name: 'David' });

// Вставить в середину
users.splice(2, 0, { id: 2.5, name: 'Eve' });

console.log(users);

Пакетные операции

const data = [];

// Эффективное добавление нескольких элементов
data.push({ type: 'event', timestamp: Date.now() });
data.push({ type: 'log', timestamp: Date.now() });
data.push({ type: 'metric', timestamp: Date.now() });

// Или использовать массив объектов
const newItems = [
  { type: 'event', data: 'click' },
  { type: 'event', data: 'scroll' }
];
data.push(...newItems);

Условная вставка

const scores = [85, 90, 78, 92];
const newScore = 88;

if (newScore > 75) {
  scores.push(newScore);
  console.log('Оценка добавлена:', scores);
}

// Вставка в отсортированную позицию
const sortedScores = [60, 75, 80, 85, 90];
const insertScore = 82;

for (let i = 0; i < sortedScores.length; i++) {
  if (insertScore < sortedScores[i]) {
    sortedScores.splice(i, 0, insertScore);
    break;
  }
}
console.log(sortedScores); // [60, 75, 80, 82, 85, 90]

Заключение

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