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); // => ['horses', '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'

Метод array.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

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


<span class="translation_missing" title="translation missing: ru.web.courses.lessons.mentors.mentor_avatars">Mentor Avatars</span>

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

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

Ошибки, сложный материал, вопросы >
Нашли опечатку или неточность?

Выделите текст, нажмите ctrl + enter и отправьте его нам. В течение нескольких дней мы исправим ошибку или улучшим формулировку.

Что-то не получается или материал кажется сложным?

Загляните в раздел «Обсуждение»:

  • задайте вопрос. Вы быстрее справитесь с трудностями и прокачаете навык постановки правильных вопросов, что пригодится и в учёбе, и в работе программистом;
  • расскажите о своих впечатлениях. Если курс слишком сложный, подробный отзыв поможет нам сделать его лучше;
  • изучите вопросы других учеников и ответы на них. Это база знаний, которой можно и нужно пользоваться.
Об обучении на Хекслете

Для полного доступа к курсу нужна профессиональная подписка

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

Получить доступ
115
курсов
892
упражнения
2241
час теории
3196
тестов

Открыть доступ

Курсы программирования для новичков и опытных разработчиков. Начните обучение бесплатно.

  • 115 курсов, 2000+ часов теории
  • 800 практических заданий в браузере
  • 250 000 студентов

Отправляя форму, вы соглашаетесь c «Политикой конфиденциальности» и «Условиями оказания услуг».

Наши выпускники работают в компаниях:

Логотип компании Альфа Банк
Логотип компании Rambler
Логотип компании Bookmate
Логотип компании Botmother

Есть вопрос или хотите участвовать в обсуждении?

Зарегистрируйтесь или войдите в свой аккаунт

Отправляя форму, вы соглашаетесь c «Политикой конфиденциальности» и «Условиями оказания услуг».