Від автора: у звичайних масивах можна використовувати цикл 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 масивах я розповім в наступній статті.
