JavaScript JSON 解析

Created: October-14, 2018

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

什么是 JSON

JSON 代表 JAVA SCRIPT Object Notation。JSON 是一种非常轻量级的数据交换格式，用于服务器和客户端之间的数据交换，可以快速轻松地解析和生成。

与 XML 一样，JSON 也是一种基于文本的格式，易于编写且易于理解，但与 XML 不同，JSON 数据结构占用少于 XML 版本的带宽。JSON 基于两个基本结构：

对象： 这被定义为键/值对的无序集合（即 key:value）。每个对象以左大括号 { 开头，以右大括号结束 } 。多个键/值对由逗号 , 分隔。
数组： 这被定义为有序的值列表。数组以左括号 [ 开头，以右括号 ] 结束。值以逗号 , 分隔。

在 JSON，属性名称或键总是字符串，而值可以是 string ，number ，true 或者 false ，null 甚至是 object 或者 array。字符串必须用双引号 " 括起来，并且可以包含转义字符，如 \n，\t 和 \。JSON 对象可能如下所示：

{
    "book": {
        "name": "Harry Potter and the Goblet of Fire",
        "author": "J. K. Rowling",
        "year": 2000,
        "genre": "Fantasy Fiction",
        "bestseller": true
    }
}

而 JSON 数组的示例如下所示：

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

提示： 数据交换格式是一种文本格式，用于在不同平台和操作系统之间交换或交换数据。JSON 是 Web 应用程序中最流行，最轻量级的数据交换格式。

用 JavaScript 解析 JSON 数据

在 JavaScript 中，你可以使用 JSON.parse() 方法轻松解析从 Web 服务器接收的 JSON 数据。此方法解析 JSON 字符串并构造字符串描述的 JavaScript 值或对象。如果给定的字符串无效 JSON，你将收到语法错误。

假设我们从 Web 服务器收到以下 JSON 编码的字符串：

{"name": "Peter", "age": 22, "country": "United States"}

现在，我们可以简单地使用 JavaScript JSON.parse() 方法将此 JSON 字符串转换为 JavaScript 对象，并使用点符号（.）访问单个值，如下所示：

// Store JSON data in a JS variable
var json = '{"name": "Peter", "age": 22, "country": "United States"}';

// Converting JSON-encoded string to JS object
var obj = JSON.parse(json);

// Accessing individual value from JS object
alert(obj.name); // Outputs: Peter
alert(obj.age); // Outputs: 22
alert(obj.country); // Outputs: United States

请查看有关PHP JSON 解析的教程，了解如何从 Web 服务器返回 JSON 数据作为响应，以及如何使用 PHP 对服务器端的 JSON 数据进行编码/解码。

在 JavaScript 中解析嵌套的 JSON 数据

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

/* Storing multi-line JSON string in a JS variable
using the new ES6 template literals */
var json = `{
    "book": {
        "name": "Harry Potter and the Goblet of Fire",
        "author": "J. K. Rowling",
        "year": 2000,
        "characters": ["Harry Potter", "Hermione Granger", "Ron Weasley"],
        "genre": "Fantasy Fiction",
        "price": {
            "paperback": "$10.40", "hardcover": "$20.32", "kindle": "$4.11"
        }
    }
}`;

// Converting JSON object to JS object
var obj = JSON.parse(json);

// Define recursive function to print nested values
function printValues(obj) {
    for(var k in obj) {
        if(obj[k] instanceof Object) {
            printValues(obj[k]);
        } else {
            document.write(obj[k] + "<br>");
        };
    }
};

// Printing all the values from the resulting object
printValues(obj);

document.write("<hr>");

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

在 JavaScript 中将数据编码为 JSON

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

Stringify 一个 JavaScript 对象

以下示例将向你展示如何将 JavaScript 对象转换为 JSON 字符串：

// Sample JS object
var obj = {"name": "Peter", "age": 22, "country": "United States"};

// Converting JS object to JSON string
var json = JSON.stringify(obj);
alert(json);

上面示例的输出将如下所示：

{"name":"Peter","age":22,"country":"United States"}

注意： 尽管 JavaScript 和 JSON 对象看起来非常相似，但它们并不完全相同。例如，在 JavaScript 中，对象属性名称可以用单引号（'...'）或双引号（...）括起来，或者可以完全省略引号。但是，在 JSON 中，所有属性名称必须用双引号括起来。

将一个 JavaScript 数组转化为字符串

同样，你可以将 JavaScript 数组转换为 JSON 字符串，如下所示：

// Sample JS array
var arr = ["Apple", "Banana", "Mango", "Orange", "Papaya"];

// Converting JS array to JSON string
var json = JSON.stringify(arr);
alert(json);

上面示例的输出将如下所示：

["Apple","Banana","Mango","Orange","Papaya"]

警告： 不要使用 eval() 函数来评估 JSON 数据（例如，包括 JSON 字符串中的函数定义并使用 eval() 方法将它们转换回可执行函数），因为它允许攻击者将恶意 JavaScript 代码注入你的应用程序。