js溫故而知新6(JSON)——學習廖雪峰的js教程

20171112 發布于2019-08-21 11:36 / 1654人閱讀

JSON

JSON是JavaScript Object Notation的縮寫，它是一種數據交換格式。

道格拉斯·克羅克福特（Douglas Crockford）--雅虎的高級架構師--發明了JSON這種超輕量級的數據交換格式.

序列化

讓我們先把小明這個對象序列化成JSON格式的字符串：

var xiaoming = {
    name: "小明",
    age: 14,
    gender: true,
    height: 1.65,
    grade: null,
    "middle-school": ""W3C" Middle School",
    skills: ["JavaScript", "Java", "Python", "Lisp"]
};

JSON.stringify(xiaoming); // "{"name":"小明","age":14,"gender":true,"height":1.65,"grade":null,"middle-school":""W3C" Middle School","skills":["JavaScript","Java","Python","Lisp"]}"

要輸出得好看一些，可以加上參數，按縮進輸出：

JSON.stringify(xiaoming, null, "  ");

結果：

{
  "name": "小明",
  "age": 14,
  "gender": true,
  "height": 1.65,
  "grade": null,
  "middle-school": ""W3C" Middle School",
  "skills": [
    "JavaScript",
    "Java",
    "Python",
    "Lisp"
  ]
}

第二個參數用于控制如何篩選對象的鍵值，如果我們只想輸出指定的屬性，可以傳入Array：

JSON.stringify(xiaoming, ["name", "skills"], "  ");

結果：

{
  "name": "小明",
  "skills": [
    "JavaScript",
    "Java",
    "Python",
    "Lisp"
  ]
}

還可以傳入一個函數，這樣對象的每個鍵值對都會被函數先處理：

function convert(key, value) {
    if (typeof value === "string") {
        return value.toUpperCase();
    }
    return value;
}

JSON.stringify(xiaoming, convert, "  ");

上面的代碼把所有屬性值都變成大寫：

{
  "name": "小明",
  "age": 14,
  "gender": true,
  "height": 1.65,
  "grade": null,
  "middle-school": ""W3C" MIDDLE SCHOOL",
  "skills": [
    "JAVASCRIPT",
    "JAVA",
    "PYTHON",
    "LISP"
  ]
}

如果我們還想要精確控制如何序列化小明，可以給xiaoming定義一個toJSON()的方法，直接返回JSON應該序列化的數據：

var xiaoming = {
    name: "小明",
    age: 14,
    gender: true,
    height: 1.65,
    grade: null,
    "middle-school": ""W3C" Middle School",
    skills: ["JavaScript", "Java", "Python", "Lisp"],
    toJSON: function () {
        return { // 只輸出name和age，并且改變了key：
            "Name": this.name,
            "Age": this.age
        };
    }
};

JSON.stringify(xiaoming); // "{"Name":"小明","Age":14}"

反序列化

拿到一個JSON格式的字符串，我們直接用JSON.parse()把它變成一個JavaScript對象：

JSON.parse("[1,2,3,true]"); // [1, 2, 3, true]
JSON.parse("{"name":"小明","age":14}"); // Object {name: "小明", age: 14}
JSON.parse("true"); // true
JSON.parse("123.45"); // 123.45
JSON.parse()還可以接收一個函數，用來轉換解析出的屬性：

JSON.parse("{"name":"小明","age":14}", function (key, value) {

 // 把number * 2:
    if (key === "name") {
        return value + "同學";
    }
    return value;
}); // Object {name: "小明同學", age: 14}

在JavaScript中使用JSON，就是這么簡單！

GPU云服務器云服務器廖雪峰的python教程 python教程廖雪峰 python廖雪峰教程廖雪峰python視頻教程

文章版權歸作者所有，未經允許請勿轉載,若此文章存在違規行為，您可以聯系管理員刪除。

轉載請注明本文地址：http://m.specialneedsforspecialkids.com/yun/86916.html

js溫故而知新11(AJAX)——學習廖雪峰的js教程

摘要：在回調函數中，通常我們只需通過判斷請求是否完成，如果已完成，再根據判斷是否是一個成功的響應。因此我們需要首先在頁面中準備好回調函數當前價格最后用函數觸發表示本域，也就是瀏覽器當前頁面的域。 Asynchronous JavaScript and XML，意思就是用JavaScript執行異步網絡請求。如果仔細觀察一個Form的提交，你就會發現，一旦用戶點擊Submit按鈕，表單開始提...

kun_jian 2019-08-20 16:45 評論0 收藏0
js溫故而知新8(瀏覽器)——學習廖雪峰的js教程

摘要：對象不但充當全局作用域，而且表示瀏覽器窗口。對象有和屬性，可以獲取瀏覽器窗口的內部寬度和高度。對象表示當前頁面的信息。由于在瀏覽器中以形式表示為樹形結構，對象就是整個樹的根節點。這個行為由瀏覽器實現，主流瀏覽器均支持選項，從開始支持。瀏覽器目前主流的瀏覽器： IE 6~11：從IE10開始支持ES6標準； Chrome：基于Webkit內核，內置了非常強悍的JavaScript引...

charles_paul 2019-08-20 15:07 評論0 收藏0
js溫故而知新2——學習廖雪峰的js教程

摘要：讓我們拆開寫小明正常結果單獨調用函數怎么返回了請注意，我們已經進入到了的一個大坑里。如果單獨調用函數，比如，此時，該函數的指向全局對象，也就是。函數 1. arguments JavaScript還有一個免費贈送的關鍵字arguments，它只在函數內部起作用，并且永遠指向當前函數的調用者傳入的所有參數。arguments類似Array但它不是一個Array： function fo...

Caizhenhao 2019-08-21 11:34 評論0 收藏0
js溫故而知新——學習廖雪峰的js教程

摘要：在設計時，有兩種比較運算符第一種是比較，它會自動轉換數據類型再比較，很多時候，會得到非常詭異的結果第二種是比較，它不會自動轉換數據類型，如果數據類型不一致，返回，如果一致，再比較。數據類型和變量數據類型計算機顧名思義就是可以做數學計算的機器，因此，計算機程序理所當然地可以處理各種數值。但是，計算機能處理的遠不止數值，還可以處理文本、圖形、音頻、視頻、網頁等各種各樣的數據，不同的數據...

taohonghui 2019-08-21 11:31 評論0 收藏0
js溫故而知新3——學習廖雪峰的js教程

摘要：例如，在一個中，刪掉偶數，只保留奇數，可以這么寫把一個中的空字符串刪掉，可以這么寫注意以下的版本沒有方法可見用這個高階函數，關鍵在于正確實現一個篩選函數。回調函數接收的回調函數，其實可以有多個參數。 1.map 由于map()方法定義在JavaScript的Array中，我們調用Array的map()方法，傳入我們自己的函數，就得到了一個新的Array作為結果： function po...

zhaot 2019-08-21 11:34 評論0 收藏0