JavaScript是一門常用的編程語言，目前在web開發中使用廣泛，可以處理眾多的數據格式和結構，其中之一就是JSON，JSON(JavaScript Object Notation) 是一種輕量級的數據交換格式，易于閱讀和編寫，同時又易于機器解析和生成。
在JavaScript中，遍歷JSON能夠幫助我們處理大量的JSON數據并將這些數據展示在前端頁面中。同時通過遍歷JSON也可以獲取到某些特定的數據項，從而對數據進行處理。
下面讓我們看一下如何使用JavaScript來遍歷JSON數據：
const jsonData = {
"name": "Tom",
"age": 18,
"phone": "123456789",
"address": {
"province": "Guangdong",
"city": "Shenzhen"
},
"hobby": ["reading", "music"]
}
// 遍歷jsonData中的所有屬性和值
for(let key in jsonData) {
console.log(key + " : " + jsonData[key])
}以上代碼展示了如何使用for-in循環來遍歷JSON數據。其中，key表示JSON中的屬性名，而jsonData[key]表示該屬性所對應的值。
接下來我們看一下如何遍歷JSON數組：
const jsonArray = [
{
"name": "Tom",
"age": 18
},
{
"name": "Jerry",
"age": 20
},
{
"name": "Marry",
"age": 22
}
]
// 遍歷jsonArray中的每個元素
jsonArray.forEach(function(obj) {
for(let key in obj) {
console.log(key + " : " + obj[key])
}
})以上代碼展示了如何使用forEach方法來遍歷JSON數組。其中，obj表示數組中的某個元素，而key表示該元素中的屬性名。
不僅可以在控制臺中輸出JSON數據，還可以將其展示在前端頁面中。
// html代碼：
<ul id="jsonList"></ul>
// js代碼
const jsonData = [
{
"name": "Tom",
"age": 18
},
{
"name": "Jerry",
"age": 20
},
{
"name": "Marry",
"age": 22
}
]
// 在頁面中展示JSON數據
const jsonList = document.querySelector('#jsonList');
jsonData.forEach(function(obj) {
const li = document.createElement('li');
for(let key in obj) {
const span = document.createElement('span');
span.textContent = key + ": " + obj[key];
li.appendChild(span);
}
jsonList.appendChild(li);
})上面的代碼使用了document.createElement()方法來在頁面中創建了一個ul元素。在遍歷JSON數據時，使用了querySelector()方法獲取到該元素并向其中添加li和span元素的數據。
以上就是關于JavaScript遍歷JSON中的一些方法。通過這些方法我們可以在實際網站中使用JavaScript以及JSON實現數據處理和展示。
下一篇div 表示什么