Rivalry2

HTML Diff

0 added 0 removed

Original 2026-01-01

Modified 2026-02-26

1 Массив - это самая распространенная структура данных во всех языках программирования. В этом уроке мы узнаем, что такое массив и объект, а также подробно разберем встроенные методы для работы с массивами в JavaScript.

2 <h2>Что такое массив</h2>

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

4 Рассмотрим пример массива:

5 У нас есть массив a, и у него длина n. Он проиндексирован - каждое его значение хранится под определенным номером. Они идут по порядку и начинаются с нуля. Первый индекс всегда нуль - это стандарт.

6 Последний индекс будет n-1, так как индексация начинается с нуля, поэтому последний индекс на единицу меньше количества элементов.

7 Чтобы обратиться к элементам, нужно указать его имя и в квадратных скобках - индекс.

8 На изображении видно, что элементы идут подряд - это верное представление с точки зрения работы с массивом, но его реализация может отличаться. То, как физически массив хранится в памяти, зависит от языка программирования, там порядок набора элементов может быть другой. Но эти детали скрыты от разработчика, поэтому мы всегда представляем массив в виде элементов, которые идут друг за другом.

9 <h2>Определение массива в JavaScript</h2>

10 В JavaScript пустой массив создается с помощью квадратных скобок:

11 Если массив инициализируется какими-то значениями, то их нужно указать в квадратных скобках через запятую:

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

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

14 В итоге мы получим значения, с которыми можем работать дальше.

15 Также мы можем запросить элемент, которого нет в массиве. Например, используем индекс 4:

16 У нас нет элемента с таким индексом. В результате мы не получим ошибку. В этом случае в JavaScript мы получаем undefined.

17 <h2>Что такое объект</h2>

18 В работе с массивами в JavaScript есть особенность:

19 С помощью операции typeof мы смотрим, какой тип у массива. Получаем object.

20 Дело в том, что когда мы создаем массив, то создается объект. Квадратные скобки заменяют такую конструкцию:

21 Фактически мы создаем новый элемент с типом array, в котором через запятую перечисляем элементы внутри него, и он является объектом.

22 Array - это подтип объекта, который обладает определенными свойствами. Мы можем обращаться к нему, как к другим объектам. Например, array определяет свойство length, которое возвращает длину этого массива:

23 Свойство length обновляется автоматически. Например, если мы что-то добавляем или удаляем, то оно будет меняться в зависимости от того, что мы делаем.

24 При этом квадратные скобки при обращении к массиву не являются специфичными для массива. В примере мы обратились к свойству через квадратные скобки arr2['length'] - это работает. Также к свойствам можно обращаться через точку arr2.length. Оба варианта делают одно и то же.

25 Теперь представим, как бы мы определили массив в терминах объекта. Мы сделали объект, у которого ключи являются числовыми - как индексы:

26 Этот объект по своему виду соответствует массиву, который разобрали выше. Используются те же значения.

27 Если обратиться к нему также через скобки и поставить туда индекс 0, то мы получим единицу. Это работает практически как массив. Массив синтаксически ничего не добавляет кроме конструкции [], которая заменяет new Array(). Все остальное - это часть типа данных object в JavaScript. Из-за того, что они смешиваются в одну сущность, это добавляет некоторые неожиданные эффекты, с которыми мы познакомимся позже.

28 В большинстве языков программирования массивы так не пересекаются с объектами, так как являются разными типами данных. Например, в PHP вообще нет массивов, а есть только объекты или так называемые ассоциативные массивы, с которыми мы тоже познакомимся попозже.

29 <h2>Что можно делать с массивом</h2>

30 Рассмотрим манипуляции, которые можно делать с массивом в JavaScript:

31 <ul><li>Обновление</li>

32 <li>Произвольное добавление</li>

33 <li>Последовательное добавление</li>

34 <li>Удаление</li>

35 <li>Добавление и удаление элементов в начале или конце массива</li>

36 <li>Итерация</li>

37 <li>Функции высшего порядка</li>

38 <li>Другие функции</li>

39 </ul>Разберем каждый метод подробнее.

