前言

項(xiàng)目中遇到一個(gè) bug，一個(gè)組件為了保留一份 JSON 對(duì)象绝淡，使用 JSON.stringify 將其轉(zhuǎn)換成字符串昌抠，這樣做當(dāng)然是為了避免對(duì)象是引用類型造成數(shù)據(jù)源的污染。
但發(fā)現(xiàn)后面使用 JSON.parse 方法之后轨功，發(fā)現(xiàn)數(shù)據(jù)有所變化旭斥。
代碼簡(jiǎn)化：

let obj = {
  name: 'Gopal',
  age: Infinity
}
let originObj = JSON.stringify(obj)
console.log(originObj) // {"name":"Gopal","age":null}

可以看到，Infinity 變成了 null古涧，從而導(dǎo)致了后面的 bug垂券。其實(shí)項(xiàng)目中自己踩 JSON.stringify 的坑已經(jīng)很多了，借此機(jī)會(huì)好好整理一下羡滑，也給大家一個(gè)參考
解決方法1：
簡(jiǎn)單粗暴菇爪，重新給 age 屬性賦值
解決方法2：

function censor(key, value) {
  if (value === Infinity) {
    return "Infinity";
  }
  return value;
}
var b = JSON.stringify(a, censor);

var c = JSON.parse(
  b,
  function (key, value) {
    return value === "Infinity"  ? Infinity : value;
  }
);

這就有點(diǎn)繞了，當(dāng)做參考吧柒昏，其實(shí)我自己是直接使用了第一種方法凳宙。不過(guò)這里可以看到 JSON.stringify 實(shí)際上還有第二個(gè)參數(shù)，那它有什么用呢职祷？接下來(lái)我們揭開(kāi)它的神秘面紗氏涩。
JSON.stringify 基礎(chǔ)語(yǔ)法

JSON.stringify(value[, replacer [, space]])

概念

MDN 中文文檔對(duì)它的解釋如下：
JSON.stringify() 方法將一個(gè) JavaScript 值（對(duì)象或者數(shù)組）轉(zhuǎn)換為一個(gè) JSON 字符串，如果指定了 replacer 是一個(gè)函數(shù)堪旧，則可以選擇性地替換值削葱，或者如果指定了 replacer 是一個(gè)數(shù)組，則可選擇性地僅包含數(shù)組指定的屬性淳梦。
我個(gè)人覺(jué)得是有所不妥的析砸，不妥之處在于“對(duì)象或者數(shù)組”，因?yàn)閷?shí)際上對(duì)于普通的值爆袍，我們也可以使用 JSON.stringify首繁，只是我們很少這么用罷了。不過(guò)這個(gè)問(wèn)題不大陨囊，我們文中介紹的也都是針對(duì)對(duì)象或者數(shù)組弦疮。
JSON.stringify('foo'); // '"foo"'
英文版的解釋就會(huì)合理很多
The JSON.stringify() method converts a JavaScript object or value to a JSON string, optionally replacing values if a replacer function is specified or optionally including only the specified properties if a replacer array is specified.
簡(jiǎn)單來(lái)說(shuō)，JSON.stringify() 就是將值轉(zhuǎn)換為相應(yīng)的 JSON 格式字符串蜘醋。

JSON.stringify 強(qiáng)大的第二個(gè)參數(shù) replacer

這個(gè)參數(shù)是可選的胁塞，可以是一個(gè)函數(shù)，也可以是一個(gè)數(shù)組
當(dāng)是一個(gè)函數(shù)的時(shí)候，則在序列化的過(guò)程中啸罢，被序列化的每個(gè)屬性都會(huì)經(jīng)過(guò)該函數(shù)的轉(zhuǎn)換和處理编检，看如下代碼：

let replacerFun = function (key, value) {
  console.log(key, value)
  if (key === 'name') {
    return undefined
  }
  return value
}

