寫在前面： 略顯?乏味，建議邊閱讀邊查看RunJS 運行本文實例(取消勾選視圖【HTML】【CSS】,更直觀)，更好的理解與吸收。

前言

JSON(JavaScript Object Notation) 是一種數(shù)據(jù)結構，JavaScript 原生格式，而非一種編程語言。

值類型

• String, 雙引號的反斜杠轉義的 Unicode。
• Number, 在 JavaScript 中的雙精度浮點格式。
• Boolean, true 或 false。
• Array, 值的有序序列。
• Object, 無序集合鍵值對。
• Value, 它可以是一個字符串，一個數(shù)字，真的還是假（true/false），空 (null) 等。

結構

在 JSON 中，有兩種結構：對象和數(shù)組。

1. 對象以“{”（左括號）開始，“}”（右括號）結束。每個 key 后跟一個“:”（冒號）；key 用雙引號括起來；值之間用 “,”（逗號）分隔。value 如果是字符串則必須用雙引號，數(shù)值型則不需要。例如：

    { "hello": "world", "age": 100 }；
   

2. 數(shù)組是值（value）的有序集合。數(shù)組以“[”（左中括號）開始，“]”（右中括號）結束。值之間用 “,”（逗號）分隔。

應用

var books = [
      {
        "name": "javascript",
        "author": [
          "Michael",
          "Prince",
          "Banada"
        ],
        "price": 200,
        "date": new Date()
      }
    ],
    book = books[0];

雙引號

key 必須使用雙引號，如果 value 是字符串也必須使用雙引號。

可用JSONLint來驗證自己寫的 json 代碼是否有錯誤。

當然也可以寫個簡單點驗證函數(shù)：

function isJSON(string) {
    try {
        JSON.parse(string);
    }
    catch (e) {
        console.log('------json error---------');
        console.log(string);
        console.log(e);
        console.log('------json done----------');
        return false;
    }
    return true;
}

isJSON('{"hello": "world"}'); // true
isJSON("{'hello': 'world'}"); // ?false

// output
------json error---------
{'hello': 'world'}
SyntaxError: Unexpected token ' in JSON at position 1
------json done----------

訪問 key

兩種方式訪問,第一種調用屬性,第二種哈希調用。

book.name;
book["name"];

判斷是否含有某個鍵值:

book.hasOwnProperty("name");

所有key列表數(shù)組

Object.keys(book)

遍歷及 順序

僅遍歷一級節(jié)點:

 var key, value;
 for(key in book) {
     console.log(key + ' - ' + JSON.stringify(book[key]));
 }

// output
name - "javascript"
author - ["Michael","Prince","Banada"]
price - 200
date - "2016-06-15T13:31:48.488Z"

順序：

1. for-in 語句無法保證遍歷順序，應盡量避免編寫依賴對象屬性順序的代碼。如果想順序遍歷一組數(shù)據(jù)，請使用數(shù)組并使用 for 語句遍歷。 如果想按照定義的次序遍歷對象屬性，請參考本文針對各瀏覽器編寫特殊代碼。

2. Object.keys()也是被排過序的。

3. 個人解決方案，把期望的順序鍵值放入order_keys中:

   var response = {"商品編碼":"12345","門店名單":"什么路店","SKU":"超市購物袋大號","order_keys":["SKU","商品編碼","門店名單"]}, 
       order_keys = response.order_keys,
       key, value, i; 
       
   for(i = 0; i < order_keys.length; i ++) {
       key = order_keys[i];
       value = response[key];
   } 
   

stringify

JSON 對象轉化為字符串。

JSON.stringify(books);

用法

JSON.stringify(value, [, replacer] [, space])

參數(shù)

• value

  必需, 通常為對象或數(shù)組。

