Javascript 中 JSON 的应用

写在前面： 略显�乏味，建议边阅读边查看RunJS 运行本文实例(取消勾选视图【HTML】【CSS】,更直观)，更好的理解与吸收。

前言

JSON(JavaScript Object Notation) 是一种数据结构，JavaScript 原生格式，而非一种编程语言。

值类型

• String, 双引号的反斜杠转义的 Unicode。
• Number, 在 JavaScript 中的双精度浮点格式。
• Boolean, true 或 false。
• Array, 值的有序序列。
• Object, 无序集合键值对。
• Value, 它可以是一个字符串，一个数字，真的还是假（true/false），空 (null) 等。

结构

在 JSON 中，有两种结构：对象和数组。

1. 对象以“{”（左括号）开始，“}”（右括号）结束。每个 key 后跟一个“:”（冒号）；key 用双引号括起来；值之间用 “,”（逗号）分隔。value 如果是字符串则必须用双引号，数值型则不需要。例如：

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

2. 数组是值（value）的有序集合。数组以“[”（左中括号）开始，“]”（右中括号）结束。值之间用 “,”（逗号）分隔。

应用

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

双引号

key 必须使用双引号，如果 value 是字符串也必须使用双引号。

可用JSONLint来验证自己写的 json 代码是否有错误。

当然也可以写个简单点验证函数：

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列表数组

Object.keys(book)

遍历及 顺序

仅遍历一级节点:

 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 语句无法保证遍历顺序，应尽量避免编写依赖对象属性顺序的代码。如果想顺序遍历一组数据，请使用数组并使用 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])

参数

• value

  必需, 通常为对象或数组。

• replacer

  可选, 用于转换结果的函数或数组。

  • 数组，只列数组包含的属性。

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

  • 函数，两个参数: 属性的名与值。

    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 是一个数字，则返回值文本在每个级别缩进指定数目的空格。如果 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 数组格式字符串。

parse

字符串转化为 JSON 对象。

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

用法

JSON.parse(text [, reviver])

参数

• text

  必需，有效的 JSON 字符串。

• reviver

  可选， 转换结果的函数。 将为对象的每个成员调用此函数。 如果成员包含嵌套对象，则先于父对象转换嵌套对象。 对于每个成员，会发生以下情况：

  • 如果返回一个有效值，则成员值将替换为转换后的值。

      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，则删除了该成员。

返回值

对象或数组。

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 数据类型
• JSON.stringify 函数 (JavaScript)
• JSON.stringify()
• JSON.parse 函数 (JavaScript)
• Check if a key exists inside a json object
• SJ9011: Chrome Opera 中 for-in 语句遍历出对象属性的顺序与定义的不同

更新日志

• 16-06-16

  • 补充访问key方式、获取所有key列表, 及顺序遍历问题。
  • 补充判断是否存在key。
  • 按期望顺序遍历，个人解决方案。

写在最后：有表达缺失、不到位或需要补充、修正的地方，欢迎反馈，提前感谢。