JavaScript JSON對象

目錄

JSON格式（JavaScript Object Notation的縮寫）是一種用于數(shù)據(jù)交換的文本格式，2001年由Douglas Crockford提出，目的是取代繁瑣笨重的XML格式。

相比XML格式，JSON格式有兩個(gè)顯著的優(yōu)點(diǎn)：書寫簡單，一目了然；符合JavaScript原生語法，可以由解釋引擎直接處理，不用另外添加解析代碼。所以，JSON迅速被接受，已經(jīng)成為各大網(wǎng)站交換數(shù)據(jù)的標(biāo)準(zhǔn)格式，并被寫入ECMAScript 5，成為標(biāo)準(zhǔn)的一部分。

簡單說，每個(gè)JSON對象，就是一個(gè)值。要么是簡單類型的值，要么是復(fù)合類型的值，但是只能是一個(gè)值，不能是兩個(gè)或更多的值。這就是說，每個(gè)JSON文檔只能包含一個(gè)值。

JSON對值的類型和格式有嚴(yán)格的規(guī)定。

1. 復(fù)合類型的值只能是數(shù)組或?qū)ο螅荒苁呛瘮?shù)、正則表達(dá)式對象、日期對象。

2. 簡單類型的值只有四種：字符串、數(shù)值（必須以十進(jìn)制表示）、布爾值和null（不能使用NaN, Infinity, -Infinity和undefined）。

3. 字符串必須使用雙引號表示，不能使用單引號。

4. 對象的鍵名必須放在雙引號里面。

5. 數(shù)組或?qū)ο笞詈笠粋€(gè)成員的后面，不能加逗號。

以下是合格的JSON值。

["one", "two", "three"]

{ "one": 1, "two": 2, "three": 3 }

{"names": ["張三", "李四"] }

[ { "name": "張三"}, {"name": "李四"} ]

以下是不合格的JSON值。

{ name: "張三", 'age': 32 }  // 屬性名必須使用雙引號

[32, 64, 128, 0xFFF] // 不能使用十六進(jìn)制值

{ "name": "張三", "age": undefined } // 不能使用undefined

{ "name": "張三",
  "birthday": new Date('Fri, 26 Aug 2011 07:13:10 GMT'),
  "getName": function() {
      return this.name;
  }
} // 不能使用函數(shù)和日期對象

需要注意的是，空數(shù)組和空對象都是合格的JSON值，null本身也是一個(gè)合格的JSON值。

ES5新增了JSON對象，用來處理JSON格式數(shù)據(jù)。它有兩個(gè)方法：JSON.stringify()和JSON.parse()。

基本用法

JSON.stringify方法用于將一個(gè)值轉(zhuǎn)為字符串。該字符串符合 JSON 格式，并且可以被JSON.parse方法還原。

JSON.stringify('abc') // ""abc""
JSON.stringify(1) // "1"
JSON.stringify(false) // "false"
JSON.stringify([]) // "[]"
JSON.stringify({}) // "{}"

JSON.stringify([1, "false", false])
// '[1,"false",false]'

JSON.stringify({ name: "張三" })
// '{"name":"張三"}'

上面代碼將各種類型的值，轉(zhuǎn)成 JSON 字符串。

需要注意的是，對于原始類型的字符串，轉(zhuǎn)換結(jié)果會(huì)帶雙引號。

JSON.stringify('foo') === "foo" // false
JSON.stringify('foo') === "\"foo\"" // true

上面代碼中，字符串foo，被轉(zhuǎn)成了""foo""。這是因?yàn)閷磉€原的時(shí)候，雙引號可以讓 JavaScript 引擎知道，foo是一個(gè)字符串，而不是一個(gè)變量名。

如果原始對象中，有一個(gè)成員的值是undefined、函數(shù)或 XML 對象，這個(gè)成員會(huì)被過濾。

var obj = {
  a: undefined,
  b: function () {}
};

JSON.stringify(obj) // "{}"

上面代碼中，對象obj的a屬性是undefined，而b屬性是一個(gè)函數(shù)，結(jié)果都被JSON.stringify過濾。

如果數(shù)組的成員是undefined、函數(shù)或 XML 對象，則這些值被轉(zhuǎn)成null。

