От автора: в обычных массивах можно использовать цикл for. Объекты JSON же отличаются от обычных массивов тем, что каждая ячейка содержит в себе пару свойство и значение. Чтобы извлечь эти составляющие массива и обращаться к ним по отдельности зачастую требуется другой подход. Цикл for..in – один из таких подходов.
Хорошим примером послужит созданный мной в предыдущей статье объект CSS цветов. JSON массив начинается так:
1 2 3 4 5 6 7 8 |
var cssColors = { "aliceblue": "#f0f8ff", "antiquewhite": "#faebd7", "aqua": "#00ffff", "aquamarine": "#7fffd4", "azure": "#f0ffff", ... } |
Чтобы создать диаграмму CSS цветов для той статьи, мне нужно было пройтись в цикле по объекту: другими словами, извлечь перечисленные свойства массива. Это легко можно сделать при помощи вариации цикла for с частичкой in:
1 2 3 |
for (var key in cssColors) { ... } |
Переменную key можно назвать как угодно (любое подходящее слово), в ней будет храниться свойство. Для вывода результата в консоль для теста можно изменить скрипт:
1 2 3 |
for (var key in cssColors) { console.log(key) } |
Вы получите следующее:
1 2 3 4 5 6 |
aliceblue antiquewhite aqua aquamarine azure ... |
Если хотите добавить значение свойства в вывод, можно добавить запятую и объект с ключом:
1 2 3 |
for (var key in cssColors) { console.log(key, cssColors[key]) } |
Результат:
1 2 3 4 5 |
aliceblue #f0f8ff antiquewhite #faebd7 aqua #00ffff aquamarine #7fffd4 azure #f0ffff |
На этой основе можно создать почти любую конструкцию: посмотрите пример демо с именованными CSS цветами на CodePen.
Неправильное использование и возможные ограничения
Особенность цикла for..in в том, что он может перечислять наследуемые свойства, а не только те, которые вы ожидаете увидеть в объекте. Защититься от этого можно с помощью теста hasOwnProperty:
1 2 3 4 5 |
for (var key in cssColors) { if (cssColors.hasOwnProperty(key)) { ... do something ... } } |
Данное условие проверяет, присвоено ли свойство напрямую объекту, и выводит его, если оно родное. У цикла for..in могут возникнуть проблемы с массивами с пустыми слотами. Общее правило – не стоит добавлять, удалять или изменять свойства в массиве во время его перебора.
JSON массив состоит из множества объектов, и рассматривать его нужно слегка по-другому. Более подробно о JSON массивах я расскажу в следующей статье.
Источник: //thenewcode.com/
Редакция: Команда webformyself.