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

Поэтому я систематически разбирал общие методы обхода объектов JavaScript для вашего ознакомления.

Вот ментальная карта

1. для… в

  • Просмотрите ключевые имена собственных и унаследованных перечисляемых свойств объекта (за исключением свойства Symbol).
  • Поскольку атрибуты объекта не имеют порядка, for… in вернет каждый атрибут один раз, но порядок выходных атрибутов непредсказуем.

Оператор var здесь необязателен, но для обеспечения локальных переменных рекомендуется использовать описанный выше способ записи.

В приведенном ниже коде свойство for…in проходит через объекты и методы самого объекта tom, а также свойства и методы, унаследованные от прототипа prototype конструктора Person.

for…in для обхода массива

Недостатки обхода массивов:

а. Имя ключа массива — это число, но цикл for…in принимает строку в качестве имени ключа «0», «1», «2» и так далее.

б. Цикл for… In перебирает не только числовые имена ключей, но и другие ключи, добавленные вручную, даже ключи в цепочке прототипов.

в. В некоторых случаях цикл for…in будет проходить по именам ключей в любом порядке.

д. Цикл for…in в основном предназначен для обхода объектов, а не массивов.

Use for…in для глубокого клонирования

2. Object.keys(obj), Object.values(obj), Object.entries(obj)

Object.keys(obj), Object.values(obj) и Object.entries(obj) all возвращают массив. Разница в том, что члены массива разные (они не содержат свойство Symbol).

  • Object.keys(obj)

Возвращает массив. Членами массива являются имена ключей всех перечисляемых свойств самого объекта параметра (без наследования).

  • Object.values(obj)

Возвращает массив. Членами массива являются ключевые значения всех перечисляемых свойств самого объекта параметра (за исключением наследования).

  • Object.entries(obj)

Возвращает массив. Членами массива являются массивы пар ключ-значение всех перечисляемых атрибутов самого объекта параметра (за исключением наследования).

Обход свойств объекта с помощью метода массива

  • Объединить for…of обход
  • Комбинируйте Array.forEach()｜Array.filter()｜Array.map()｜Array.findIndex()｜Array.every()｜Array.some() и т. д.

Object.entries(obj) превратить объект в настоящую структуру Карты

3. Object.getOwnPropertyNames(obj)

Object.getOwnPropertyNames(obj) возвращает массив. Элемент массива содержит ключевые имена всех атрибутов самого объекта (исключая атрибут символа, но включая неперечислимые атрибуты).

Массив, возвращаемый Object.getOwnPropertyNames(obj), можно просмотреть с помощью метода массива.

4. Object.getOwnPropertySymbols(obj)

Object.getOwnPropertySymbols(obj) возвращает массив, элементы массива содержат ключевые имена всех атрибутов Symbol самого объекта.

Сравнение Object.getOwnPropertySymbols (obj) с циклом for…in и Object.getOwnProperNames(obj).

Вот пример Object.getOwnPropertySymbols(obj) обхода объектов.

5. Reflect.ownKeys(obj)

Reflect.ownKeys(obj)вернет массив, элементы которого содержат все имена ключей самого объекта (исключая наследование), независимо от того, является ли имя ключа Symbol или строковым, или перечислимым, оно представляет собой сумму Object. getOwnPropertyNames(obj) и Object.getOwnPropertySymbols(obj) .

Другой

Порядок правил обхода свойств объекта

Вышеупомянутые методы обхода объектов следуют одному и тому же правилу:

  • Сначала пройдитесь по всем цифровым клавишам и расположите их в порядке возрастания.
  • Во-вторых, пройдитесь по всем строковым ключам и расположите их в порядке возрастания в соответствии со временем сложения.
  • Наконец, пройдитесь по всем Symbol ключам и расположите их в порядке возрастания в соответствии со временем добавления.

Дела, требующие внимания

  • ES6 предусматривает перечислимость методов всех прототипов классов.
  • Введение наследуемых атрибутов в операции усложнит задачу. Большую часть времени нас интересуют только атрибуты самого объекта. Поэтому старайтесь не использовать цикл for…in, а вместо этого используйте Object. keys(obj).

Дополнительные материалы на PlainEnglish.io. Подпишитесь на нашу бесплатную еженедельную рассылку новостей. Подпишитесь на нас в Twitter, LinkedIn, YouTube и Discord. Заинтересованы в Взлом роста? Ознакомьтесь с разделом Схема.