js如何存取json数据

JavaScript中JSON数据的存取全解析**

JSON（JavaScript Object Notation）作为一种轻量级的数据交换格式，因其易于人阅读和编写，也易于机器解析和生成，在Web开发中得到了广泛应用，JavaScript作为Web前端的核心语言，与JSON数据有着天然的紧密联系，本文将详细介绍如何在JavaScript中存取JSON数据，包括JSON数据的解析（读取）和序列化（存储）。

什么是JSON？

在存取方法之前,我们先简单回顾一下JSON，JSON是JavaScript对象表示法的缩写，它基于JavaScript的一个子集，JSON数据以键值对的形式存在，结构清晰，类似于JavaScript中的对象和数组。

一个简单的JSON对象示例：

{
  "name": "张三",
  "age": 30,
  "isStudent": false,
  "hobbies": ["reading", "swimming"],
  "address": {
    "city": "北京",
    "district": "朝阳区"
  }
}

JSON支持的数据类型包括：字符串（用双引号括起）、数字、布尔值（true/false）、null、数组（方括号括起）以及对象（花括号括起）。

读取（解析）JSON数据

在JavaScript中,读取JSON数据通常指的是将JSON格式的字符串转换为JavaScript对象或数组，这个过程称为“解析”（Parsing），主要有以下几种常见场景和方法：

从JSON字符串解析为JavaScript对象/数组

这是最常见的JSON读取操作,JavaScript提供了JSON.parse()方法来完成这个转换。

语法： JSON.parse(text[, reviver])

• text: 必需，一个有效的JSON字符串。
• reviver: 可选，一个转换结果的函数，对象的每个成员会依次调用此函数。

示例：

var jsonString = '{"name": "李四", "age": 25, "city": "上海"}';
// 使用JSON.parse()将JSON字符串转换为JavaScript对象
var obj = JSON.parse(jsonString);
console.log(obj); // 输出: {name: "李四", age: 25, city: "上海"}
console.log(obj.name); // 输出: 李四
console.log(obj.age);  // 输出: 25
// 包含数组和嵌套对象的JSON字符串
var complexJsonString = '{"id": 101, "items": ["item1", "item2"], "details": {"weight": "1kg", "color": "red"}}';
var complexObj = JSON.parse(complexJsonString);
console.log(complexObj.items[0]); // 输出: item1
console.log(complexObj.details.color); // 输出: red

注意事项：

• JSON.parse()要求传入的字符串必须是严格符合JSON格式的，否则会抛出SyntaxError异常。
• JSON字符串中的属性名必须用双引号括起来,JavaScript对象的单引号在JSON中是不合法的。

从服务器获取JSON数据（AJAX/Fetch）

在实际开发中,JSON数据常常来自服务器端，我们可以通过AJAX（XMLHttpRequest）或现代的Fetch API来获取，并解析返回的JSON响应。

使用Fetch API示例（推荐）：

// 假设有一个返回JSON数据的API端点
fetch('https://api.example.com/data')
  .then(response => {
    // 检查响应是否成功
    if (!response.ok) {
      throw new Error('Network response was not ok');
    }
    // 使用response.json()解析JSON数据，这个方法返回一个Promise
    return response.json();
  })
  .then(data => {
    // data已经是解析后的JavaScript对象
    console.log('从服务器获取的数据:', data);
    console.log(data.name); // 假设数据中有name属性
  })
  .catch(error => {
    console.error('获取数据时出错:', error);
  });

使用XMLHttpRequest (XHR)示例：

var xhr = new XMLHttpRequest();
xhr.open('GET', 'https://api.example.com/data', true);
xhr.onreadystatechange = function() {
  if (xhr.readyState === 4 && xhr.status === 200) {
    // 使用JSON.parse()解析响应文本
    var data = JSON.parse(xhr.responseText);
    console.log('从XHR获取的数据:', data);
  } else if (xhr.readyState === 4) {
    console.error('获取数据失败:', xhr.status);
  }
};
xhr.send();

从本地存储（LocalStorage/SessionStorage）读取JSON数据

