json最強攻略

樂前端發表於2018-01-08
原文網址 : https://juejin.im/post/5a4ef5f66fb9a01ca47a4bdf
JSON

Json最強攻略

標籤 ： Json

一、 JSON是什麼？

  • JSON，全稱“JavaScript Object Notation（JavaScript物件表示法）”，起源於JavaScript的物件和陣列。JSON，說白了就是JavaScript用來處理資料的一種格式，這種格式非常簡單易用。

  • JSON，大部分都是用來處理JavaScript和web伺服器端之間的資料交換，把後臺web伺服器的資料傳遞到前臺，然後使用JavaScript進行處理，例如ajax等。

  • JSON支援的語言非常多，包括JavaScript、C#、PHP、Java等等，這是由於JSON獨立於語言的輕量級的資料交換格式，這個特點有點類似於SQL語言。

  • JSON，就是一種資料傳輸格式而已，無它，非常容易掌握。但是大家不要誤以為JSON最大的用處是在前端，其實JSON最大的用處是處理JavaScript和web伺服器端之間資料交換。

二、JSON物件結構

JSON結構共有2種： （1）物件結構； （2）陣列結構；

1、物件結構

JSON，簡單來說就是JavaScript中的物件或陣列，所以這兩種結構就是物件和陣列。通過這兩種結構就可以表示各種複雜的結構。

物件結構是使用大括號“{}”括起來的，大括號內是由0個或多個用英文逗號分隔的“關鍵字:值”對（key:value）構成的。 語法：

var jsonObj =
{
    "鍵名1":值1,
    "鍵名2":值2,
    ……
    "鍵名n":值n
}
複製程式碼

說明： jsonObj指的是json物件。物件結構是以“{”開始，到“}”結束。其中“鍵名”和“值”之間用英文冒號構成對，兩個“鍵名:值”之間用英文逗號分隔。

注意，這裡的鍵名是字串，但是值可以是數值、字串、物件、陣列或邏輯true和false。

舉例：

<!DOCTYPE html>
<html xmlns="http://www.w3.org/1999/xhtml">
<head>
    <title></title>
    <script type="text/javascript">
        var obj =
        {
            "name":"helicopter",
            "age":23,
            //JSON物件內部也有一個JSON物件
            hobby:
            {
                "first":"swimming",
                "second":"singing",
                "third":"dancing"
            }
        }
        //讀取JSON資料
        document.write("名字是："+obj.name+"<br>");
        document.write("第一項愛好是："+obj.hobby.first);
    </script>
</head>
<body>
</body>
</html>
複製程式碼

在瀏覽器預覽效果如下：

image_1c1ui3ugh1q3g1lr8118f1i121dd519.png-19.7kB

1、從JSON中讀資料

對於JSON物件結構，讀取JSON非常簡單，獲取JSON中的資料共有2種方式。 語法：

	
jsonObj.key
jsonObj["key"]
複製程式碼

說明： jsonObj指的是JSON物件，key指的是鍵名。讀取JSON資料使用的是“.”操作符，這個跟JavaScript物件讀取屬性值是差不多的。

實際例子請看上面舉例。

2、向JSON寫資料

對於JSON物件結構，要往JSON中增加一條資料，也是使用“.”操作符。

語法：

jsonObj.key = 值;
jsonObj["key"] = 值;
複製程式碼

說明： jsonObj指的是JSON物件，key指的是鍵名。

舉例：

<!DOCTYPE html>
<html xmlns="http://www.w3.org/1999/xhtml">
<head>
    <title></title>
    <script type="text/javascript">
        var obj =
        {
            "name":"helicopter",
            "age":23,
            //JSON物件內部也有一個JSON物件
            hobby:
            {
                "first":"swimming",
                "second":"singing",
                "third":"dancing"
            }
        }
        obj.gender = "男";  //或者obj["gender"]="男";
        document.write("性別是："+obj.gender);
    </script>
</head>
<body>
</body>
</html>
複製程式碼

在瀏覽器預覽效果如下：

在瀏覽器預覽效果如下：

