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

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

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

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

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

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

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

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

Результат:

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

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

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

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

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

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

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

Метки:

Похожие статьи:

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