JavaScript高级程序设计读书笔记之JSON

绝地灬酷狼 2022-07-15 07:27 147阅读 0赞

JSON（JavaScript Object Notation）JavaScript对象表示法。JSON是JavaScript的一个严格的子集，利用了JavaScript中的一些模式来表示结构化数据。关于JSON，最重要的是理解它是一种数据格式，不是一种编程语言。虽然具有相同的语法形式，但JSON并不从属于JavaScript。而且，并不是只用JavaScript才使用JSON，很多语言都有对JSON的解析器和序列化器。JSON(JavaScript Object Notation) 是一种轻量级的数据交换格式，采用完全独立于语言的文本格式，是理想的数据交换格式。同时，JSON是 JavaScript 原生格式，这意味着在 JavaScript 中处理 JSON数据不须要任何特殊的 API 或工具包。

**语法**

**简单值**

最简单的JSON形式就是简单值。

这是JSON表示数值5的形式，类似表示字符串：

“Hello World”

JavaScript与JSON表示字符串的最大区别在于，JSON字符串必须使用双引号。

**对象**

JavaScript的对象字面量：

var person = {
        name : "Megustas";
        age  : 24;
    };

在JSON中的对象要给属性加引号，实际上JavaScript的对象字面量完全可以写成如下形式：

var person = {
        "name" : "Megustas",
        "age"  : 24
    };

JSON表示上述对象：

{
        "name" :"megustas",
        "age"  : 24
    }

区别：（1）没有声明变量（JSON中没有变量的概念）（2）没有末尾的分号（因为这不是JavaScript语句，所以不需要分号）,JSON中的对象的属性名任何时候都必须加上双引号。

**数组**

JSON中的第二种复杂数据类型是数组，JSON中数组采用的就是JavaScript中的数组字面量形式。例如：  
JavaScript中数组字面量

var values = [25,"hi","true"];

JSON

[25,"hi","true"]

同样要注意，JSON数组也没有变量和分号。也可以把数组和对象结合起来，通过嵌套的方式可以构成更复杂的数据集合。对象和数组通常是JSON中的最外层形式。

**解析与序列化**

JSON之所以流行是因为可以把JSON数据结构解析为有用的JavaScript对象。与XML数据结构要解析成DOM文档而且从中提取数据极为麻烦相比，JSON可以解析为JavaScript对象的优势极其明显。

**JSON对象**

早期的JSON解析器基本上就是使用JavaScript的eval()函数（eval() 函数可计算某个字符串，并执行其中的的 JavaScript 代码。）。由于JSON是JavaScript语法的子集，因此eval()函数可以解析、解释并返回JavaScript对象和数组。

JSON对象有两个方法：stringify()和parse()。在最简单的情况下，这两个方法分别用于把JavaScript对象序列化为JSON字符串和把JSON字符串解析为原生的JavaScript值。例如：

<!DOCTYPE html>
    <html>
    <head>
        <title>JSON Stringify Example</title>
    </head>
    <body>
        <p>This example serializes an object and passes in a filter array.</p>
        <script type="text/javascript">
            var book = {
                            title: "Professional JavaScript",
                            authors: [
                                "Nicholas C. Zakas"
                            ],
                            edition: 3,
                            year: 2011
                       };
    
            var jsonText = JSON.stringify(book, ["title", "edition"]);
            alert(jsonText);
    
        </script>
    </body>
    </html>

默认情况下，JSON.stringify()输出的JSON字符串不包含任何空格字符或者缩进。

var bookcopy = JSON.parse(jsonText);

虽然book与bookcopy具有相同的属性，但它们是两个独立的、没有任何联系的对象。

**序列化选项**

JSON.stringify()还可以接受另外两个参数。第一个参数是过滤器，可以是一个数组，也可以是一个函数；第二个参数是一个选项，表示是否在JSON字符串中保留缩进。

<!DOCTYPE html>
    <html>
    <head>
        <title>JSON Stringify Example</title>
    </head>
    <body>
        <p>This example serializes an object and passes in a filter function.</p>
        <script type="text/javascript">
            var book = {
                            title: "Professional JavaScript",
                            authors: [
                                "Nicholas C. Zakas"
                            ],
                            edition: 3,
                            year: 2011
                       };
    
            var jsonText = JSON.stringify(book, function(key, value){
         
                switch(key){
                    case "authors":
                        return value.join(",")
    
                    case "year":
                        return 5000;
    
                    case "edition":
                        return undefined;
    
                    default:
                        return value;
                }
            });
            alert(jsonText);
    
        </script>
    </body>
    </html>

**toJSON()方法**

有时候，JSON.stringify()方法还是不能满足对某些对象进行自定义序列化的需求，可以给对象定义toJSON()方法，返回其自身的JSON数据格式。

<!DOCTYPE html>
    <html>
    <head>
        <title>JSON Stringify Example</title>
    </head>
    <body>
        <p>This example serializes an object and passes in a filter function.</p>
        <script type="text/javascript">
            var book = {
                           "title": "Professional JavaScript",
                            "authors": [
                                "Nicholas C. Zakas"
                            ],
                            edition: 3,
                            year: 2011,
                            toJSON: function(){
         
                                return this.title;
                            }
                       };
    
            var jsonText = JSON.stringify(book);
            alert(jsonText);
    
        </script>
    </body>
    </html>

**解析选项**

JSON.parse()方法也可以接受参数，该参数是一个函数，将在每个键值对上调用：

<!DOCTYPE html>
    <html>
    <head>
        <title>JSON Parse Example</title>
    </head>
    <body>
        <p>This example parses a string containing a date into an object.</p>
        <script type="text/javascript">
            var book = {
                           "title": "Professional JavaScript",
                            "authors": [
                                "Nicholas C. Zakas"
                            ],
                            edition: 3,
                            year: 2011,
                            releaseDate: new Date(2011, 11, 1)
                       };
    
            var jsonText = JSON.stringify(book);
            alert(jsonText);
    
            var bookCopy = JSON.parse(jsonText, function(key, value){
         
                if (key == "releaseDate"){
                    return undefined;
                } else {
                    return value;
                }
            });
    
            alert("releaseDate" in bookCopy);
    
        </script>
    </body>
    </html>

JSON是一个轻量级的数据格式，可以简化表示复杂的数据结构的工作量。原生的JSON对象也得到了很多浏览器的支持，，比如IE8+，Firefox3.5+,Chrome等。