Js перебрать объект – Объекты: перебор свойств

javascript — Перебор свойств объекта в объекте(если правильно выразился)

Stack Overflow на русском

Loading…

2. 0
3. +0
• Тур Начните с этой страницы, чтобы быстро ознакомиться с сайтом
• Справка Подробные ответы на любые возможные вопросы
• Мета Обсудить принципы работы и политику сайта
• О нас Узнать больше о компании Stack Overflow
• Бизнес Узнать больше о поиске разработчиков или рекламе на сайте
6. Войти Регистрация

7. текущее сообщество

   • Stack Overflow на русском справка

ru.stackoverflow.com

javascript — Как перебрать элементы объекта?

Stack Overflow на русском

Loading…

2. 0
3. +0
• Тур Начните с этой страницы, чтобы быстро ознакомиться с сайтом
• Справка Подробные ответы на любые возможные вопросы
• Мета Обсудить принципы работы и политику сайта
• О нас Узнать больше о компании Stack Overflow
• Бизнес Узнать больше о поиске разработчиков или рекламе на сайте
6. Войти Регистрация

7. текущее сообщество

   • Stack Overflow на русском справка чат
   • Stack Overflow на русском Meta

ru.stackoverflow.com

javascript — Как перебрать массив объектов?

Stack Overflow на русском

Loading…

2. 0
3. +0
• Тур Начните с этой страницы, чтобы быстро ознакомиться с сайтом
• Справка Подробные ответы на любые возможные вопросы
• Мета Обсудить принципы работы и политику сайта
• О нас Узнать больше о компании Stack Overflow
• Бизнес Узнать больше о поиске разработчиков или рекламе на сайте
6. Войти Регистрация

7. текущее сообщество

ru.stackoverflow.com

Перебор объекта JSON при помощи цикла for in

От автора: в обычных массивах можно использовать цикл for. Объекты JSON же отличаются от обычных массивов тем, что каждая ячейка содержит в себе пару свойство и значение. Чтобы извлечь эти составляющие массива и обращаться к ним по отдельности зачастую требуется другой подход. Цикл for..in – один из таких подходов.

Хорошим примером послужит созданный мной в предыдущей статье объект CSS цветов. JSON массив начинается так:

var cssColors = { «aliceblue»: «#f0f8ff», «antiquewhite»: «#faebd7», «aqua»: «#00ffff», «aquamarine»: «#7fffd4», «azure»: «#f0ffff», … }

var cssColors = {     «aliceblue»: «#f0f8ff»,   «antiquewhite»: «#faebd7»,   «aqua»: «#00ffff»,   «aquamarine»: «#7fffd4»,   «azure»: «#f0ffff»,   … }

Чтобы создать диаграмму CSS цветов для той статьи, мне нужно было пройтись в цикле по объекту: другими словами, извлечь перечисленные свойства массива. Это легко можно сделать при помощи вариации цикла for с частичкой in:

JavaScript. Быстрый старт

Изучите основы JavaScript на практическом примере по созданию веб-приложения

Узнать подробнее

for (var key in cssColors) { … }

for (var key in cssColors) {     … }

Переменную key можно назвать как угодно (любое подходящее слово), в ней будет храниться свойство. Для вывода результата в консоль для теста можно изменить скрипт:

for (var key in cssColors) { console.log(key) }

for (var key in cssColors) {     console.log(key) }

Вы получите следующее:

aliceblue antiquewhite aqua aquamarine azure …

aliceblue antiquewhite aqua aquamarine azure …

JavaScript. Быстрый старт

Изучите основы JavaScript на практическом примере по созданию веб-приложения

Узнать подробнее

Если хотите добавить значение свойства в вывод, можно добавить запятую и объект с ключом:

for (var key in cssColors) { console.log(key, cssColors[key]) }

for (var key in cssColors) {     console.log(key, cssColors[key]) }

Результат:

aliceblue #f0f8ff antiquewhite #faebd7 aqua #00ffff aquamarine #7fffd4 azure #f0ffff

aliceblue #f0f8ff antiquewhite #faebd7 aqua #00ffff aquamarine #7fffd4 azure #f0ffff

На этой основе можно создать почти любую конструкцию: посмотрите пример демо с именованными CSS цветами на CodePen.

Неправильное использование и возможные ограничения

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

for (var key in cssColors) { if (cssColors.hasOwnProperty(key)) { … do something … } }

for (var key in cssColors) {   if (cssColors.hasOwnProperty(key)) {     … do something …   } }

Данное условие проверяет, присвоено ли свойство напрямую объекту, и выводит его, если оно родное. У цикла for..in могут возникнуть проблемы с массивами с пустыми слотами. Общее правило – не стоит добавлять, удалять или изменять свойства в массиве во время его перебора.

JSON массив состоит из множества объектов, и рассматривать его нужно слегка по-другому. Более подробно о JSON массивах я расскажу в следующей статье.

Источник: http://thenewcode.com/

Редакция: Команда webformyself.

JavaScript. Быстрый старт

Изучите основы JavaScript на практическом примере по созданию веб-приложения

Узнать подробнее

JavaScript. Быстрый старт

Изучите основы JavaScript на практическом примере по созданию веб-приложения

Смотреть

webformyself.com