JavaScript 中 JSON 对象与 JSON 字符串相互转换实例
一、前置核心知识点补充
✅ 核心概念区分（重中之重）
在 JavaScript 开发中，很多开发者会混淆「JS 对象」和「JSON 对象」「JSON 字符串」，三者本质完全不同，也是转换的核心前提：
- JS 原生对象：JavaScript 的普通对象 / 数组，语法灵活，键名可加引号 / 不加引号、单引号 / 双引号均可，支持函数、undefined 等类型，如 var obj = {Name: "八戒", Age: 500}、var arr = [{Name: "八戒"}]，仅能在 JS 代码内直接调用。
- JSON 格式字符串：符合 JSON 官方语法规范的文本字符串，是前后端数据传输的唯一格式。语法要求：键名必须用双引号包裹、字符串值必须双引号、不支持函数 /undefined、数组 / 对象末尾无多余逗号，如 var str = '{ "Name": "八戒", "Age": "500" }'，特点是带引号包裹，无法直接调用属性。
- JSON 对象：本质就是符合 JSON 语法规范的 JS 对象，是转换后的产物，可直接通过 .属性名 或 [下标] 调用数据。
✅ 转换的核心意义
前端和后端进行数据交互（如 AJAX 请求、接口传参）时，只能传输字符串格式的数据，无法直接传输 JS 对象 / 数组。所以前端需要把 JS 对象转成 JSON 字符串传给后端，后端接收后解析；后端返回的 JSON 字符串，前端也需要转成 JS 对象才能进行数据渲染、遍历等操作，这就是 JSON 对象与 JSON 字符串相互转换的核心应用场景。
二、JavaScript 中 JSON 对象与 JSON 字符串相互转换实例
<html>
<head>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
<title></title>
<script type="text/javascript">
var obj = new Object();
obj.Name = "八戒"
obj.Age = 500;
//通过字面量的形式来定义对象
var obj1 = { "Name": "八戒", "Age": "500" };
var arr = [{ "Name": "八戒", "Age": "500" }, { "Name": "八戒1", "Age": "1000" }];
//JSON格式：将json的字面量表示形式，当做字符串存放，则为json格式字符串
var str = '{ "Name": "八戒", "Age": "500" }';
var jsonstrarr = '[{ "Name": "八戒", "Age": "500" }, { "Name": "八戒1", "Age": "1000" }];';
//将json字符串转换成js对象（数组）
var resobj = JSON.parse(str);
alert(resobj.Name);
</script>
</head>
<body>
</body>
</html>
三、在前端 js 对象和 json 对象的互转
✅ JS 对象转换成为 JSON 字符串
处理：引用一个 json2.js 文件，调用 JSON.stringify () 方法。例如：
var data = new Object();
var json_data = JSON.stringify(data);
PS：json2.js 这个文件在网上搜一下就能下载到。 补充知识点：
- JSON.stringify() 是 ECMAScript5 新增的原生方法，作用是将JS 对象 / 数组 序列化为标准 JSON 格式字符串；
- 引入json2.js的核心目的：为IE6、IE7、IE8 兼容模式 这类没有原生 JSON 对象的老旧浏览器做兼容，该文件会自动在全局挂载 JSON 对象，实现JSON.stringify()和JSON.parse()的兼容；
- 拓展用法：JSON.stringify()支持格式化和筛选数据，如 JSON.stringify(obj, null, 2) 会生成带 2 个空格缩进的格式化 JSON 字符串，便于阅读；
- 转换规则：转换时会自动过滤 JS 对象中的函数、undefined、Symbol 类型属性，保证生成的是纯标准 JSON 字符串。
✅ JSON 字符串转换成为 JS 对象
1. 处理：用 jQuery 的一个方法 $.parseJSON () 将 JSON 格式的数据转成 JS 对象。例如：
var json_data = $.getJSON();
var data = $.parseJSON(json_data);
（可用来成转换 js 数组） 补充知识点：
- $.parseJSON(jsonstr) 是 jQuery 封装的专用 JSON 解析方法，语法校验严格，只支持标准 JSON 格式字符串，解析非法 JSON 会抛出语法错误，安全性极高；
- 底层逻辑：jQuery 1.9 及以上版本中，该方法会优先调用浏览器原生的JSON.parse()，老旧浏览器中则使用内置的兼容解析逻辑，无需开发者手动处理兼容问题；
- 适配性：既能解析 JSON 对象格式字符串，也能解析 JSON 数组格式字符串，转换后可直接遍历 / 调用。
2. 将 json 转换成 js 对象的方法：
var json = eval('(' + result + ')');
通过上面这个表达式，就完成了将服务器端响应给客户端的 Json 格式的字符串解析成了一个 Json（格式的）对象，名称为 “json”，通过 “json.” 或者 “json []” 的方式便可进行数据访问。 补充知识点：
- 加小括号()的核心原因：JSON 字符串的首尾是{}或[]，直接用eval()解析时，JS 引擎会把{}识别为「代码块」而非「对象」，包裹()后会强制引擎将其解析为表达式，才能正确转换为 JS 对象；
- 语法容错性：eval()对 JSON 格式要求极低，支持键名无引号、单引号、末尾逗号等非标准格式，都能正常解析；
- 安全风险：eval()会执行 JSON 字符串中包含的任意 JavaScript 代码 / 表达式，如果解析的是后端返回的不可信数据、用户输入的恶意数据，会存在 XSS 攻击、代码注入的风险，非必要不使用。
四、在后台对 js 对象和 json 对象的互转
.NET Framework 4 在 System.Runtime.Serialization 中。利用 JavaScriptSerializer 类对数据进行序列化和反序列化示例：
//将param反序列列list集合
List<ApplyPart> _ApplyPart = new JavaScriptSerializer().Deserialize<List<ApplyPart>>(param);
补充知识点：
- 后端转换的核心逻辑和前端一致：后端接收前端传来的「JSON 字符串」，需要反序列化成后端编程语言的对象 / 集合才能处理；后端向前端返回数据时，需要将对象 / 集合序列化成「JSON 字符串」；
- 该示例是.NET 后端的标准处理方式，其他后端语言也有对应工具：Java 用FastJSON/Jackson、PHP 用json_encode()/json_decode()、Python 用json.dumps()/json.loads()，本质都是完成 JSON 字符串和后端对象的互转。
五、全场景转换方式汇总
✅ jQuery 插件支持的转换方式
$.parseJSON( jsonstr ); //jQuery.parseJSON(jsonstr),可以将json字符串转换成json对象
反过来，使用 serialize 系列方法：如：var fields = $("select, :radio").serializeArray();
反过来，使用 serialize 系列方法：如：var fields = $("select, :radio").serializeArray();补充说明：serializeArray() 是 jQuery 将表单元素值转换为「JS 数组对象」的方法，转换后可直接用JSON.stringify()转成 JSON 字符串提交后端，是表单传参的常用技巧。
✅ 浏览器原生支持的转换方式
JSON.parse(jsonstr); //可以将json字符串转换成json对象
JSON.stringify(jsonobj); //可以将json对象转换成json对符串
注：ie8 (兼容模式),ie7 和 ie6 没有 JSON 对象，需要引入 json.js 或 json2.js。补充优先级：该方式是现代前端开发的首选，优点是「原生底层实现、解析速度最快、语法严格、绝对安全」，无任何代码执行风险，兼容所有现代浏览器（Firefox，chrome，opera，safari，ie9，ie8 标准模式）。
✅ Javascript 原生支持的转换方式
eval('(' + jsonstr + ')'); //可以将json字符串转换成json对象,注意需要在json字符外包裹一对小括号
注：ie8 (兼容模式),ie7 和 ie6 也可以使用 eval () 将字符串转为 JSON 对象，但不推荐这些方式，这种方式不安全 eval 会执行 json 串中的表达式。补充重点提醒：eval()是所有转换方式里的「兜底方案」，仅在无 jQuery、无 json2.js、兼容 IE6/7 的极端老旧项目中临时使用，生产环境严禁用于解析「不可信数据」（如后端接口返回值、用户输入数据）。
