怎么使用JavaScript操作JSON数据？-js教程-PHP中文网

怎么使用JavaScript操作JSON数据？

betcha

发布： 2025-09-22 12:00:01

原创

601人浏览过

答案是掌握JSON.parse()和JSON.stringify()的正确使用，并注意数据类型限制、语法规范及属性访问安全。首先，JSON.parse()用于将合法JSON字符串转为JS对象，但若字符串格式错误（如单引号、尾逗号）会抛出SyntaxError；其次，JSON.stringify()将JS对象转为JSON字符串，但会忽略undefined、函数和Symbol，Date则转为ISO字符串，可通过第三个参数美化输出格式；处理嵌套结构时需防范访问不存在属性导致的错误，推荐使用可选链（?.）避免TypeError；最后，始终确保JSON格式严格符合标准，避免解析失败。

怎么使用javascript操作json数据？

使用JavaScript操作JSON数据，核心就是两个方法：

JSON.parse()

登录后复制

和

JSON.stringify()

登录后复制

。前者负责把JSON格式的字符串变成我们JavaScript能直接用的对象或数组，后者则反过来，把JavaScript的对象或数组转换成JSON字符串。理解了这两个，剩下的就是JavaScript对象和数组的常规操作了。

要操作JSON，我们通常会遇到两种场景：一是拿到一个JSON字符串（比如从API请求回来），需要把它变成JS对象来处理；二是把JS对象转换成JSON字符串，准备发送给服务器或者存储起来。

对于第一种情况，

JSON.parse()

登录后复制

是你的好帮手。想象一下，你从后端拿到了一个字符串，长这样：

'{"name": "张三", "age": 30, "isStudent": false, "courses": ["数学", "英语"]}'

登录后复制

。这看起来像个对象，但它本质上是个字符串。

const jsonString = '{"name": "张三", "age": 30, "isStudent": false, "courses": ["数学", "英语"]}';
const dataObject = JSON.parse(jsonString);

console.log(dataObject.name); // 输出: 张三
console.log(dataObject.age);  // 输出: 30
console.log(dataObject.courses[0]); // 输出: 数学

登录后复制

你看，一旦解析了，它就成了地道的JavaScript对象，你就可以用点操作符或者方括号来访问它的属性了，就像操作任何普通对象一样。

立即学习“Java免费学习笔记（深入）”；

那反过来，如果你在前端构建了一个数据结构，比如用户填写的表单数据，想把它发给后端，通常也需要转换成JSON字符串。这时候就轮到

JSON.stringify()

登录后复制

出场了。

const userData = {
    id: 'user_123',
    username: '前端小李',
    email: 'xiaoli@example.com',
    preferences: {
        theme: 'dark',
        notifications: true
    },
    hobbies: ['coding', 'reading', 'hiking']
};

const jsonOutputString = JSON.stringify(userData);
console.log(jsonOutputString);
// 输出: {"id":"user_123","username":"前端小李","email":"xiaoli@example.com","preferences":{"theme":"dark","notifications":true},"hobbies":["coding","reading","hiking"]}

登录后复制

这里有个小细节，

JSON.stringify()

登录后复制

默认会把对象转换成一个紧凑的JSON字符串，不带任何缩进。如果你想让它更易读，可以给它传第二个和第三个参数。比如，第三个参数传一个数字，它就会用这个数字表示的空格数来缩进：

const prettyJsonString = JSON.stringify(userData, null, 2);
console.log(prettyJsonString);
/*
输出:
{
  "id": "user_123",
  "username": "前端小李",
  "email": "xiaoli@example.com",
  "preferences": {
    "theme": "dark",
    "notifications": true
  },
  "hobbies": [
    "coding",
    "reading",
    "hiking"
  ]
}
*/

登录后复制

这两个方法，就是JavaScript操作JSON的基石。掌握了它们，你就能在字符串和对象之间自由切换了。

JavaScript处理JSON数据时常见的“坑”和错误有哪些？

说实话，刚开始用JSON，谁没遇到过点问题呢？最常见的，也是最让人头疼的，可能就是

JSON.parse()

登录后复制

报错了。这通常意味着你尝试解析的字符串，根本就不是一个合法的JSON格式。比如，属性名没有用双引号括起来，或者字符串值里有未转义的特殊字符，再或者，结尾多了一个逗号（在JSON里，最后一个元素后面是不能有逗号的，这跟JavaScript对象字面量有点区别）。

Find JSON Path Online

Easily find JSON paths within JSON objects using our intuitive Json Path Finder

查看详情

举个例子，你可能会不小心写出这样的“假”JSON字符串：

const badJsonString1 = "{name: '小明', age: 25}"; // 属性名和字符串值都用了单引号
const badJsonString2 = '{"name": "小红", "city": "北京",}'; // 结尾多余的逗号
// console.log(JSON.parse(badJsonString1)); // 会报错：SyntaxError: Unexpected token 'n' at ...
// console.log(JSON.parse(badJsonString2)); // 会报错：SyntaxError: Unexpected token '}' at ...

登录后复制

遇到这种错误，控制台会提示

SyntaxError

登录后复制

，这时候就得仔细检查你的JSON字符串是不是严格遵循了JSON规范。尤其是在处理一些非标准数据源或者手动构建JSON字符串时，这种错误很常见。

另一个常见的“坑”是尝试访问一个不存在的属性。当你的JSON数据结构不确定，或者某个字段可能缺失时，直接

dataObject.someMissingProperty

登录后复制

可能会得到

undefined

登录后复制

。虽然这本身不是错误，但在后续操作中如果不加以判断，就可能导致更深层次的错误，比如

TypeError: Cannot read properties of undefined (reading 'nestedProperty')

登录后复制

。

const userData = JSON.parse('{"name": "Alice", "age": 28}');
console.log(userData.email); // undefined
// console.log(userData.email.address); // 这里就会报错，因为undefined没有address属性

登录后复制

为了避免这类问题，在访问可能不存在的属性时，最好加上条件判断，或者使用ES2020引入的可选链操作符（Optional Chaining）：

// 传统判断
if (userData.email && userData.email.address) {
    console.log(userData.email.address);
}

// 使用可选链
console.log(userData.email?.address); // 如果email不存在，直接返回undefined，不会报错

登录后复制

还有就是，

JSON.stringify()

登录后复制

在处理一些特殊值时，比如

undefined

登录后复制

、函数或者

Symbol

登录后复制

类型的值，它们是会被忽略的，不会出现在最终的JSON字符串里。而

Date

登录后复制

对象则会被转换成ISO格式的字符串。这些行为，如果你不清楚，有时候也会造成预期之外的结果。

const complexObject = {
    a: 1,
    b: undefined,
    c: function() {},
    d: Symbol('test'),
    e: new Date(),
    f: [1, undefined, 3]
};
const stringified = JSON.stringify(complexObject);
console.log(stringified);
// 输出: {"a":1,"e":"2023-10-27T...Z","f":[1,null,3]}
// 注意：b, c, d 被忽略了，数组里的 undefined 变成了 null

登录后复制

理解这些“默认行为”，能帮你少走很多弯路。