LearnJS

Изменение массива в JavaScript

Изменить массив - значит заменить один или несколько его элементов. Чаще всего это делают по индексу.

let fruits = ['apple', 'orange', 'banana'];

fruits[1] = 'grape';

console.log(fruits); // ['apple', 'grape', 'banana']

Что значит изменить массив

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

let colors = ['red', 'green', 'blue'];

colors[0] = 'black';

console.log(colors); // ['black', 'green', 'blue']

В этом примере элемент с индексом 0 изменился с red на black.

Замена элемента по индексу

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

let users = ['Анна', 'Олег', 'Мария'];

users[1] = 'Иван';

console.log(users); // ['Анна', 'Иван', 'Мария']

Индексы начинаются с 0, поэтому users[1] - это второй элемент массива.

Если указать индекс, которого еще нет, JavaScript не заменит элемент, а добавит новый.

let users = ['Анна', 'Олег'];

users[2] = 'Мария';

console.log(users); // ['Анна', 'Олег', 'Мария']

Если индекс будет сильно больше длины массива, появятся пустые места. Обычно так делать не нужно.

let users = ['Анна', 'Олег'];

users[5] = 'Мария';

console.log(users.length); // 6

Индекс в переменной

Индекс можно хранить в переменной. Это удобно, когда он получен заранее или посчитан в коде.

let tasks = ['HTML', 'CSS', 'JavaScript'];
let index = 1;

tasks[index] = 'Flexbox';

console.log(tasks); // ['HTML', 'Flexbox', 'JavaScript']

Запись работает так же, как с обычным числом в квадратных скобках.

Замена через splice()

Метод splice() может не только удалять и добавлять элементы, но и заменять их.

let fruits = ['apple', 'orange', 'banana'];

fruits.splice(1, 1, 'grape');

console.log(fruits); // ['apple', 'grape', 'banana']

Первый аргумент - индекс, с которого начинается изменение. Второй - сколько элементов удалить. Все следующие значения вставляются на их место.

fruits.splice(1, 1, 'grape');

В этом примере удаляется один элемент с индексом 1, а вместо него вставляется grape.

Изменение нескольких элементов

Через splice() можно заменить сразу несколько элементов.

let numbers = [10, 20, 30, 40];

numbers.splice(1, 2, 200, 300);

console.log(numbers); // [10, 200, 300, 40]

Здесь с индекса 1 удаляются два элемента: 20 и 30. На их место вставляются 200 и 300.

Изменение найденного элемента

Иногда индекс заранее неизвестен. Тогда сначала можно найти его через findIndex(), а потом заменить элемент.

let users = [
  { id: 1, name: 'Анна' },
  { id: 2, name: 'Олег' },
  { id: 3, name: 'Мария' },
];

let index = users.findIndex((user) => user.id === 2);

if (index !== -1) {
  users[index] = { id: 2, name: 'Иван' };
}

console.log(users);

Проверка index !== -1 нужна, потому что findIndex() возвращает -1, если элемент не найден.

Новый массив через map()

Если исходный массив менять не нужно, можно создать новый массив через map().

let prices = [100, 200, 300];

let updatedPrices = prices.map((price) => price + 50);

console.log(updatedPrices); // [150, 250, 350]
console.log(prices); // [100, 200, 300]

map() проходит по каждому элементу и возвращает новый массив с результатами.

Такой подход часто используют, когда нужно обновить данные и не менять исходный массив.

let users = [
  { id: 1, name: 'Анна' },
  { id: 2, name: 'Олег' },
];

let updatedUsers = users.map((user) => {
  if (user.id === 2) {
    return { ...user, name: 'Иван' };
  }

  return user;
});

console.log(updatedUsers);

const и массив

Если массив записан в переменную через const, его элементы все равно можно менять.

const fruits = ['apple', 'orange'];

fruits[1] = 'banana';

console.log(fruits); // ['apple', 'banana']

const запрещает присвоить переменной новый массив, но не запрещает менять содержимое уже созданного массива.

const fruits = ['apple', 'orange'];

fruits = ['banana']; // ошибка

Что выбрать

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

Если нужно заменить несколько элементов подряд, подойдет splice().

Если нужно получить новый массив и оставить старый без изменений, используйте map().

Итого

Массив можно изменять напрямую или создавать новый массив с обновленными значениями.

  • array[index] = value заменяет элемент по индексу.
  • Если индекса еще нет, такая запись добавит новый элемент.
  • splice() помогает заменить один или несколько элементов.
  • findIndex() удобно использовать, когда сначала нужно найти элемент.
  • map() создает новый массив и не меняет исходный.
  • const не запрещает изменять элементы массива.