JavaScript 解析 JSON 数据完整指南:从引入库到对象操作

作者:纸飞机

时间:2026-10-28

浏览:226

本文详细介绍 JavaScript 中解析 JSON 数据的方法。内容涵盖如何引入 JSON-js 库,通过示例展示 JSON 对象的创建、属性读取及修改操作。同时对比分析了使用 eval 函数和 parseJSON 方法将 JSON 字符串转换为对象的区别与具体代码实现,帮助开发者掌握前端数据处理技巧。

文章目录

本文详细介绍 JavaScript 中解析 JSON 数据的具体方法,旨在为读者提供实用的参考代码与操作思路。

获取与引入 JSON 库

首先需要获取 JSON 处理库。你可以访问 http://www.json.org/json-zh.html 自行查找适用于 JavaScript 的库,或者直接前往 GitHub 仓库 https://github.com/douglascrockford/JSON-js 下载。此外,还需了解如何由 PHP 后端生成标准的 JSON 格式数据。

接下来是在网页中引入并使用该库。

具体代码引用如下:

<script src="scripts/json.js"></script>
调用示例:alert(data.toJSONString());

 

注意,如果该方法返回 false,则表明当前数据为空或无效。


 

JSON 对象的创建与属性操作

以下是具体的 JavaScript 代码实现部分:


代码如下:

function showJSON() {
var user =
     {   
"username":"tom",
"age":20,
"info": {"tel":"123456","cellphone":"98765"},
"address":
       [   
{"city":"shanghai","postcode":"201203"},
{"city":"suzhou","postcode":"200000"}
             ]   
     }   
       
alert(user.username);
alert(user.age);
alert(user.info.cellphone);
alert(user.address[0].city);
alert(user.address[0].postcode);
}

演示如何修改 JSON 对象中的属性值。


修改代码如下:

user.username ="jerry";

使用 eval 转换 JSON 字符串

除了直接操作对象,还可以使用 eval 函数将 JSON 字符串转换为 JavaScript 对象。


相关代码如下:

function myEval() {
var str = '{"name":"Violet","occupation":"character"}';
var bj = eval('(' + str + ')');
alert(obj.toJSONString());
}

 

使用 parseJSON 方法解析

或者,可以使用更安全的 parseJSON() 方法进行转换。


代码如下:

function myEval() {
var str = '{"name":"Violet","occupation":"character"}';
var bj = str.parseJSON();
alert(obj.toJSONString());
}

希望上述关于 JavaScript 程序设计中的 JSON 处理内容能对你有所帮助。

实用工具推荐

电子包浆

绿化、压缩、噪点和虚拟水印,自由调节做旧程度。

使用 ›
图片压缩

选择画质和输出格式,预览压缩前后的大小。

使用 ›
相关文章