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