WEB FULLSTACK COURSE

10.1 Основы массива

Массивы JavaScript
 { Содержание }

{ Основы массива } 2
Введение 2
Обращение к элементам массива
и их обновление 5
Добавление к массивам 6
Удаление из массивов 8
Удаление / Добавление или оба
с помощью splice 10
Задачи 11

1
 { Основы массива }
В конце этой главы вы должны быть в состоянии:
✔ Создавать массив JavaScript
✔ Обратиться к элементам в массиве
✔ Модифицировать значения, хранящиеся в массиве
✔ Использовать push и unshift для добавления элементов в массив
✔ Использовать pop и shift, чтобы удалить элементы из массива
✔ Использовать splice для более сложных модификаций массива

Введение

До этого времени мы видели пять различных примитивных типов данных в JavaScript: string,
number, boolean, null и undefined. Мы также видели, как хранить эти значения внутри переменных.
Иногда, всё же, вам нужна более сложная структура данных при создании приложения. Например,
вам может быть нужен список названий ресторанов, чтобы вы могли отобразить каждый из них
пользователю, когда он ищет место, где можно поесть поблизости. Или, может быть, вы
занимаетесь математикой и хотите вести список простых чисел. Было бы довольно неприятно все
писать. (Пример показан на следующей странице)

2
Это хорошо, если вы знаете, сколько простых чисел вам нужно с самого начала, но что если вы не
знаете, сколько значений нужно хранить? Или что, если вы знаете, сколько значений вам нужно, но
число было довольно большим? Написание переменной для каждой из них может быстро стать
неуправляемым.
К счастью, JavaScript предоставляет вам тип данных, который поможет в этих ситуациях: массив. Вы
можете представлять массив как просто список значений.
Для записи массива в JavaScript вы используете квадратные скобки [ ] и запятую - отделяет каждое
значение в массиве. Вот несколько примеров:

3
Вы можете поместить в массив все, что захотите: числа (как в primes), строки (как в names),
логические значения (как в booleans) и все другие виды примитивов имеют равные шансы.
Вы также можете иметь несколько различных типов внутри массива: просто потому что если
первый элемент в массиве является числом, НЕ означает, что каждый последующий элемент тоже
должен быть числом. Например, в mixedTypes много разных типов. Вы даже можете хранить
массивы внутри других массивов, как в приведенном выше массиве woahhh!
В этот момент вы можете задаться вопросом, почему мы не упомянули массивы, когда говорили о
других типах данных в JavaScript. Причина в том, что до сих пор мы имели дело с примитивными
типами данных в JavaScript. Но массивы не являются примитивами; они примеры того, что
называется ссылочным типом (reference type). Мы поговорим о ссылочных типах более подробно в
следующей главе. Пока достаточно заметить, что

возвращает object. Таким образом, массивы - это тип объекта, о котором мы поговорим в более
общих терминах позже.

4
 Обращение к элементам массива
и их обновление

Для доступа к элементу в массиве мы указываем имя массива, за которым следует квадратные
скобки и позиция (также называемая индексом) элемента, к которому мы пытаемся получить
доступ. Массивы индексируются с нуля, что означает, что к первому элементу обращаются с
индексом 0. Давайте рассмотрим пример:

Чтобы обновить значение в массиве, мы можем просто присвоить элементу по заданному индексу
новое значение:

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

Есть несколько способов добавить элементы в массив. Первый способ - установить значение в
новом индексе массива.

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

6
Если вы хотите добавить в конец массива, лучше использовать функцию push - эта функция
возвращает новую длину (число элементы) массива.

С другой стороны, если вы хотите добавить в начало массива, вы можете использовать функцию
unshift. Как и в случае с push, unshift возвращает длину измененного массива.

7
 Удаление из массивов

Мы видели, как мы можем добавлять элементы в массивы. Но как на счет удаления элементов?
Один (не распространенный) способ удаления элементов - вручную установить длину массива на
число, меньшее его текущей длины. Например:

Более распространенным способом удаления элементов с конечной части массива является

использование pop(). Эта функция работает аналогично push, удаляя элементы один за другим из
конечной части массива. Однако, в отличие от push, pop не возвращает длину нового массива;
вместо этого он возвращает только что удаленное значение.

8
Если вы хотите удалить элемент из начальной части массива, вам следует использовать shift() (как
unshift, но наоборот)! Как и в случае pop(), shift() возвращает удаленное значение.

Есть также ключевое слово delete в JavaScript, которое, как вы думаете, можно использовать для
удаления элементов в массиве. Однако, это не совсем то, как delete работает с массивами. Когда вы
используете это ключевое слово, значение в индексе, которое вы удаляете, будет просто заменено
на undefined. Обычно это не то, что вам нужно, поэтому вы не часто видите, как люди используют
delete для массивов. Чаще встречается использование этого слова с объектами, о котором мы
поговорим подробнее в следующем разделе.

9
 Удаление / Добавление или оба
с помощью splice

Одним из наиболее мощных методов массива является splice, который позволяет либо добавлять в
массив, либо удалять элементы, либо даже делать оба! Вы можете думать о splice как о мощном
обобщении push, pop, unshift и shift все в одном!
Метод splice принимает как минимум два аргумента. Первый аргумент - это начальный индекс,
указывающий, где будут удалены или добавлены значения. Второй параметр - это количество
значений для удаления. При желании вы можете передать неограниченное количество
дополнительных аргументов; они соответствуют значениям, которые вы хотели бы добавить в
массив. Метод splice всегда возвращает массив удаленных элементов. Вот несколько примеров:

10
 Задачи

1. Создайте массив ваших любимых блюд (назовите его favouriteFoods). Убедитесь, что в нем
есть по крайней мере три элемента.
2. Обратитесь ко второму элементу в favouriteFoods.
3. Измените последний элемент в favouriteFoods на другое блюдо.
4. Удалите первый элемент в favouriteFoods и сохраните его в переменной с именем
formerFavoriteFood.
5. Добавьте любимую еду в конец массива favouriteFoods.
6. Добавьте любимую еду в начало массива favouriteFoods.
7. Что происходит при попытке pop из пустого массива?
8. В приведенных ниже примерах используйте splice, чтобы преобразовать первый массив во
второй массив:
o [2, 3, 4, 5] -> [2, 4, 5]
o ["alpha", "gamma", "delta"] -> ["alpha", "beta", "gamma", "delta"]
o [10,-10,-5,-3,2,1] -> [10, /9, 8, 7, 6, 5, 4, 3, 2, 1]

11
Спасибо за внимание!

12