3、修改JSON中的資料

對於JSON物件結構，要修改JSON中的資料，也是使用“.”操作符。

語法：

jsonObj.key = 新值;
複製程式碼

舉例：

<!DOCTYPE html>
<html xmlns="http://www.w3.org/1999/xhtml">
<head>
    <title></title>
    <script type="text/javascript">
        var obj =
        {
            "name":"helicopter",
            "age":23,
            "gender":"男",
            //JSON物件內部也有一個JSON物件
            hobby:
            {
                "first":"swimming",
                "second":"singing",
                "third":"dancing"
            }
        }
        obj.name = "小杰";  //或者obj["name"]="小杰";
        document.write("姓名是："+obj.name);
    </script>
</head>
<body>
</body>
</html>
複製程式碼

在瀏覽器預覽效果如下：

image_1c1uid74elbi1s21nut1o8e1q6g23.png-15kB

4、刪除JSON中的資料

對於JSON物件結構，我們使用delete關鍵字來刪除JSON中的資料。

語法： delete  jsonObj.key;

說明： 刪除JSON中資料非常簡單，只需要使用delete關鍵字即可。

舉例：

<!DOCTYPE html>
<html xmlns="http://www.w3.org/1999/xhtml">
<head>
    <title></title>
    <script type="text/javascript">
        var obj =
        {
            "name":"helicopter",
            "age":23,
            "gender":"男",
            //JSON物件內部也有一個JSON物件
            hobby:
            {
                "first":"swimming",
                "second":"singing",
                "third":"dancing"
            }
        }
        delete obj.age;
        if(obj.age==null)
        {
            alert("JSON中的年齡項已經被刪除！");
        }
    </script>
</head>
<body>
</body>
</html>
複製程式碼

5、遍歷JSON物件

對於JSON物件結構，可以使用for…in…迴圈來遍歷JSON物件中的資料。

舉例：

<!DOCTYPE html>
<html xmlns="http://www.w3.org/1999/xhtml">
<head>
    <title></title>
    <script type="text/javascript">
        var obj =
        {
            "name":"helicopter",
            "age":23,
            "gender":"男",
        }
        for(var c in obj)
        {
            if(c=="name")
            {
                document.write("姓名是："+obj[c]);
            }
        }
    </script>
</head>
<body>
</body>
</html>
複製程式碼

在瀏覽器預覽效果如下：

image_1c1uimc401hkdk8a2qq14nn1ude2g.png-15.5kB

2、陣列結構

JSON陣列結構是用中括號“[]”括起來，中括號內部由0個或多個以英文逗號“,”分隔的值列表組成。

語法：

var arr =
[
    {
        "鍵名1":值1,
        "鍵名2":值2
    },
    {
        "鍵名3":值3,
        "鍵名4":值4
    },
    ……
]
複製程式碼

說明： arr指的是json陣列。陣列結構是以“[”開始，到“]”結束，這一點跟JSON物件不同。不過在JSON陣列結構中，每一對“{}”相當於一個JSON物件，大家看看像不像？而且語法都非常類似。

注意，這裡的鍵名是字串，但是值可以是數值、字串、物件、陣列或邏輯true和false。

舉例：

<!DOCTYPE html>
<html xmlns="http://www.w3.org/1999/xhtml">
<head>
    <title></title>
    <script type="text/javascript">
        var arr =
        [
            {
                "name":"小明",
                "age":23,
                "gender":"男"
            },
            {
                "name":"小紅",
                "age":21,
                "gender":"女"
            }
        ]
        //讀取JSON資料
        document.write("第一個學生的名字是："+arr[0].name+"<br>");
        document.write("第二個學生的性別是："+arr[1].gender+"<br>");
    </script>
</head>
<body>
</body>
</html>
複製程式碼

在瀏覽器預覽效果如下：

image_1c1uitq791nva1egmvbs1jqhnh2t.png-16.5kB

JSON陣列結構也是非常簡單的，只需要通過陣列下標來獲取哪一個陣列元素（一個“{}”的內容就類似一個陣列元素），然後再配合使用“.”操作符就可以獲取相應陣列元素的內部資料。

