Javascript基礎鞏固系列——標準庫JSON對象

全手打原創，轉載請標明出處：https://www.cnblogs.com/dreamsqin/p/13730736.html， 多謝，=。=~（如果對你有幫助的話請幫我點個贊啦）

重新學習JavaScript是因爲當年轉前端有點兒趕鴨子上架的意味，我一直在反思我的知識點總是很零散，不能在腦海中形成一個完整的體系，所以這次想通過再次學習將知識點都串聯起來，結合日常開發的項目，達到溫故而知新的效果。與此同時，總結一下我認爲很重要但又被我遺漏的知識點～

概述

JSON格式是一種用於數據交換的文本格式，書寫簡單，可以由解釋引擎直接處理。JSON對象是 JavaScript 的原生對象，用來處理 JSON 格式數據。

JSON對象靜態方法

JSON.stringify()

• 將一個值轉爲 JSON 字符串。

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

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

// 原始類型的字符串，轉換結果會帶雙引號
JSON.stringify('foo') === "\"foo\"" // true

• 如果對象的屬性是undefined、函數或 XML 對象，該屬性會被過濾；如果數組的成員是undefined、函數或 XML 對象，則這些值被轉成null。

var obj = {
  a: undefined,
  b: function () {}
};
JSON.stringify(obj) // "{}"

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

• 會忽略對象的不可遍歷的屬性。

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

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

• 可以接受一個數組作爲第二個參數，指定需要轉成字符串的屬性（只對對象生效，對數組無用）。

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

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

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

• 可以接受一個函數作爲第二個參數，用來變更返回值。

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

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

• 可以接受數字（表示每個屬性前面添加的空格，不超過10個）或字符串（不超過10個）作爲第三個參數，增加返回的 JSON 字符串的可讀性，就是格式化顯示。

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

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

• 參數對象如果有toJSON方法，就直接使用這個方法的返回值作爲參數，而忽略原對象的其他參數。

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

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

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

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

// 應用：將正則對象自動轉爲字符串
var obj = {
  reg: /foo/
};

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

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

JSON.parse()

• 將 JSON 字符串轉換成對應的值。

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 // 張三

• 可以接受一個函數作爲第二個參數，用來變更返回值。

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

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

參考資料

JavaScript 語言入門教程 ：https://wangdoc.com/javascript/index.html