本文介绍如何在 JavaScript 中解析 JSON 数据。通过 JSON.parse() 将 JSON 字符串转换为对象，并利用点号或方括号语法访问嵌套属性与数组元素，同时演示了无效路径返回 undefined 的情况。
JavaScript 解析 JSON 数据示例
本文通过具体实例展示 JavaScript 解析 JSON 数据的方法，供读者参考学习。
示例中使用的 JSON 数据结构如下：
{
"name": "mkyong",
"age": 30,
"address": {
"streetAddress": "88 8nd Street",
"city": "New York"
},
"phoneNumber": [
{
"type": "home",
"number": "111 111-1111"
},
{
"type": "fax",
"number": "222 222-2222"
}
]
}
在 JavaScript 中获取 JSON 对象时，需先调用 JSON.parse() 进行解析，随后使用“.”或“[]”符号访问其属性。
对应的 JavaScript 代码如下：
<script>
var data = '{"name": "mkyong","age": 30,"address": {"streetAddress": "88 8nd Street","city": "New York"},"phoneNumber": [{"type": "home","number": "111 111-1111"},{"type": "fax","number": "222 222-2222"}]}';
var json = JSON.parse(data);
console.log(json["name"]); //mkyong
console.log(json.name); //mkyong
console.log(json.address.streetAddress); //88 8nd Street
console.log(json["address"].city); //New York
console.log(json.phoneNumber[0].number); //111 111-1111
console.log(json.phoneNumber[1].type); //fax
console.log(json.phoneNumber.number); //undefined
</script>
代码运行后的输出结果如下：
读者可借助在线 HTML/CSS/JavaScript 代码运行工具：http://tools.jb51.net/code/HtmlJsRun 测试上述代码的执行效果。
此外，推荐以下实用的 JSON 在线工具供进一步操作使用：
在线 JSON 代码检验、格式化与美化工具： http://tools.jb51.net/code/json
JSON 在线格式化工具： http://tools.jb51.net/code/jsonformat
在线 XML 与 JSON 互转工具： http://tools.jb51.net/code/xmljson
JSON 代码在线格式化、美化、压缩、编辑及转换工具： http://tools.jb51.net/code/jsoncodeformat
在线 JSON 压缩与转义工具： http://tools.jb51.net/code/json_yasuo_trans
如需了解更多 JavaScript 相关内容，可查阅本站专题：《JavaScript 中 json 操作技巧总结》、《JavaScript 查找算法技巧总结》、《JavaScript 错误与调试技巧总结》、《JavaScript 数据结构与算法技巧总结》、《JavaScript 遍历算法与技巧总结》及《JavaScript 数学运算用法总结》。
希望本文的内容对大家的 JavaScript 编程有所帮助。