對於獲取、寫入、修改、刪除、遍歷JSON陣列結構中的資料，跟JSON物件結構的資料操作類似，大家對比琢磨一下基本就懂了，在此不再累贅講解。

<!DOCTYPE html>
<html xmlns="http://www.w3.org/1999/xhtml">
<head>
    <title></title>
    <script type="text/javascript">
        var arr =
        [
            {
                "name":"小明",
                "age":23,
                "gender":"男"
            },
            {
                "name":"小紅",
                "age":21,
                "gender":"女"
            }
        ]
        delete arr[0];
        arr[1].name="小蘭";
        document.write("第2個學生的姓名是："+arr[1].name);
    </script>
</head>
<body>
</body>
</html>
複製程式碼

三、JSON物件和JSON字串

普通字串、JSON字串和JSON物件 初學者經常有一個困惑，就是分不清普通字串、JSON字串和JSON物件。其實這3者是非常容易區分的。

1、普通字串 字串嘛，大家都知道是使用單引號或雙引號括起來的一串字元。 舉例：

var str = "學習json教程";
複製程式碼

2、JSON物件 JSON物件我們在“JSON物件結構”這一節已經詳細為大家講解了。JSON物件，指的是符合JSON格式要求的JavaScript物件。 舉例：

var jsonObj = {"name":"helicopter","age":23,"gender":"男"};
複製程式碼

3、JSON字串 JSON字串，指的是符合“JSON格式”的字串。 JSON字串要求兩點：

（1）必須是字串，也就是要用單引號或雙引號括起來；

（2）必須符合“JSON”格式。 舉例：

var jsonStr = '{"name": "helicopter", "age":23, "gender": "男"}';
複製程式碼

JSON字串說白了就是在JSON物件外面加一對單引號。

大家好好對比一下，就知道普通字串、JSON物件和JSON字串的區別了。

###JSON物件轉換為JSON字串

在JSON中，可以使用JSON.stringify()方法將JSON物件轉換為JSON字串。

語法：

JSON.stringify(JSON物件名);
複製程式碼

舉例：

<!DOCTYPE html>
<html xmlns="http://www.w3.org/1999/xhtml">
<head>
    <title></title>
    <script type="text/javascript">
        var obj =
        {
            "name":"helicopter",
            "age":23,
            //JSON物件內部也有一個JSON物件
            hobby:
            {
                "first":"swimming",
                "second":"singing",
                "third":"dancing"
            }
        }
        var jsonStr=JSON.stringify(obj);
        document.write(jsonStr);
    </script>
</head>
<body>
</body>
</html>
複製程式碼

在瀏覽器預覽效果如下：

image_1c1ujb7d81fui9hhuk19sp89p3a.png-34.5kB

JSON字串轉換為JSON物件

在JavaScript中，將JSON字串轉換為JSON物件非常有用。一般，在Web伺服器後臺向前臺傳輸資料的過程中，往往都是用字串形式來傳輸JSON資料。如果我們在前臺想要獲取JSON資料，就必須將JSON字串轉換為JSON物件才能操作。

現在大多數瀏覽器（IE8及以上，Chrome和Firefox差不多全部）自帶原生JSON物件，提供JSON.parse()方法來將JSON字串轉換為JSON物件。

語法：

JSON.parse(字串名); 
複製程式碼

舉例：

<!DOCTYPE html>
<html xmlns="http://www.w3.org/1999/xhtml">
<head>
    <title></title>
    <script type="text/javascript">
        var jsonStr = '{"name": "helicopter", "age":23, "gender": "男"}';
        var jsonObj=JSON.parse(jsonStr);
        document.write("姓名是："+jsonObj.name);
    </script>
</head>
<body>
</body>
</html>
複製程式碼

針對初學者分享Web前端相關的技術文章、工具資源、javascript、html、css、nodeJs...歡迎關注公眾號“樂前端”、leqianduan

json最強攻略

相關文章