Rivalry2

HTML Diff

0 added 0 removed

Original 2026-01-01

Modified 2026-02-26

1 <p>В этом уроке мы познакомимся с ассоциативным массивом, а также разберем его преимущества и недостатки. Еще научимся работать с ним в языке JavaScript.</p>

2 <h2>Map как объект</h2>

3 <p><strong>Ассоциативный массив</strong>- это абстрактный тип данных, который позволяет хранить пары вида "ключ, значения". Он поддерживает операции добавления пары, а также поиска и удаления по ключу.</p>

4 <p>Вспомним JavaScript-объект:</p>

5 <p>В нем много общего с ассоциативными массивами. Объект часто используется как ассоциативный массив - мы обращаемся к его значениям, которые установлены внутри по ключу. Обращение идет как через точку, так и через квадратные скобки.</p>

6 <h2>Преимущества</h2>

7 <p>Использование квадратных скобок дает несколько преимуществ:</p>

8 <ul><li>Динамическое обращение</li>

9 <li>Динамическое обновление</li>

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

11 </ul><p>Разберем их подробнее.</p>

12 <h3>Динамическое обращение</h3>

13 <p>Мы можем динамически обращаться к свойствам или ключам через переменную, в которой хранится имя ключа, вместо обращения к свойству через точку. Например:</p>

14 <p>Внутри квадратных скобок конструкция [key] ожидает выражение. Это может быть что угодно, например, мы передаем константу key, которая внутри содержит строку. Так мы получаем доступ к внутреннему значению.</p>

15 <p>Это может происходить в циклических конструкциях, где мы не знаем, с каким ключом работаем на каждой итерации.</p>

16 <h3>Динамическое обновление</h3>

17 <p>Так же как и с динамическим обращением вместо обновления свойства через точку мы можем делать то же самое через квадратные скобки:</p>

18 <p>В этом случае синтаксис практически не меняется.</p>

19 <p>Мы используем внутри не литерал, а переменную. Она в себе содержит имя, к свойству которого мы обращаемся.</p>

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

21 <p>Для итерации по свойствам объекта в JavaScript есть методы, которые находятся не внутри самого объекта.</p>

22 <p>Чтобы итерировать, мы можем воспользоваться конструктором Object и вызвать у него метод keys, который возвращает нам ключи переданного объекта:</p>

23 <p>На выходе конструкции Object.keys(person) у нас получается массив.</p>

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

25 <p>Например, распечатываем все значения. Мы обращаемся к нашему объекту, в квадратных скобках указываем propName - переменная, содержащая ключ, который был извлечен из person. Как раз здесь проявляется динамическая природа квадратных скобок и ее удобства. Через точку у нас бы не получилось так сделать.</p>

26 <p>Есть и другой способ:</p>

27 <p>Если нам нужны не ключи, а значения, то мы можем вызвать метод Object.values() и получить сразу список значений из объекта.</p>

28 <h2>Недостатки</h2>

29 <p>У объектов, как и у ассоциативных массивов, есть определенные недостатки, часть из которых довольно критические:</p>

30 <ul><li>Дополнительные свойства</li>

31 <li>Ключи только строки и символы</li>

32 <li>Определение размера</li>

33 </ul><p>Разберем их подробнее.</p>

34 <h3>Дополнительные свойства</h3>

35 <p>Когда мы ставим Object, у него есть большое количество свойств, которые даются ему по наследству. Эти свойства в большинстве случаев являются функциями:</p>

36 <p>Например, есть функция valueOf(). При работе со свойствами, особенно в динамическом режиме, мы можем случайно заменить ее. В итоге это приведет к определенным проблемам. Это довольно критическая вещь для определенных типов программ.</p>

37 <h3>Ключи только строки и символы</h3>

38 <p>Допустим, мы создали такой объект и распечатали его:</p>

39 <p>В итоге тройка превратилась в строку. То есть внутри произошло преобразование. В работе это может быть неудобно.</p>

40 <h3>Определение размера</h3>

41 <p>Object не дает определить размер. Поэтому можно сделать так:</p>

42 <p>Мы обращаемся черезObject.keys(), достаем все ключи и вычисляем длину. Это не очень удобный способ вычислять размер объекта.</p>

43 <p>JavaScript дает возможность работать с нормальным мапом, который уже является ассоциативным массивом. При этом у него нет тех недостатков, о которых мы говорили.</p>

44 <h2>Тип Map</h2>

45 <p>Map - это отдельный тип. Если сделать на нем new без переданных аргументов, то можно получить объект, с которым можно дальше работать:</p>

46 <p>При этом мы можем передать аргумент, который внутри станет ключевым значением:</p>

47 <p>Это массив массива, в котором каждый массив - это элемент из двух пар: ключ и значение. Внутри он превращается в [key, value]. Как там все хранится? мы не знаем, но у нас есть интерфейс, которым достаточно просто пользоваться.</p>

48 <p>Установка нового значения происходит через set:</p>

49 <p>Этот простой интерфейс позволяет работать и не переживать о перечисленных недостатках.</p>

50 <h2>Map как коллекция</h2>

51 <p>Если мы хотим работать с Map как с коллекцией, то для этого он дает из коробки несколько методов:</p>

52 <p>entries() - это новый метод, который возвращает ту структуру, которая ожидается на вход в конструктор.</p>

53 <p>Еще у Map есть свойство forEach:</p>

54 <p>Нам не нужно получать key, value и как-то его обходить. Мы просто передаем в forEach функцию, которая принимает key, value. Это достаточно удобно для большинства моментов, где нам нужно обрабатывать Map.</p>

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

56 <p>В этом уроке мы познакомились с ассоциативным массивом, а также разобрали его преимущества и недостатки. К первым относятся динамическое обращение и обновление и итерация, ко вторым - дополнительные свойства, ключи как строки и символы и определение размера.</p>

57 <p>Еще мы научились создавать объект типа Map, а также работать с ним как с коллекциями. Для последнего можно использовать методы keys, values и entries.</p>