遍历JSON——深入了解JavaScript中的JSON对象

发布时间：2023-05-18

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数据。

推荐文章