HTML5提供了本地存储API,可以将数据以字符串形式存储在浏览器中，如果存储的是JSON数据，读取时需要先将其转换为字符串（如果存储的是对象，实际上是先序列化了），然后使用JSON.parse()解析回来。

示例：

// 假设我们已经存储了一个JSON字符串
localStorage.setItem('userInfo', '{"username": "王五", "loginCount": 5}');
// 从localStorage读取数据
var storedUserInfo = localStorage.getItem('userInfo');
// 使用JSON.parse()解析
var userInfoObj = JSON.parse(storedUserInfo);
console.log(userInfoObj.username); // 输出: 王五

存储（序列化）JSON数据

与读取相反,存储JSON数据指的是将JavaScript对象或数组转换为JSON格式的字符串，这个过程称为“序列化”（Serialization），JavaScript提供了JSON.stringify()方法来完成这个转换。

语法： JSON.stringify(value[, replacer[, space]])

• value: 必需，要转换的JavaScript对象或数组。
• replacer: 可选，用于转换结果的函数或数组。
• space: 可选，格式化输出JSON字符串的缩进、空格等。

示例：

var userObj = {
  name: "赵六",
  age: 28,
  email: "zhaoliu@example.com",
  isActive: true
};
// 使用JSON.stringify()将JavaScript对象转换为JSON字符串
var jsonString = JSON.stringify(userObj);
console.log(jsonString); // 输出: {"name":"赵六","age":28,"email":"zhaoliu@example.com","isActive":true}
// 使用space参数进行格式化输出，方便阅读
var formattedJsonString = JSON.stringify(userObj, null, 2);
console.log(formattedJsonString);
/*
输出:
{
  "name": "赵六",
  "age": 28,
  "email": "zhaoliu@example.com",
  "isActive": true
}
*/

使用replacer函数示例：

var userObj = {name: "钱七", age: 35, password: "123456"};
// 只序列化name和age属性
var filteredJsonString = JSON.stringify(userObj, ['name', 'age']);
console.log(filteredJsonString); // 输出: {"name":"钱七","age":35}
// 使用函数控制序列化过程
var funcReplacerJsonString = JSON.stringify(userObj, function(key, value) {
  if (key === 'password') {
    return undefined; // 过滤掉password属性
  }
  return value;
});
console.log(funcReplacerJsonString); // 输出: {"name":"钱七","age":35}

将JSON数据存储到本地存储（LocalStorage/SessionStorage）

本地存储只能存储字符串类型的数据,在存储JavaScript对象时，必须先使用JSON.stringify()将其序列化为JSON字符串。

示例：

var product = {
  id: "P001",
  name: "智能手机",
  price: 3999,
  specs: {
    screen: "6.1英寸",
    storage: "128GB"
  }
};
// 序列化为JSON字符串
var productJsonString = JSON.stringify(product);
// 存储到localStorage
localStorage.setItem('productInfo', productJsonString);
// 验证存储（从localStorage读取并解析）
var storedProductString = localStorage.getItem('productInfo');
var storedProductObj = JSON.parse(storedProductString);
console.log(storedProductObj.name); // 输出: 智能手机
console.log(storedProductObj.specs.screen); // 输出: 6.1英寸

注意事项与最佳实践

1. 错误处理：使用JSON.parse()时，务必确保传入的是有效的JSON字符串，或者使用try...catch块来捕获可能的SyntaxError异常。

   var malformedJson = "{name: 'Invalid', age: 30}"; // 属性名没有双引号
   try {
     var obj = JSON.parse(malformedJson);
   } catch (error) {
     console.error("JSON解析失败:", error.message);
   }

2. 循环引用：如果JavaScript对象中存在循环引用（对象的一个属性指向对象本身），JSON.stringify()会抛出错误。

   var obj = {};
   obj.self = obj;
   // JSON.stringify(obj); // 会抛出 TypeError: Converting circular structure to JSON

3. 函数和undefined：JSON.stringify()会忽略对象中的函数和undefined值。