40 <h3>Обновление</h3>

41 Мы можем переустановить значение любого элемента в массиве. Для этого обращаемся к соответствующему индексу и приравниваем его:

42 Синтаксис такой же, как и с константами переменными. Мы просто присваиваем новое значение в индекс массива arr[0] = 'hello'. Если мы потом выведем его, то увидим новое значение hello. При этом длина массива не изменилась, так как мы просто заменили значение под индексом 0.

43 В данном примере используется const, а не let. Мы сохраняем в константе массив, и константа не меняется. Мы всегда работаем через константу с одним и тем же массивом.

44 При этом JavaScript не гарантирует, что сам массив не будет меняться. Мы можем изменить его добавлением, удалением или заменой каких-то элементов. Но сам массив остается тот же. Поэтому, если у нас не происходит замены всего массива на новый, то нужно всегда использовать const. Это применимо и к другим типам данных.

45 Напомним, что const пишется один раз при создании массива.

46 <h3>Произвольное добавление</h3>

47 Также мы можем делать произвольное добавление. Нам необязательно добавлять значение в тот индекс, который уже существует. Например:

48 Здесь мы добавляем значение не в последний индекс. Сейчас их у нас три, а мы добавляем значение world в индекс 5.

49 В этом случае мы не получим ошибку. Если распечатать массив, то можно увидеть следующее:

50 Если мы выведем длину массива, то она будет равна 6:

51 Получается, что пустые места - это реальные элементы - чем-то заполнились. Если мы попытаемся вывести на экран значение под индексом 4, то получим undefined:

52 Сам элемент существует, но его значение равно undefined. Если мы обращаемся к индексу, которого не существует, то тоже получаем undefined.

53 Получается, что в одном случае индекс с элементом есть, а в другом случае индекса нет. Но мы в любом случае получаем undefined.

54 Иногда разница в этих значениях есть, и ее нужно учитывать. А иногда ее нет. Главное помнить, что undefined не всегда означает, что этого индекса не существует. Там действительно может лежать значение undefined.

55 <h3>Последовательное добавление</h3>

56 Чтобы добавить что-то в массив, используют метод push:

57 push берет последний индекс, прибавляет к нему единицу и размещает по этому индексу то значение, которое мы передаем в push.

58 Если распечатать его, то мы получим 10:

59 Это стандартный подход при работе с массивом.

60 <h3>Удаление</h3>

61 При работе с массивами есть механизм удаления элемента, но он работает не так, как ожидается:

62 Вместо удаления элемента происходит его очистка, а значением элемента становится undefined.

63 Если распечатать, то увидим пропущенное значение:

64 Удалять что-то из массива - это плохая практика, которая может приводить к проблемам. О них мы поговорим позже. Поэтому так не стоит делать.

65 Если вам нужно получить массив, в котором отсутствуют какие-то элементы, то нужно применять фильтрацию. По факту нужно сформировать новый массив и добавить в него только те элементы из оригинального массива, которые нам нужны.

66 <h3>Добавление и удаление элементов в начало или конец массива</h3>

67 Чтобы добавить или удалить элементы в начало или конец массива, используются методы shift, unshift, pop и push. Эта группа методов позволяет работать с массивом как с<a>очередью</a>- метод доступа FIFO, или<a>стеком</a>- метод доступа LIFO. Рассмотрим это на примере:

68 Очередь является упорядоченным набором данных, организованным по принципу FIFO - first in - first out. То есть элементы всегда добавляются в конец очереди, а удаляются из ее начала:

69 Стек является упорядоченным набором данных, организованным по принципу LIFO - last in - first out. То есть элементы добавляются и удаляются всегда из конца такой коллекции:

70 <h3>Итерация</h3>

71 Классический способ итерации для императивных языков - это цикл. В JavaScript много циклов, для работы с массивами часто применяется for…of:

72 <h3>Функции высшего порядка</h3>

73 Канонический способ работы с коллекциями в JavaScript - функции высшего порядка.

74 Представим, что у нас есть массив numbers:

75 Мы хотим выполнить с ним стандартные операции: map, filter, reduce и reduceRight:

