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

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

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

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

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

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

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

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

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

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

aliceblue
antiquewhite
aqua
aquamarine
azure
...

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

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

Результат:

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..in могут возникнуть проблемы с массивами с пустыми слотами. Общее правило – не стоит добавлять, удалять или изменять свойства в массиве во время его перебора.

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

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

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

Курс по JavaScript: основы

Изучите JavaScript с нуля до результата!

Смотреть курс

Метки:

Комментарии Вконтакте:

Комментарии Facebook:

Добавить комментарий

Ваш e-mail не будет опубликован. Обязательные поля помечены *

Можно использовать следующие HTML-теги и атрибуты: <a href="" title=""> <abbr title=""> <acronym title=""> <b> <blockquote cite=""> <cite> <code> <del datetime=""> <em> <i> <q cite=""> <strike> <strong>

Я не робот.

Spam Protection by WP-SpamFree