var arr = [undefined, function () {}];
JSON.stringify(arr) // "[null,null]"

上面代碼中，數(shù)組arr的成員是undefined和函數(shù)，它們都被轉(zhuǎn)成了null。

正則對象會(huì)被轉(zhuǎn)成空對象。

JSON.stringify(/foo/) // "{}"

JSON.stringify方法會(huì)忽略對象的不可遍歷屬性。

var obj = {};
Object.defineProperties(obj, {
  'foo': {
    value: 1,
    enumerable: true
  },
  'bar': {
    value: 2,
    enumerable: false
  }
});

JSON.stringify(obj); // "{"foo":1}"

上面代碼中，bar是obj對象的不可遍歷屬性，JSON.stringify方法會(huì)忽略這個(gè)屬性。

第二個(gè)參數(shù)

JSON.stringify方法還可以接受一個(gè)數(shù)組，作為第二個(gè)參數(shù)，指定需要轉(zhuǎn)成字符串的屬性。

var obj = {
  'prop1': 'value1',
  'prop2': 'value2',
  'prop3': 'value3'
};

var selectedProperties = ['prop1', 'prop2'];

JSON.stringify(obj, selectedProperties)
// "{"prop1":"value1","prop2":"value2"}"

上面代碼中，JSON.stringify方法的第二個(gè)參數(shù)指定，只轉(zhuǎn)prop1和prop2兩個(gè)屬性。

這個(gè)類似“白名單”的數(shù)組，只對對象的屬性有效，對數(shù)組無效。

JSON.stringify(['a', 'b'], ['0'])
// "["a","b"]"

JSON.stringify({0: 'a', 1: 'b'}, ['0'])
// "{"0":"a"}"

上面代碼中，第二個(gè)參數(shù)指定JSON格式只轉(zhuǎn)0號屬性，實(shí)際上對數(shù)組是無效的，只對對象有效。

第二個(gè)參數(shù)還可以是一個(gè)函數(shù)，用來更改JSON.stringify的默認(rèn)行為。

function f(key, value) {
  if (typeof value === "number") {
    value = 2 * value;
  }
  return value;
}

JSON.stringify({ a: 1, b: 2 }, f)
// '{"a": 2,"b": 4}'

上面代碼中的f函數(shù)，接受兩個(gè)參數(shù)，分別是被轉(zhuǎn)換的對象的鍵名和鍵值。如果鍵值是數(shù)值，就將它乘以2，否則就原樣返回。

注意，這個(gè)處理函數(shù)是遞歸處理所有的鍵。

var o = {a: {b: 1}};

function f(key, value) {
  console.log("["+ key +"]:" + value);
  return value;
}

JSON.stringify(o, f)
// []:[object Object]
// [a]:[object Object]
// [b]:1
// '{"a":{"b":1}}'

上面代碼中，對象o一共會(huì)被f函數(shù)處理三次。第一次鍵名為空，鍵值是整個(gè)對象o；第二次鍵名為a，鍵值是{b: 1}；第三次鍵名為b，鍵值為1。

遞歸處理中，每一次處理的對象，都是前一次返回的值。

var o = {a: 1};

function f(key, value) {
  if (typeof value === 'object') {
    return {b: 2};
  }
  return value * 2;
}

JSON.stringify(o,f)
// "{"b": 4}"

上面代碼中，f函數(shù)修改了對象o，接著JSON.stringify方法就遞歸處理修改后的對象o。

如果處理函數(shù)返回undefined或沒有返回值，則該屬性會(huì)被忽略。

function f(key, value) {
  if (typeof(value) === "string") {
    return undefined;
  }
  return value;
}

JSON.stringify({ a: "abc", b: 123 }, f)
// '{"b": 123}'

上面代碼中，a屬性經(jīng)過處理后，返回undefined，于是該屬性被忽略了。

第三個(gè)參數(shù)

JSON.stringify還可以接受第三個(gè)參數(shù)，用于增加返回的JSON字符串的可讀性。如果是數(shù)字，表示每個(gè)屬性前面添加的空格（最多不超過10個(gè)）；如果是字符串（不超過10個(gè)字符），則該字符串會(huì)添加在每行前面。

