Модификация — JS: Массивы

Примитивные типы данных, с которыми мы работали до сих пор, невозможно изменить. Любые функции и методы над ними возвращают новые значения, но не могут ничего сделать со старым.

const name = 'Hexlet';
name.toUpperCase(); // 'HEXLET'
// Значение name не поменялось
console.log(name); // 'Hexlet'

С массивами это правило не работает. Массивы могут меняться: увеличиваться, уменьшаться, изменять значения по индексам. Ниже мы разберем все эти операции.

Изменение элементов массива

Синтаксис изменения элемента массива практически такой же, как и при обращении к элементу массива. Разница лишь в наличии присваивания:

const animals = ['cats', 'dogs', 'birds'];
// Меняется первый элемент массива
animals[0] = 'horses';
console.log(animals); // => [ 'horses', 'dogs', 'birds' ]

Самое неожиданное в данном коде – изменение константы. Константы в JavaScript не совсем то, как мы себе это представляли раньше. Константы хранят ссылку на данные (подробнее об этом в следующих уроках), а не сами данные. Это значит что менять данные можно, но нельзя заменить ссылку. Технически это значит, что мы не можем заменить все значение константы целиком:

const animals = ['cats', 'dogs', 'birds'];
// Меняем данные, а сам массив остался тем же
// Такой код работает
animals[2] = 'fish';
console.log(animals); // => [ 'cats', 'dogs', 'fish' ]

// Произойдет ошибка, так как здесь идет замена константы
animals = ['fish', 'cats'];
// Uncaught TypeError: Assignment to constant variable.

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

Метод push() добавляет элемент в конец массива:

const animals = ['cats', 'dogs', 'birds'];
animals.push('horses');

// массив animals изменен — стал больше
console.log(animals); // => [ 'cats', 'dogs', 'birds', 'horses' ]

// строка 'horses' была добавлена в конец массива (индекс = 3)
console.log(animals[3]); // => 'horses'

Метод unshift() добавляет элемент в начало массива:

const animals = ['cats', 'dogs', 'birds'];
animals.unshift('horses');

// массив animals изменен — стал больше
console.log(animals); // => [ 'horses', 'cats', 'dogs', 'birds' ]

// строка 'horses' была добавлена в начало массива (индекс = 0)
console.log(animals[0]); // => 'horses'

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

const animals = ['cats', 'dogs', 'birds'];
animals[3] = 'horses';
console.log(animals); // => [ 'cats', 'dogs', 'birds', 'horses' ]

Удаление элемента из массива

Удалить элемент из массива можно с помощью специальной конструкции delete: delete arr[index].

Пример:

const animals = ['cats', 'dogs', 'birds'];
delete animals[1]; // удаляем элемент под индексом 1
console.log(animals); // => [ 'cats', <1 empty item>, 'birds' ]

Этот способ обладает рядом недостатков, завязанных на особенности внутренней организации языка JavaScript. Например, после такого удаления, можно с удивлением заметить, что размер массива не изменился:

animals.length; // 3

Есть и другие особенности и последствия использования этого оператора, в которые сейчас не будем углубляться. Здесь мы его привели лишь для примера и не рекомендуем использовать при написании кода. В общем случае уменьшение размера массива — нежелательная операция. Подробнее об этом поговорим в одном из следующих уроков.

---

Остались вопросы? Задайте их в разделе «Обсуждение»

Вам ответят команда поддержки Хекслета или другие студенты

Об обучении на Хекслете

• Статья «Как учиться и справляться с негативными мыслями»
• Статья «Ловушки обучения»
• Статья «Сложные простые задачи по программированию»
• Урок «Как эффективно учиться на Хекслете»
• Вебинар «Как самостоятельно учиться»