Rivalry2

HTML Diff

0 added 0 removed

Original 2026-01-01

Modified 2026-02-26

1 Объект в JavaScript, в отличие от массива, не является коллекцией. Его нельзя обходить как обычный массив с помощью циклаfor..of, хотя подобная задача иногда возникает. Например, когда мы хотим распечатать все свойства на экран, или когда свойства в объект добавляются динамически - то есть их имена могут меняться в процессе жизни объекта.

2 В JavaScript для обхода объектов есть несколько способов. Самый простой - использовать конструкциюfor..in, которая очень похожа на обычный цикл.

3 Несмотря на простоту использования,for..inработает не совсем так, как может показаться.for..inвыводит не только свойства самого объекта, но и свойства, добавленные в прототип этого объекта. Эту тему мы пока не проходили и дается она позже, но если в двух словах, то объекты в JavaScript могут быть связаны друг с другом и обращение к свойству в одном объекте может приводить к обращению (неявному) к свойству в другом объекте (прототипе). Мы уже сталкивались с таким поведением на практике, но пока обходили этот вопрос стороной.

4 Главное, что сейчас нужно понимать, в подавляющем большинстве случаев это нежелательное поведение. Именно поэтомуfor..inиспользуется не так часто, как может показаться. Гораздо более распространенный способ - обходить ключи. Метод Object.keys(obj) позволяет получить массив всех ключей объекта:

5 Далее мы можем обойти в цикле массив ключей и получить нужные значения. На практике, обычно, сначала получают массив ключей и что-то с ним делают. Например, фильтруют, отбирая только нужные ключи, а затем обрабатывают исходный объект или создают новый, получая в цикле значение по ключу.

6 Если ключи в процессе обхода не используются, то можно сразу получить массив значений свойств объекта. Это делает метод Object.values(obj):

7 Ну, и последний вариант, метод, который возвращает сразу ключи и значения объекта. То есть каждый элемент сам будет массивом, содержащим ключ и соответствующее ему значение - [ key, value ]. За это отвечает метод Object.entries(obj):

8 Обойти такой массив циклом for...of не составит никакого труда, а деструктуризация позволит сделать это красиво:

9 Рассмотрим пример. Реализуем функцию findKeys(), которая возвращает список ключей объекта, значение которых равно переданному значению:

10 Логика работы функции выглядит так:

11 <ol><li>Обходим свойства объекта</li>

12 <li>Если значение в свойстве совпадает с переданным, то добавляем ключ в результат</li>

13 </ol><h2>Порядок ключей</h2>

14 Одна из ключевых особенностей массива - наличие строгого порядка, в котором следуют элементы. В объектах это не так, порядок какой-то есть, но им нельзя управлять. Этот порядок базируется на внутренних правилах работы JavaScript. Если нам важен порядок, то для этого придется вводить дополнительный массив, в котором будет храниться список ключей в том порядке, в котором мы хотим получить вывод.