2020-04-25

JS JSON對(duì)象

JSON格式

JSON 格式(JavaScript Object Notation的縮寫)是一種用于數(shù)據(jù)交換的文本格式,目的是取代繁瑣笨重的 XML 格式。

相比 XML 格式,JSON 格式有兩個(gè)顯著的優(yōu)點(diǎn):書寫簡(jiǎn)單,一目了然;符合 JavaScript 原生語法,可以由解釋引擎直接處理,不用另外添加解析代碼。

每個(gè) JSON 對(duì)象就是一個(gè)值,可能是一個(gè)數(shù)組或?qū)ο?/strong>,也可能是一個(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ì)象,用來處理 JSON 格式數(shù)據(jù)。它有兩個(gè)靜態(tài)方法:JSON.stringify()JSON.parse()

JSON.stringify() 將值轉(zhuǎn)化為json格式

基本用法

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":"張三"}'

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

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

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

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

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

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

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

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

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

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

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

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


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

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

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

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

第二個(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ù)組,只對(duì)對(duì)象的屬性有效,對(duì)數(shù)組無效。


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ù)組是無效的,只對(duì)對(duì)象有效。

第二個(gè)參數(shù)還可以是一個(gè)函數(shù),用來更改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 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}}'

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

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

ar 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ù)修改了對(duì)象o,接著JSON.stringify方法就遞歸處理修改后的對(duì)象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ì)添加在每行前面。

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

JSON.stringify({ p1:1, p2:2 }, null, '|-');
/*
"{
|-"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方法。

ar 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方法。

ar 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)镴SON.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}

?著作權(quán)歸作者所有,轉(zhuǎn)載或內(nèi)容合作請(qǐng)聯(lián)系作者
【社區(qū)內(nèi)容提示】社區(qū)部分內(nèi)容疑似由AI輔助生成,瀏覽時(shí)請(qǐng)結(jié)合常識(shí)與多方信息審慎甄別。
平臺(tái)聲明:文章內(nèi)容(如有圖片或視頻亦包括在內(nèi))由作者上傳并發(fā)布,文章內(nèi)容僅代表作者本人觀點(diǎn),簡(jiǎn)書系信息發(fā)布平臺(tái),僅提供信息存儲(chǔ)服務(wù)。

相關(guān)閱讀更多精彩內(nèi)容

  • 概要 64學(xué)時(shí) 3.5學(xué)分 章節(jié)安排 電子商務(wù)網(wǎng)站概況 HTML5+CSS3 JavaScript Node 電子...
    阿啊阿吖丁閱讀 9,849評(píng)論 0 3
  • 我們先來看一個(gè)JS中常見的JS對(duì)象序列化成JSON字符串的問題,請(qǐng)問,以下JS對(duì)象通過JSON.stringify...
    程序員之路閱讀 1,063評(píng)論 0 6
  • 參考基礎(chǔ)教程的整理,方便記憶 一、Object對(duì)象 (O大寫) 所有其他對(duì)象都繼承自這個(gè)對(duì)象。Object本身也是...
    Viaphlyn閱讀 2,454評(píng)論 0 0
  • ??曾經(jīng)有一段時(shí)間,XML 是互聯(lián)網(wǎng)上傳輸數(shù)據(jù)化結(jié)構(gòu)的事實(shí)標(biāo)準(zhǔn)。Web 服務(wù)的第一次浪潮很大程度上都是建立在 XM...
    霜天曉閱讀 416評(píng)論 0 1
  • 引言 曾經(jīng)有一段時(shí)間,XML是互聯(lián)網(wǎng)上傳輸結(jié)構(gòu)化數(shù)據(jù)的事實(shí)標(biāo)準(zhǔn)。Web服務(wù)的第一次浪潮很大程度上都是建立在XML之...
    DHFE閱讀 707評(píng)論 0 0

友情鏈接更多精彩內(nèi)容