JS JSON转换 – JavaScript高级教程

上一章JavaScript教程请查看：JS严格模式

在本教程中，我们将学习如何用JavaScript编码和解码JSON数据。

JSON是什么？

JSON代表JavaScript对象符号，JSON是一种非常轻量级的数据交换格式，用于服务器和客户端之间的数据交换，它快速且易于解析和生成。

与XML一样，JSON也是一种基于文本的格式，易于编写，也易于人类和计算机理解，但与XML不同，JSON数据结构占用的带宽比XML版本少。JSON基于两个基本结构:

• 对象: 这被定义为键/值对(即键:值)的无序集合。每个对象以左花括号{开始，以右花括号}结束。多个键/值对由逗号分隔。
• 数组: 这是一个有序的值列表。数组以左括号开始[以右括号结束]。值之间用逗号分隔。

在JSON中，属性名或键总是字符串，而值可以是字符串、数字、真或假、null，甚至是对象或数组。字符串必须用双引号括起来，并且可以包含像\n、\t和\这样的转义字符。JSON对象可能是这样的:

{
    "book": {
        "name": "Harry Potter",
        "author": "J. K. Rowling",
        "year": 2000,
        "genre": "Fiction",
        "bestseller": true
    }
}

而JSON数组的一个例子是这样的

{
    "fruits": [
        "Apple",
        "Banana",
        "Strawberry",
        "Mango"
    ]
}

提示: 数据交换格式是文本格式用于交换或不同的平台和操作系统之间交换数据，JSON是最受欢迎的和轻量级的数据交换格式的web应用程序。

在JavaScript解析JSON数据

在JavaScript中，你可以很容易地从web服务器接收解析JSON数据使用JSON.parse()方法。该方法解析JSON字符串和构造的JavaScript值或对象所描述的字符串。如果给定字符串不是有效的JSON，你会得到一个语法错误。

假设我们已经收到了json编码的字符串从web服务器:

{"name": "Peter", "age": 22, "country": "UK"}

现在，我们可以简单地使用JavaScript JSON.parse()方法将这个JSON字符串转换成JavaScript对象，并使用点符号(.)访问各个值，就像这样：

// 将JSON数据存储在JS变量中
var json = '{"name": "Peter", "age": 22, "country": "UK"}';

// 将json编码的字符串转换成JS对象
var obj = JSON.parse(json);

// 从JS对象访问单个值
alert(obj.name); // : Peter
alert(obj.age); // : 22
alert(obj.country); // : UK

请参阅关于PHP JSON解析的教程，了解如何从web服务器返回JSON数据作为响应，以及如何在服务器端使用PHP编码/解码JSON数据。

用JavaScript解析嵌套的JSON数据

JSON对象和数组也可以嵌套。一个JSON对象可以任意包含其他JSON对象、数组、嵌套数组、JSON对象数组等等。下面的示例将向你展示如何解析嵌套的JSON对象并提取JavaScript中的所有值。

/* 使用新的ES6模板文本在JS变量中存储多行JSON字符串 */
var json = `{
    "book": {
        "name": "Harry Potter",
        "author": "J. K. Rowling",
        "year": 2000,
        "characters": ["Harry Potter", "Hermione Granger", "Ron Weasley"],
        "genre": "Fiction",
        "price": {
            "paperback": "$10.40", "hardcover": "$20.32", "kindle": "$4.11"
        }
    }
}`;

// 将JSON对象转换成JS对象
var obj = JSON.parse(json);

// 定义递归函数来打印嵌套的值
function printValues(obj) {
    for(var k in obj) {
        if(obj[k] instanceof Object) {
            printValues(obj[k]);
        } else {
            document.write(obj[k] + "<br>");
        };
    }
};

// 打印结果对象的所有值
printValues(obj);

document.write("<hr>");

// Printing a single value
document.write(obj["book"]["author"] + "<br>");  // : J. K. Rowling
document.write(obj["book"]["characters"][0] + "<br>");  // Prints: Harry Potter
document.write(obj["book"]["price"]["hardcover"]);  // : $20.32

在JavaScript中将数据编码为JSON

有时，需要在Ajax通信期间将代码中的JavaScript对象或值传输到服务器。JavaScript为此提供了JSON.stringify()方法，该方法将JavaScript值转换为JSON字符串，如下所示:

将JavaScript对象字符串化

下面的示例将向你展示如何将JavaScript对象转换为JSON字符串:

// 简单JS对象
var obj = {"name": "Peter", "age": 22, "country": "UK"};

// 将JS对象转换成JSON字符串
var json = JSON.stringify(obj);
alert(json);

注意: 尽管JavaScript和JSON对象看起来非常相似，但它们并不完全相同。例如，在JavaScript中，对象属性名可以用单引号括起来(‘…’)或双引号括起来(“…”)，也可以完全省略引号。但是，在JSON中，所有属性名都必须用双引号括起来。

字符串化一个JavaScript数组

类似地，你可以将JavaScript数组转换为JSON字符串，如下所示:

// 简单JS对象
var arr = ["Apple", "Banana", "Mango", "Orange", "Papaya"];

// 转换JS数组为JSON字符串
var json = JSON.stringify(arr);
alert(json);

警告: 不要使用eval()函数来评估JSON数据(例如，在JSON字符串中包含函数定义，并使用eval()方法将其转换回可执行函数)，因为这会让攻击者将恶意JavaScript代码注入到你的应用程序中。