Как перебирать объекты в JavaScript
Использование возможностей Object.entries
Я знаю, о чем вы, вероятно, думаете, что означает правильно для чего-то столь, казалось бы, тривиального? Для целей этой статьи под правильным понимается подход к проблеме таким образом, который может как обеспечить согласованность, так и минимизировать рефакторинг кода, когда требования вашего кода неизбежно меняются. Кроме того, я надеюсь, вы понимаете, почему этот подход может создавать более чистый и понятный код, более четко излагая его намерения.
Object.entries
Object.entries - это метод, который принимает аргумент, который может быть объектом или массивом, и возвращает массив, который содержит массив для каждой пары значений ключа с индексами 0 и 1 соответственно.
Шиммирование Object.entries
Прежде чем мы начнем, важно отметить, что рекомендуется ожидать, что ваш сайт будут использовать люди со старыми "устаревшими" браузерами. В этой статье широко используется Object.entries, представленный в ECMAScript 2017 (ES8). Если вы разрабатываете в современной среде, такой как Angular, вероятно, уже добавлена прокладка для Object.entries. Если нет, не стесняйтесь скопировать и вставить приведенный ниже код в свой проект, чтобы старые браузеры могли запускать ваше приложение с помощью этого метода.
Подход обратного вызова
Использование обратных вызовов для цикла имеет преимущество в удобочитаемости, но мы теряем возможность использовать continue и break, чтобы пропустить или остановить цикл от завершения.
Подход обратного вызова позволяет нам более четко заявить о нашем намерении, особенно с учетом того, когда нам может потребоваться преобразовать или манипулировать массивом перед тем, как пройти через него. Например, допустим, мы хотим прокрутить в этом объекте только автомобили, сделанные Honda, мы могли бы сделать это легко.
For-of loop
В случаях, когда мы можем захотеть использовать continue и / или break, мы можем использовать простой цикл for of для Object.entries
Заключение
Использование Object.entries позволяет нам легко перебирать пары значений ключа как в объектах, так и в массивах, не беспокоясь о необходимости вызывать Object.hasOwnProperty (propertyName), чтобы гарантировать, что мы случайно не перебираем свойства в Цепочка прототипов объектов в отличие от цикла for-in.
В JavaScript следует избегать фор-инов, поскольку они итерируют свойства в прототипе объекта, а иногда итерируют не по порядку. Object.entries не имеет таких ограничений и достаточно гибок, чтобы быть полезным в любое время, когда нам нужно выполнить итерацию.
