JavaScript JSON 解析

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

什么是 JSON

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

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

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

在 JSON,属性名称或键总是字符串,而值可以是 stringnumbertrue 或者 falsenull 甚至是 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 代码注入你的应用程序。