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

Stack Overflow на русском

Loading…

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

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

ru.stackoverflow.com

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

Stack Overflow на русском

Loading…

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

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

ru.stackoverflow.com

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

Stack Overflow на русском

Loading…

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

ru.stackoverflow.com

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

Перебор объекта 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:

Перебор объекта JSON при помощи цикла 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

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

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.

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

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

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

Узнать подробнее Перебор объекта JSON при помощи цикла for..in

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

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

Смотреть

webformyself.com