let myIntro = {
  name: 'Gopal',
  age: 25,
  like: 'FE'
}
console.log(JSON.stringify(myIntro, replacerFun))
// {"age":25,"like":"FE"}

這里其實(shí)就是一個(gè)篩選的作用，利用的是 JSON.stringify 中對(duì)象屬性值為 undefined 就會(huì)在序列化中被忽略的特性（后面我們會(huì)提到）
值得注意的是扰才，在一開(kāi)始 replacer 函數(shù)會(huì)被傳入一個(gè)空字符串作為 key 值允懂，代表著要被 stringify 的這個(gè)對(duì)象
上面 console.log(key, value) 輸出的值如下：

 { name: 'Gopal', age: 25, like: 'FE' }
name Gopal
age 25
like FE
{"age":25,"like":"FE"}

可以看出，通過(guò)第二個(gè)參數(shù)衩匣，我們可以更加靈活的去操作和修改被序列化目標(biāo)的值
當(dāng)?shù)诙€(gè)參數(shù)為數(shù)組的時(shí)候蕾总，只有包含在這個(gè)數(shù)組中的屬性名才會(huì)被序列化

JSON.stringify(myIntro, ['name']) // {"name":"Gopal"}

中看不中用的第三個(gè)參數(shù)

指定縮進(jìn)用的空白字符串，更多時(shí)候就是指定一個(gè)數(shù)字琅捏，代表幾個(gè)空格：

let myIntro = {
  name: 'Gopal',
  age: 25,
  like: 'FE'
}

console.log(JSON.stringify(myIntro))
console.log(JSON.stringify(myIntro, null, 2))

// {"name":"Gopal","age":25,"like":"FE"}
// {
//   "name": "Gopal",
//   "age": 25,
//   "like": "FE"
// }

JSON.stringify 使用場(chǎng)景

判斷對(duì)象/數(shù)組值是否相等

let a = [1,2,3],
    b = [1,2,3];
JSON.stringify(a) === JSON.stringify(b);// true

localStorage/sessionStorage 存儲(chǔ)對(duì)象

我們知道 localStorage/sessionStorage 只可以存儲(chǔ)字符串生百，當(dāng)我們想存儲(chǔ)對(duì)象的時(shí)候，需要使用 JSON.stringify 轉(zhuǎn)換成字符串午绳，獲取的時(shí)候再 JSON.parse

// 存
function setLocalStorage(key,val) {
    window.localStorage.setItem(key, JSON.stringify(val));
};
// 取
function getLocalStorage(key) {
    let val = JSON.parse(window.localStorage.getItem(key));
    return val;
};

實(shí)現(xiàn)對(duì)象深拷貝

let myIntro = {
  name: 'Gopal',
  age: 25,
  like: 'FE'
}

function deepClone() {
  return JSON.parse(JSON.stringify(myIntro))
}

let copyMe = deepClone(myIntro)
copyMe.like = 'Fitness'
console.log(myIntro, copyMe)

// { name: 'Gopal', age: 25, like: 'FE' } { name: 'Gopal', age: 25, like: 'Fitness' }

路由（瀏覽器地址）傳參

因?yàn)闉g覽器傳參只能通過(guò)字符串進(jìn)行置侍，所以也是需要用到 JSON.stringify

JSON.stringify 使用注意事項(xiàng)

看了上面，是不是覺(jué)得 JSON.stringify 功能很強(qiáng)大拦焚，立馬想在項(xiàng)目中嘗試了呢丧鸯？稍等稍等葛闷，先看完以下的注意事項(xiàng)再做決定吧惠勒，可能在某些場(chǎng)景下會(huì)觸發(fā)一些難以發(fā)現(xiàn)的問(wèn)題

轉(zhuǎn)換屬性值中有 toJSON 方法迁央，慎用

轉(zhuǎn)換值中如果有 toJSON 方法，該方法返回的值將會(huì)是最后的序列化結(jié)果