76 Пример работы с map:

77 То же самое:

78 В JavaScript все функции являются объектами первого рода, и мы можем их передавать как аргументы. Во втором примере мы вызываем метод map на массиве numbers и передаем туда саму функцию Math.sqrt(), так как она принимает тот же параметр, что и наша функция-обертка.

79 В итоге получаются корни - roots. Если их распечатать, у нас появляется 1, 2, 3.

80 Следующий пример - это фильтрация:

81 Если мы распечатаем получившийся массив, то получим 4,9, так как у нас единица меньше 3, она сюда не попадает.

82 Наиболее комплексный пример из функций высшего порядка - это reduce:

83 В итоге возвращаем тело функции в преобразованный новый аккумулятор и считаем сумму элементов массива. Если его распечатать, то получаем 14.

84 У анонимной функции достаточно много параметров. В JavaScript это сделано для удобства. Чаще всего используются только первые два параметра. Список параметров:

85 <ul><li>acc - аккумулятор</li>

86 <li>value - значение текущего, которое обрабатывается</li>

87 <li>index - индекс, что может быть полезно в определенных случаях</li>

88 <li>arr - сам массив</li>

89 </ul>Пример работы с reduceRight:

90 <h3>Другие функции</h3>

91 Чтобы строки превратить в массив, а также сделать обратное, используют split и join:

92 Поиск в массиве и проверка соблюдения условий элементами массива производится с помощью find, findIndex, indexOf, lastIndexOf, some, every, includes и так далее. Например:

93 Сортировка массива происходит с помощью sort, reverse.

94 Разберем еще один метод flat(). Он делает содержимое вложенных элементов-массивов исходного массива элементами самого исходного массива. Он словно выравнивает массив. Посмотрим на код:

95 Как видно из предыдущего примера, нам удалось выровнять все элементы на один уровень ниже лежащих массивов. При этом элементы более глубоко лежащих массивов остались невыровненными.

96 Можно управлять уровнем глубины выравнивания, который указывается в параметре метода:

97 <h2>Библиотека lodash</h2>

98 Существуют библиотеки, которые позволяют пользоваться множеством готовых функций. Одной из наиболее актуальных на текущей момент Javascript-библиотек является lodash. В ней реализованы различные функции по работе с массивами, коллекциями, строками и другими объектами языка.

99 Эта библиотека предоставляет большое количество функций высшего порядка, которые поддерживают функциональный стиль программирования. Подробнее ознакомиться со всеми возможностями lodash можно на<a>сайте библиотеки</a>.

100 <h2>Изменяемость VS Неизменяемость</h2>

101 Изменить объект в императивном стиле, когда можно писать код в неизменяемом - часто является не самым удачным решением. Это ведет к изменению состояния программы и усложняет ее. Поэтому, когда изучаете методы, всегда обращайте внимание, изменяют ли они исходный массив или нет.

102 Например, большинство примененных к массиву функций высшего порядка результатом возвращают новый массив. При этом они оставляют исходный нетронутым. Метод sort, как сказано в<a>документации</a>, необратимым образом модифицирует исходный массив. Поэтому такую сортировку лучше сделать на копии массива, если нам не нужно, чтобы исходный массив менялся.

103 Возьмем для примера типичную ситуацию, когда необходимо добавить новый элемент в массив. Рассмотрим, как справиться с этой задачей на примeре изменяющего метода push и неизменяющего concat:

104 push

105 push добавляет один или более элементов в конец массива, тем самым изменяет его, и возвращает новую длину массива.

106 concat

107 concat возвращает новый массив, который содержит элементы исходного массива и элементы, переданные в качестве аргументов.

108 <h2>Выводы</h2>

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

110 <ul><li>Обновление</li>

111 <li>Произвольное добавление</li>

112 <li>Последовательное добавление</li>

113 <li>Удаление</li>

114 <li>Добавление и удаление элементов в начале или конце массива</li>

115 <li>Итерация</li>

116 <li>Функции высшего порядка</li>

117 <li>Другие функции</li>

118 </ul>