javascript怎样解析和操作JSON数据?_javascript中JSON.stringify有什么用途?

18次阅读

javaScript 解析和操作 jsON 主要依靠 json.parse() 和 JSON.stringify():前者将合法 JSON 字符串转为 JS 值,支持 reviver 过滤;后者将 JS 值转为字符串,用于发送请求、本地存储等,支持 replacer 和 space 参数,但不支持函数、undefined循环引用等。

javascript怎样解析和操作JSON数据?_javascript中JSON.stringify有什么用途?

javascript 解析和操作 JSON 数据主要靠 JSON.parse()JSON.stringify() 两个原生方法,它们是处理前后端数据交换最常用、最安全的工具

如何解析 JSON 字符串(转成 JS 对象/数组)

使用 JSON.parse() 把符合 JSON 格式的字符串转换为 JavaScript 值(对象、数组、字符串、数字、布尔值或 NULL)。

  • 必须传入合法的 JSON 字符串,比如双引号包裹的键名、不支持单引号、末尾不能有逗号
  • 常见错误:用 eval()构造函数解析——不安全且易出错,坚决不用
  • 可选第二个参数为 reviver 函数,用于在解析过程中过滤或转换值

示例:

const jsonStr = ‘{“name”:”小明”,”age”:25,”hobbies”:[“读书”,”游泳”]}’;
const data = JSON.parse(jsonStr);
console.log(data.name); // “小明”

如何操作解析后的 JSON 数据

解析后得到的是标准 JS 对象或数组,可以像操作普通变量一样读取、修改、遍历:

立即学习Java免费学习笔记(深入)”;

  • 用点语法或方括号访问属性:data.agedata["hobbies"]
  • 修改属性:data.age = 26
  • 添加新字段:data.city = "杭州"
  • 遍历数组:data.hobbies.forEach(h => console.log(h))

注意:JSON 本身不支持函数、undefined、dateregexp 等类型,解析时这些会被忽略或报错。

JSON.stringify 的核心用途

JSON.stringify() 把 JavaScript 值(对象、数组等)转换成 JSON 字符串,主要用于:

  • 后端发送数据(如 fetch / axios 请求体)
  • 本地存储(localStorage 只接受字符串):localStorage.setItem("user", JSON.stringify(obj))
  • 调试输出结构化数据(比 console.log 更清晰)
  • 深拷贝简单对象(不含函数、循环引用、特殊类型):const copy = JSON.parse(JSON.stringify(original))

它也支持两个可选参数:replacer(筛选或转换字段)、space(美化缩进,如 2"  ")。

常见陷阱和注意事项

实际开发中容易踩坑的地方:

  • JSON.stringify(undefined)function()symbol → 返回 undefinedJSON.stringify([undefined, null, 1])[null,null,1]
  • 日期对象会变成 ISO 字符串:JSON.stringify(new Date())"2024-05-20T08:12:34.567Z"
  • 遇到循环引用会直接报错:TypeError: Converting circular structure to JSON
  • 想保留特殊类型(如 Date、map、Set),需手动在 replacer 中处理,或用第三方库(如 flatted、serialize-javascript

基本上就这些。用好这两个方法,JSON 处理就不复杂但容易忽略细节。

text=ZqhQzanResources