// toJSON
let toJsonMyIntro = {
  name: "Gopal",
  age: 25,
  like: "FE",
  toJSON: function () {
    return "前端";
  },
};

console.log(JSON.stringify(toJsonMyIntro)); // "前端"

被轉(zhuǎn)換值中有 undefined僵刮、任意的函數(shù)以及 symbol 值据忘，慎用

分為兩種情況
一種是數(shù)組對(duì)象，undefined搞糕、任意的函數(shù)以及 symbol 值會(huì)被轉(zhuǎn)換成 null

JSON.stringify([undefined, Object, Symbol("")]);
// '[null,null,null]'

一種是非數(shù)組對(duì)象勇吊，在序列化的過(guò)程中會(huì)被忽略

JSON.stringify({ x: undefined, y: Object, z: Symbol("") });
// '{}'

對(duì)于這種情況，我們可以使用 JSON.stringify 的第二個(gè)參數(shù)窍仰，使其達(dá)到符合我們的預(yù)期

const testObj = { x: undefined, y: Object, z: Symbol("test") }

const resut = JSON.stringify(testObj, function (key, value) {
  if (value === undefined) {
    return 'undefined'
  } else if (typeof value === "symbol" || typeof value === "function") {
    return value.toString()
  }
  return value
})

console.log(resut)
// {"x":"undefined","y":"function Object() { [native code] }","z":"Symbol(test)"}

包含循環(huán)引用的對(duì)象汉规，慎用

let objA = {
  name: "Gopal",
}

let objB = {
  age: 25,
}

objA.age = objB
objB.name = objA
JSON.stringify(objA)

會(huì)報(bào)以下錯(cuò)誤：

Uncaught TypeError: Converting circular structure to JSON
    --> starting at object with constructor 'Object'
    |     property 'age' -> object with constructor 'Object'
    --- property 'name' closes the circle
    at JSON.stringify (<anonymous>)
    at <anonymous>:1:6

以 symbol 為屬性鍵的屬性，慎用

所有以 symbol 為屬性鍵的屬性都會(huì)被完全忽略掉驹吮，即便 replacer 參數(shù)中強(qiáng)制指定包含了它們针史。

JSON.stringify({ [Symbol.for("foo")]: "foo" }, [Symbol.for("foo")])
// '{}'

JSON.stringify({ [Symbol.for("foo")]: "foo" }, function (k, v) {
  if (typeof k === "symbol") {
    return "a symbol";
  }
})
// undefined

值為 NaN 和 Infinity，慎用

數(shù)組的值碟狞，或者非數(shù)組對(duì)象屬性值為 NaN 和 Infinity 的啄枕，會(huì)被轉(zhuǎn)換成 null

let me = {
  name: "Gopal",
  age: Infinity,
  money: NaN,
};
let originObj = JSON.stringify(me);
console.log(originObj); // {"name":"Gopal","age":null,"money":null}

JSON.stringify([NaN, Infinity])
// [null,null]

具有不可枚舉的屬性值時(shí)，慎用

不可枚舉的屬性默認(rèn)會(huì)被忽略：

let person = Object.create(null, {
  name: { value: "Gopal", enumerable: false },
  age: { value: "25", enumerable: true },
})

console.log(JSON.stringify(person))
// {"age":"25"}

總結(jié)

JSON.stringify 在實(shí)際應(yīng)用中確實(shí)很方便的解決了我們很多問(wèn)題族沃，比如簡(jiǎn)單的深拷貝等频祝。但是我們?cè)谑褂脮r(shí)候泌参，也需要知道它有哪些不足之處，在目標(biāo)值如果是一些特殊值的情況下常空，可能序列化后的結(jié)果會(huì)不符合我們的預(yù)期及舍，這個(gè)時(shí)候就需要慎用
原文鏈接：https://mp.weixin.qq.com/s/i0D40LQMe7a3SpzE_T6u5A