遍歷JSON——深入了解JavaScript中的JSON對象

JSON（JavaScript Object Notation）是一種輕量級的數據交換格式，易於人們閱讀和編寫。它在API、配置文件和日誌文本中廣泛使用。在JavaScript中，JSON是一種內置對象，它提供了用於處理JSON數據的方法和屬性。在本次文章中，我們將深入探究JSON對象，解析JSON數據和遍歷JSON對象的方法。

一、遍歷JSON對象

遍歷JSON對象可以使用for循環，for-in循環和Object.keys()方法。首先，先定義一個JSON對象：

let person = {
  "name": "John",
  "age": 30,
  "city": "New York"
};

使用for循環遍歷JSON對象：

for(let key in person) {
  console.log(key + " : " + person[key]);
}

使用for-in循環遍歷JSON對象：

for(let key in person) {
  if(person.hasOwnProperty(key)) {
    console.log(key + " : " + person[key]);
  }
}

使用Object.keys()方法遍歷JSON對象：

Object.keys(person).forEach(function(key) {
  console.log(key + " : " + person[key]);
});

二、遍歷JSON對象給input賦值

在Web開發中，常常需要使用JSON對象來獲取表單的值或者設置表單的值。以下是設置一個input的value值的方法：

let nameInput = document.getElementById('name');
nameInput.value = person.name;

以下是獲取input的value值的方法：

let nameInput = document.getElementById('name');
person.name = nameInput.value;

三、遍歷JSON數組

與遍歷JSON對象相比，遍歷JSON數組有一些不同。以下是JSON數組的一個示例：

let animals = [
    {"name":"cat", "age":2},
    {"name":"dog", "age":3},
    {"name":"rabbit", "age":1}
];

使用forEach遍歷JSON數組：

animals.forEach(function(animal) {
    console.log(animal.name + " : " + animal.age);
});

使用for循環遍歷JSON數組：

for(let i = 0; i < animals.length; i++) {
    console.log(animals[i].name + " : " + animals[i].age);
}

四、遍歷JSONObject

遍歷JSONObject的方式與遍歷JSON對象類似，可以使用for循環，for-in循環和Object.keys()方法。以下是一個JSONObject的示例：

let fruit = {
    "apple": {"color":"red", "price":2},
    "banana": {"color":"yellow", "price":1.5},
    "orange": {"color":"orange", "price":1}
};

使用for循環遍歷JSONObject：

for(let key in fruit) {
  console.log(key + " : " + fruit[key].color + ", " + fruit[key].price);
}

使用for-in循環遍歷JSONObject：

for(let key in fruit) {
  if(fruit.hasOwnProperty(key)) {
    console.log(key + " : " + fruit[key].color + ", " + fruit[key].price);
  }
}

使用Object.keys()方法遍歷JSONObject：

Object.keys(fruit).forEach(function(key) {
  console.log(key + " : " + fruit[key].color + ", " + fruit[key].price);
});

五、遍歷JSON對象的鍵和值

要遍歷JSON對象的鍵和值，只需要使用for-in循環即可。

for(let key in person) {
  console.log("鍵：" + key + ", 值：" + person[key]);
}

六、遍歷JSON中每一項

使用foreach遍歷JSON每一項：

let jsonData = ['{"name":"alice", "age":18}', '{"name":"bob", "age":19}', '{"name":"charles", "age":20}'];
jsonData.forEach(function (item, index) {
  console.log(index + " : " + item);
})

七、遍歷JSONArray獲取數據

遍歷JSONArray獲取數據可以使用for循環，for-in循環和forEach方法。以下是JSONArray的一個示例：

let persons = [
    {"name": "Alice", "age":18},
    {"name": "Bob", "age":19},
    {"name": "Charles", "age":20},
];

使用for循環遍歷JSONArray獲取數據：

for(let i = 0; i < persons.length; i++) {
    console.log(persons[i].name + " : " + persons[i].age);
}

使用for-in循環遍歷JSONArray獲取數據：

for(let key in persons) {
  if(persons.hasOwnProperty(key)) {
    console.log(persons[key].name + " : " + persons[key].age);
  }
}

使用forEach方法遍歷JSONArray獲取數據：

persons.forEach(function(person) {
    console.log(person.name + " : " + person.age);
});

八、遍歷JSONObject的方式

使用for循環遍歷JSONObject：

for(let key in fruit) {
  console.log(key + " : " + JSON.stringify(fruit[key]));
}

使用for-in循環遍歷JSONObject：

for(let key in fruit) {
  if(fruit.hasOwnProperty(key)) {
    console.log(key + " : " + JSON.stringify(fruit[key]));
  }
}

九、遍歷JSONObject的key

獲取JSONObject的key可以使用Object.keys()方法或者使用for-in循環。

let keys = Object.keys(fruit);
console.log(keys);

for(let key in fruit) {
  console.log(key);
}

十、JS遍歷JSON數組選取方法

在實際開發中，常常需要從JSON數組中選取特定的元素。以下是使用for循環和filter方法選取JSON數組中的元素：

let persons = [
    {"name": "Alice", "age":18},
    {"name": "Bob", "age":19},
    {"name": "Charles", "age":20},
];
let adults = [];  // 保存年齡大於等於18的元素
for(let i = 0; i < persons.length; i++) {
    if(persons[i].age >= 18) {
        adults.push(persons[i]);
    }
}
console.log(adults);

使用filter方法選取JSON數組中的元素：

let adults = persons.filter(function(person) {
    return person.age >= 18;
})
console.log(adults);

在web開發中，我們總是和json打交道，本文深入的介紹了JSON的遍歷方式。通過了解JSON對象，我們可以更好地理解API、配置文件和日誌文本的應用，也可以使我們更好地操作JSON數據。