JavaScript JSON 對(duì)象

JSON 格式

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

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

每個(gè) JSON 對(duì)象就是一個(gè)值，可能是一個(gè)數(shù)組或?qū)ο?，也可能是一個(gè)原始類型的值。總之，只能是一個(gè)值，不能是兩個(gè)或更多的值。

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

1. 復(fù)合類型的值只能是數(shù)組或?qū)ο螅荒苁呛瘮?shù)、正則表達(dá)式對(duì)象、日期對(duì)象。
2. 原始類型的值只有四種：字符串、數(shù)值（必須以十進(jìn)制表示）、布爾值和?null?（不能使用?NaN?, ?Infinity?, ?-Infinity?和?undefined?）。
3. 字符串必須使用雙引號(hào)表示，不能使用單引號(hào)。
4. 對(duì)象的鍵名必須放在雙引號(hào)里面。
5. 數(shù)組或?qū)ο笞詈笠粋€(gè)成員的后面，不能加逗號(hào)。

以下都是合法的 JSON。

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

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

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

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

以下都是不合法的 JSON。

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

[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ù)和日期對(duì)象

注意，null、空數(shù)組和空對(duì)象都是合法的 JSON 值。

JSON 對(duì)象

JSON對(duì)象是 JavaScript 的原生對(duì)象，用來(lái)處理 JSON 格式數(shù)據(jù)。它有兩個(gè)靜態(tài)方法：JSON.stringify()和JSON.parse()。

JSON.stringify()

基本用法

JSON.stringify()方法用于將一個(gè)值轉(zhuǎn)為 JSON 字符串。該字符串符合 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 字符串。

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

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

上面代碼中，字符串foo，被轉(zhuǎn)成了"\"foo\""。這是因?yàn)閷?lái)還原的時(shí)候，內(nèi)層雙引號(hào)可以讓 JavaScript 引擎知道，這是一個(gè)字符串，而不是其他類型的值。

JSON.stringify(false) // "false"
JSON.stringify('false') // "\"false\""

上面代碼中，如果不是內(nèi)層的雙引號(hào)，將來(lái)還原的時(shí)候，引擎就無(wú)法知道原始值是布爾值還是字符串。

如果對(duì)象的屬性是undefined、函數(shù)或 XML 對(duì)象，該屬性會(huì)被JSON.stringify()過(guò)濾。

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

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

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

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

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

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

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

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

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

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

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

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

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

JSON.stringify()方法還可以接受一個(gè)數(shù)組，作為第二個(gè)參數(shù)，指定參數(shù)對(duì)象的哪些屬性需要轉(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ù)組，只對(duì)對(duì)象的屬性有效，對(duì)數(shù)組無(wú)效。

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

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

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

第二個(gè)參數(shù)還可以是一個(gè)函數(shù)，用來(lái)更改JSON.stringify()的返回值。

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)換的對(duì)象的鍵名和鍵值。如果鍵值是數(shù)值，就將它乘以2，否則就原樣返回。

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

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

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

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

上面代碼中，對(duì)象obj一共會(huì)被f函數(shù)處理三次，輸出的最后那行是JSON.stringify()的默認(rèn)輸出。第一次鍵名為空，鍵值是整個(gè)對(duì)象obj；第二次鍵名為a，鍵值是{b: 1}；第三次鍵名為b，鍵值為1。

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

var obj = {a: 1};

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

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

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

如果處理函數(shù)返回undefined或沒(méi)有返回值，則該屬性會(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)過(guò)處理后，返回undefined，于是該屬性被忽略了。

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

JSON.stringify()還可以接受第三個(gè)參數(shù)，用于增加返回的 JSON 字符串的可讀性。

默認(rèn)返回的是單行字符串，對(duì)于大型的 JSON 對(duì)象，可讀性非常差。第三個(gè)參數(shù)使得每個(gè)屬性單獨(dú)占據(jù)一行，并且將每個(gè)屬性前面添加指定的前綴（不超過(guò)10個(gè)字符）。

// 默認(rèn)輸出
JSON.stringify({ p1: 1, p2: 2 })
// JSON.stringify({ p1: 1, p2: 2 })

// 分行輸出
JSON.stringify({ p1: 1, p2: 2 }, null, '\t')
// {
// 	"p1": 1,
// 	"p2": 2
// }

上面例子中，第三個(gè)屬性\t在每個(gè)屬性前面添加一個(gè)制表符，然后分行顯示。

第三個(gè)屬性如果是一個(gè)數(shù)字，則表示每個(gè)屬性前面添加的空格（最多不超過(guò)10個(gè)）。

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

參數(shù)對(duì)象的 toJSON() 方法

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

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

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

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

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

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

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

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

  toJSON: function () {
    return {
      name: this.lastName + this.firstName
    };
  }
};

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

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

Date對(duì)象就有一個(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)處理的是Date對(duì)象實(shí)例，就會(huì)調(diào)用這個(gè)實(shí)例對(duì)象的toJSON()方法，將該方法的返回值作為參數(shù)。

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

var obj = {
  reg: /foo/
};

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

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

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

JSON.parse()

JSON.parse()方法用于將 JSON 字符串轉(zhuǎn)換成對(duì)應(yīng)的值。

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

上面代碼中，雙引號(hào)字符串中是一個(gè)單引號(hào)字符串，因?yàn)閱我?hào)字符串不符合 JSON 格式，所以報(bào)錯(cuò)。

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

try {
  JSON.parse("'String'");
} catch(e) {
  console.log('parsing error');
}

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

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

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

上面代碼中，JSON.parse()的第二個(gè)參數(shù)是一個(gè)函數(shù)，如果鍵名是a，該函數(shù)會(huì)將鍵值加上10。

參考鏈接

• 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, What is JSON?