JSON.stringify({ p1: 1, p2: 2 }, null, 2);
/*
"{
  "p1": 1,
  "p2": 2
}"
*/

JSON.stringify({ p1:1, p2:2 }, null, '|-');
/*
"{
|-"p1": 1,
|-"p2": 2
}"
*/

toJSON 方法

如果對象有自定義的toJSON方法，那么JSON.stringify會(huì)使用這個(gè)方法的返回值作為參數(shù)，而忽略原對象的其他屬性。

下面是一個(gè)普通的對象。

var user = {
  firstName: '三',
  lastName: '張',

  get fullName(){
    return this.lastName + this.firstName;
  }
};

JSON.stringify(user)
// "{"firstName":"三","lastName":"張","fullName":"張三"}"

現(xiàn)在，為這個(gè)對象加上toJSON方法。

var user = {
  firstName: '三',
  lastName: '張',

  get fullName(){
    return this.lastName + this.firstName;
  },

  toJSON: function () {
    var data = {
      firstName: this.firstName,
      lastName: this.lastName
    };
    return data;
  }
};

JSON.stringify(user)
// "{"firstName":"三","lastName":"張"}"

上面代碼中，JSON.stringify發(fā)現(xiàn)參數(shù)對象有toJSON方法，就直接使用這個(gè)方法的返回值作為參數(shù)，而忽略原對象的其他參數(shù)。

Date對象就有一個(gè)自己的toJSON方法。

var date = new Date('2015-01-01');
date.toJSON() // "2015-01-01T00:00:00.000Z"
JSON.stringify(date) // ""2015-01-01T00:00:00.000Z""

上面代碼中，JSON.stringify一旦發(fā)現(xiàn)處理的是data對象實(shí)例，就會(huì)自動(dòng)調(diào)用這個(gè)實(shí)例對象的toJSON方法，將該方法的返回值作為參數(shù)。

toJSON方法的一個(gè)應(yīng)用是，將正則對象自動(dòng)轉(zhuǎn)為字符串。因?yàn)?code class="highlighter-rouge">JSON.stringify默認(rèn)不能轉(zhuǎn)換正則對象，但是設(shè)置了toJSON方法以后，就可以轉(zhuǎn)換正則對象了。

var obj = {
  reg: /foo/
};

// 不設(shè)置 toJSON 方法時(shí)
JSON.stringify(obj) // "{"reg":{}}"

// 設(shè)置 toJSON 方法時(shí)
RegExp.prototype.toJSON = RegExp.prototype.toString;
JSON.stringify(/foo/) // ""/foo/""

上面代碼在正則對象的原型上面部署了toJSON方法，將其指向toString方法，因此遇到轉(zhuǎn)換成JSON時(shí)，正則對象就先調(diào)用toJSON方法轉(zhuǎn)為字符串，然后再被JSON.stingify方法處理。

JSON.parse方法用于將JSON字符串轉(zhuǎn)化成對象。

JSON.parse('{}') // {}
JSON.parse('true') // true
JSON.parse('"foo"') // "foo"
JSON.parse('[1, 5, "false"]') // [1, 5, "false"]
JSON.parse('null') // null

var o = JSON.parse('{"name": "張三"}');
o.name // 張三

如果傳入的字符串不是有效的JSON格式，JSON.parse方法將報(bào)錯(cuò)。

JSON.parse("'String'") // illegal single quotes
// SyntaxError: Unexpected token ILLEGAL

上面代碼中，雙引號字符串中是一個(gè)單引號字符串，因?yàn)閱我栕址环螶SON格式，所以報(bào)錯(cuò)。

為了處理解析錯(cuò)誤，可以將JSON.parse方法放在try...catch代碼塊中。

JSON.parse方法可以接受一個(gè)處理函數(shù)，用法與JSON.stringify方法類似。

function f(key, value) {
  if (key === ''){
    return value;
  }
  if (key === 'a') {
    return value + 10;
  }
}

var o = JSON.parse('{"a":1,"b":2}', f);
o.a // 11
o.b // undefined

• MDN, Using native JSON
• MDN, JSON.parse
• Dr. Axel Rauschmayer, JavaScript’s JSON API
• Jim Cowart, What You Might Not Know About JSON.stringify()
• Marco Rogers polotek, What is JSON?