js如何操作json数据

JavaScript轻松玩转JSON数据：解析、构建与实用技巧**

JSON（JavaScript Object Notation）作为一种轻量级的数据交换格式，因其易于人阅读和编写，同时也易于机器解析和生成，在Web开发中占据了举足轻重的地位，JavaScript作为Web前端的核心语言，与JSON数据有着天然的紧密联系，本文将详细介绍JavaScript如何操作JSON数据，包括解析JSON字符串、构建JSON对象、读取、修改、删除数据以及处理JSON数组等常用操作。

什么是JSON？

在操作之前，我们先简单回顾一下JSON，JSON是一种基于JavaScript对象表示法的语法，但它独立于语言,它有两种主要结构：

对象（Object）：无序的键值对集合，以包裹，键名必须是字符串（双引号引起），值可以是字符串、数字、布尔值、null、数组或另一个对象。{"name": "张三", "age": 30, "isStudent": false}。
数组（Array）：有序的值列表，以 [] 包裹，值可以是任何JSON支持的类型。[1, "hello", {"key": "value"}, null]。

将JSON字符串解析为JavaScript对象

这是最常见的操作之一，当我们从服务器获取JSON格式的数据时，通常它是以字符串形式传输的,我们需要将其转换为JavaScript对象才能进行操作。

JavaScript提供了JSON.parse()方法来实现这一功能。

// 1. 定义一个JSON字符串
const jsonString = '{"name": "李四", "age": 25, "city": "北京"}';
// 2. 使用JSON.parse()将字符串解析为JavaScript对象
const jsObject = JSON.parse(jsonString);
// 3. 现在可以像操作普通JS对象一样操作它
console.log(jsObject.name); // 输出: 李四
console.log(jsObject.age);  // 输出: 25
console.log(jsObject.city); // 输出: 北京
// 示例：处理更复杂的JSON字符串（包含数组和嵌套对象）
const complexJsonString = '{"user": {"id": 101, "username": "dev"}, "hobbies": ["reading", "coding"], "active": true}';
const complexObject = JSON.parse(complexJsonString);
console.log(complexObject.user.username); // 输出: dev
console.log(complexObject.hobbies[0]);    // 输出: reading

注意事项：

JSON.parse() 要求字符串必须是合法的JSON格式，如果字符串格式不正确，会抛出SyntaxError异常。
JSON中的键名必须使用双引号，JavaScript对象的单引号在JSON.parse()中是不被允许的（除非是宽松模式或特定库）。

将JavaScript对象/数组转换为JSON字符串

当我们需要将JavaScript对象或数组发送到服务器，或者将其存储在本地存储（如localStorage）时，通常需要将其转换为JSON字符串，这时可以使用JSON.stringify()方法。

// 1. 定义一个JavaScript对象
const jsObject = {
    name: "王五",
    age: 28,
    skills: ["JavaScript", "Python", "React"],
    contact: {
        email: "wangwu@example.com",
        phone: "13800138000"
    }
};
// 2. 使用JSON.stringify()将对象转换为JSON字符串
const jsonString = JSON.stringify(jsObject);
console.log(jsonString);
// 输出: {"name":"王五","age":28,"skills":["JavaScript","Python","React"],"contact":{"email":"wangwu@example.com","phone":"13800138000"}}
// 3. 可以处理数组
const jsArray = [1, 2, {a: "b"}, "hello"];
const jsonArrayString = JSON.stringify(jsArray);
console.log(jsonArrayString);
// 输出: [1,2,{"a":"b"},"hello"]

JSON.stringify()的高级用法： JSON.stringify()还可以接受两个可选参数：一个 replacer 函数和一个 space 参数。

replacer 函数：可以指定哪些属性应该被包含在最终的JSON字符串中，该函数会遍历对象的所有属性,返回值将被序列化。

const user = {name: "赵六", age: 35, password: "123456"};
// 只序列化 name 和 age
const filteredJson = JSON.stringify(user, (key, value) => {
    if (key === "password") {
        return undefined; // 忽略 password 属性
    }
    return value;
});
console.log(filteredJson); // 输出: {"name":"赵六","age":35}

space 参数：用于格式化输出的JSON字符串，使其更易读，可以是数字（表示缩进的空格数，最多10）或字符串（用作缩进）。

const data = {name: "钱七", details: {job: "engineer", city: "Shanghai"}};
const prettyJson = JSON.stringify(data, null, 2); // 使用2个空格缩进
console.log(prettyJson);
/* 输出:
{
  "name": "钱七",
  "details": {
    "job": "engineer",
    "city": "Shanghai"
  }
}
*/

访问和修改JSON数据

一旦JSON字符串被解析为JavaScript对象,我们就可以像操作普通JavaScript对象一样访问和修改其属性。

const data = {
    id: 1,
    product: "Laptop",
    price: 7999,
    specs: {
        cpu: "Intel i7",
        ram: "16GB"
    },
    inStock: true
};
// 1. 访问属性
console.log(data.product);        // 输出: Laptop
console.log(data.specs.cpu);      // 输出: Intel i7
console.log(data["price"]);       // 输出: 7999 (也可以用方括号语法)
// 2. 修改属性
data.price = 7599;
data.specs.ram = "32GB";
console.log(data.price);         // 输出: 7599
console.log(data.specs.ram);     // 输出: 32GB
// 3. 添加新属性
data.color = "Silver";
data.specs.storage = "512GB SSD";
console.log(data.color);         // 输出: Silver
console.log(data.specs.storage); // 输出: 512GB SSD
// 4. 删除属性
delete data.inStock;
console.log(data.inStock);       // 输出: undefined

对于JSON数组,可以使用索引来访问和修改元素：

const fruits = ["apple", "banana", "orange"];
console.log(fruits[0]); // 输出: apple
fruits[1] = "grape";
console.log(fruits);   // 输出: ["apple", "grape", "orange"]
// 添加元素
fruits.push("mango");
console.log(fruits);   // 输出: ["apple", "grape", "orange", "mango"]
// 删除元素
fruits.pop();
console.log(fruits);   // 输出: ["apple", "grape", "orange"]

遍历JSON数据

遍历对象

可以使用for...in循环来遍历对象的可枚举属性。

const userInfo = {name: "孙八", age: 40, gender: "male"};
for (let key in userInfo) {
    if (userInfo.hasOwnProperty(key)) { // 确保是对象自身的属性，而不是继承的
        console.log(key + ": " + userInfo[key]);
    }
}
// 输出:
// name: 孙八
// age: 40
// gender: male

遍历数组

可以使用for循环、for...of循环或数组的高阶方法如forEach()、map()、filter()等。

const numbers = [1, 2, 3, 4, 5];
// for循环
for (let i = 0; i < numbers.length; i++) {
    console.log(numbers[i]);
}
// for...of循环 (推荐，更简洁)
for (const num of numbers) {
    console.log(num);
}
// forEach()
numbers.forEach((num, index) => {
    console.log(`Index ${index}: ${num}`);
});
// map() (创建新数组)
const doubled = numbers.map(num => num * 2);
console.log(doubled); // 输出: [2, 4, 6, 8, 10]