JS处理JSON数据|极客笔记

JS处理JSON数据

JSON（JavaScript Object Notation）是一种轻量级的数据交换格式，常用于前端与后端之间的数据传输和交互。在前端开发中，我们经常需要处理JSON数据，例如解析JSON字符串、序列化JavaScript对象为JSON字符串等。本文将详细介绍如何使用JavaScript处理JSON数据。

JSON的基本概念

JSON是一种文本格式，具有易读、易写的特点。它由键值对构成，键和值都是字符串。JSON对象用大括号{}包裹，键值对之间用逗号分隔；JSON数组用中括号[]包裹，数组元素之间用逗号分隔。

下面是一个简单的JSON示例：

{
  "name": "John",
  "age": 30,
  "isStudent": false,
  "hobbies": ["reading", "coding"]
}

解析JSON字符串

在JavaScript中，我们可以使用JSON.parse()方法将JSON字符串解析为JavaScript对象。

const jsonStr = '{"name": "John", "age": 30, "isStudent": false, "hobbies": ["reading", "coding"]}';
const jsonObj = JSON.parse(jsonStr);

console.log(jsonObj.name); // John
console.log(jsonObj.age); // 30
console.log(jsonObj.hobbies); // ["reading", "coding"]

将JavaScript对象序列化为JSON字符串

我们可以使用JSON.stringify()方法将JavaScript对象序列化为JSON字符串。

const obj = {
  name: 'John',
  age: 30,
  isStudent: false,
  hobbies: ['reading', 'coding']
};

const jsonString = JSON.stringify(obj);
console.log(jsonString); // {"name":"John","age":30,"isStudent":false,"hobbies":["reading","coding"]}

处理JSON数据

遍历JSON对象

我们可以使用for-in循环遍历JSON对象的键值对。

const jsonObj = {
  name: 'John',
  age: 30,
  isStudent: false,
  hobbies: ['reading', 'coding']
};

for (const key in jsonObj) {
  console.log(key + ': ' + jsonObj[key]);
}

访问嵌套JSON对象的属性

如果JSON对象中包含嵌套的对象，我们可以通过多层次的点号（.）或者中括号（[]）来访问其属性。

const nestedObj = {
  name: 'John',
  address: {
    street: '123 Main St',
    city: 'New York'
  }
};

console.log(nestedObj.address.street); // 123 Main St
console.log(nestedObj['address']['city']); // New York

处理JSON数组

我们可以使用for循环遍历JSON数组，并对每个元素进行操作。

const jsonArray = [
  { name: 'John', age: 30 },
  { name: 'Alice', age: 25 },
  { name: 'Bob', age: 35 }
];

jsonArray.forEach(item => {
  console.log(item.name + ' is ' + item.age + ' years old');
});

异步加载JSON数据

在实际开发中，我们通常需要通过网络请求获取JSON数据。我们可以使用fetch或者XMLHttpRequest来异步加载JSON数据。

使用fetch加载JSON数据

fetch('data.json')
  .then(response => response.json())
  .then(data => {
    console.log(data);
  })
  .catch(error => {
    console.error('Error: ', error);
  });

使用XMLHttpRequest加载JSON数据

const xhr = new XMLHttpRequest();
xhr.open('GET', 'data.json', true);

xhr.onreadystatechange = function () {
  if (xhr.readyState === 4 && xhr.status === 200) {
    const data = JSON.parse(xhr.responseText);
    console.log(data);
  }
};

xhr.send();