• replacer

  可選, 用于轉換結果的函數(shù)或數(shù)組。

  • 數(shù)組，只列數(shù)組包含的屬性。

    JSON.stringify(book, ["name", "price"]);
    
    // output
    // {"name":"javascript", "price":200}
    

  • 函數(shù)，兩個參數(shù): 屬性的名與值。

    JSON.stringify(books, function(key, value){
            switch(key){
            case "author" :
                return value.join("-");
            case "name" :
                return value;
            case "price" :
                return value * 50000;
            default:
                return value;
        }
    });
    
    // output
    // [{"name":"javascript","author":"Michael-Prince-Banada","price":10000000,"date":"2016-06-15T12:45:54.181Z"}]
    

• space

  可選, 向返回值 JSON 文本添加縮進、空格和換行符以使其更易于讀取。

  • 如果省略 space，則將生成返回值文本，而沒有任何額外空格。

  • 如果 space 是一個數(shù)字，則返回值文本在每個級別縮進指定數(shù)目的空格。如果 space 大于 10，則文本縮進 10 個空格。

      JSON.stringify(book,null,4);
    
      // output
      {
          "name": "javascript",
          "author": [
              "Michael",
              "Prince",
              "Banada"
          ],
          "price": 200,
          "date": "2016-06-15T12:46:49.680Z"
      }
    

  • 如果 space 是一個非空字符串（例如 “\t”），則返回值文本在每個級別中縮進字符串中的字符。

      JSON.stringify(book,null,"-");
    
      // output
      {
      -"name": "javascript",
      -"author": [
      --"Michael",
      --"Prince",
      --"Banada"
      -],
      -"price": 200,
      -"date": "2016-06-15T12:47:27.553Z"
      }
    

  • 如果 space 是長度大于 10 個字符的字符串，則使用前 10 個字符。

返回值

JSON 數(shù)組格式字符串。

parse

字符串轉化為 JSON 對象。

JSON.parse(JSON.stringify(books));

用法

JSON.parse(text [, reviver])

參數(shù)

• text

  必需，有效的 JSON 字符串。

• reviver

  可選， 轉換結果的函數(shù)。 將為對象的每個成員調用此函數(shù)。 如果成員包含嵌套對象，則先于父對象轉換嵌套對象。 對于每個成員，會發(fā)生以下情況：

  • 如果返回一個有效值，則成員值將替換為轉換后的值。

      var new_book = JSON.parse(JSON.stringify(book), function(key,value){
          if(key === "date"){
              return new Date(value);
          }
          else {
              return value;
          }
      });
      new_book.date.getFullYear();
    
      // output: 2016
    

  • 如果返回它接收的相同值，則不修改成員值。

  • 如果返回 null 或 undefined，則刪除了該成員。

返回值

對象或數(shù)組。

toJSON()

• toJSON() 方法可以將 Date 對象轉換為 JSON 字符串。

    var date = new Date()
        json = date.toJSON();
  
    console.log(date);
    console.log(json);
  
    // output
    // Wed Jun 15 2016 20:51:11 GMT+0800 (CST)
    // 2016-06-15T12:51:11.552Z
  

• 如果一個被序列化的對象擁有 toJSON 方法，那么該 toJSON 方法就會覆蓋該對象默認的序列化行為：不是那個對象被序列化，而是調用 toJSON 方法后的返回值會被序列化，例如：

    var obj = {
      foo: 'foo',
      toJSON: function () {
        return 'bar';
      }
    };
    JSON.stringify(obj);      // '"bar"'
    JSON.stringify({x: obj}); // '{"x":"bar"}'
  

參考

• 徹底精通 JSON
• JSON 數(shù)據(jù)類型
• JSON.stringify 函數(shù) (JavaScript)
• JSON.stringify()
• JSON.parse 函數(shù) (JavaScript)
• Check if a key exists inside a json object
• SJ9011: Chrome Opera 中 for-in 語句遍歷出對象屬性的順序與定義的不同

更新日志

• 16-06-16

  • 補充訪問key方式、獲取所有key列表, 及順序遍歷問題。
  • 補充判斷是否存在key。
  • 按期望順序遍歷，個人解決方案。

寫在最后：有表達缺失、不到位或需要補充、修正的地方，歡迎反饋，提前感謝。