Цикл по свойствам объекта в Mustache и Handlebars

Быстрый ответ

Для перебора непосредственных свойств объекта используйте конструкцию for...in, при этом не забывайте проверять принадлежность свойства к объекту с помощью Object.hasOwnProperty:

const obj = { a: 1, b: 2, c: 3 };

for (const key in obj) {
  if (obj.hasOwnProperty(key)) {
    console.log(`${key}: ${obj[key]}`);
  }
}

Такой подход позволит нам игнорировать свойства, унаследованные от прототипов.

Давайте пойдем дальше: комплексный взгляд на итерацию объектов

Рассмотрим подробно возможности и сложности, связанные с перебором свойств объектов в JavaScript.

Использование свойств объекта с помощью методов ES6

Object.keys(), Object.values() и Object.entries() предоставляют возможности для работы с ключами, значениями и парами ключ-значение:

let keys = Object.keys(obj); // ['a', 'b', 'c']
let values = Object.values(obj); // [1, 2, 3]
let entries = Object.entries(obj); // [['a', 1], ['b', 2], ['c', 3]]

Данные методы создают основу для применения таких методов массива как .forEach(), .map(), .filter() и других для обработки данных объекта.

Подробнее об этом расскажет наш спикер на видео

Улучшения цикла for в ES6

Цикл for...of совместно с Object.entries() предоставляет удобный способ итерации по парам ключ-значение:

for (const [key, value] of Object.entries(obj)) {
  console.log(`${key}: ${value}`);
}

Визуализация

Рассмотрим набор инструментов 🔧, где каждый инструмент — это свойство объекта JavaScript. Наша задача — перебрать и изучить каждый из инструментов.

🔧 Набор инструментов: [🔨 Молоток (a), 🛠 Гаечный ключ (b), 🗡 Отвертка (c), 🪚 Пила (d)]

Используя for...in, мы перебираем каждое отделение:

for (let tool in toolbox) {
    console.log(tool); // 🔨, 🛠, 🗡, 🪚
}

В итоге мы получаем список всех инструментов, по очереди.

Цикл 1: 🔨 (Молоток – a)
Цикл 2: 🛠 (Гаечный ключ – b)
Цикл 3: 🗡 (Отвертка – c)
Цикл 4: 🪚 (Пила – d)

Таким образом, мы не пропустим ни одного инструмента.

Особенности фреймворков

В Handlebars.js рекомендуется использовать {{#each}}, {{@key}} и {{this}} для работы с объектами:

{{#each myObject}}
  Ключ: {{@key}}, Значение: {{this}}
{{/each}}

В Handlebars.js также есть возможность определить хэлперы для решения более сложных задач перебора:

Handlebars.registerHelper('eachProperty', function(context, options) {
  let ret = "";
  for (let prop in context) {
    if (context.hasOwnProperty(prop)) {
      ret += options.fn({property: prop, value: context[prop]});
    }
  }
  return ret;
});

Ember.js предоставляет Ember.Handlebars.registerHelper, совмещая его с Ember.get для безопасного доступа к свойствам объекта.

Будьте осторожны с прототипом

При использовании цикла for...in обязательно применяйте hasOwnProperty, чтобы игнорировать свойства, унаследованные от прототипа:

for (const key in obj) {
  if (Object.prototype.hasOwnProperty.call(obj, key)) {
    console.log(`${key}: ${obj[key]}`);
  }
}

Так вы сможете избежать проблем, если в объекте вдруг окажется свойство с именем "hasOwnProperty”.

Учет перечисляемых свойств

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

Полезные материалы

1. for...in – JavaScript | MDN — руководство по использованию for...in для работы со свойствами объекта.
2. Objects – JavaScript.info — как использовать for..in при переборе свойств объекта.
3. How do I loop through or enumerate a JavaScript object? – Stack Overflow — пошаговые инструкции для перебора свойств объектов.
4. JavaScript for/in Statement – W3Schools — использование конструкции for/in на практических примерах.
5. Object.keys() – JavaScript | MDN — подробная информация о методе для получения ключей объекта.
6. Iterables and iterators in ECMAScript 6 – 2ality.com — о итераторах и итерациях в ES6, применимых к объектам.
7. How to iterate over object properties in JavaScript – Flavio Copes — руководство по использованию Object.keys/values/entries.