前言
專案中遇到一個 bug，一個組件為了保留一份 JSON 物件，使用 JSON.stringify 將其轉換成字串，這樣做當然是為了避免物件是參考型別造成資料源的污染，
但發現后面使用 JSON.parse 方法之后，發現資料有所變化，
代碼簡化：
let obj = {
name: 'Gopal',
age: Infinity
}
let originObj = JSON.stringify(obj)
console.log(originObj) // {"name":"Gopal","age":null}
可以看到，Infinity 變成了 null，從而導致了后面的 bug，其實專案中自己踩 JSON.stringify 的坑已經很多了，借此機會好好整理一下，也給大家一個參考，
先說下這個問題的解決方法：
解決方法1：
簡單粗暴，重新給 age 屬性賦值
解決方法2：
function censor(key, value) {
if (value =https://www.cnblogs.com/gopal/archive/2022/08/31/== Infinity) {
return"Infinity";
}
return value;
}
var b = JSON.stringify(a, censor);
var c = JSON.parse(
b,
function (key, value) {
return value =https://www.cnblogs.com/gopal/archive/2022/08/31/=="Infinity" ? Infinity : value;
}
);
這就有點繞了，當做參考吧，其實我自己是直接使用了第一種方法，不過這里可以看到 JSON.stringify 實際上還有第二個引數，那它有什么用呢？接下來我們揭開它的神秘面紗，
JSON.stringify 基礎語法
JSON.stringify(value[, replacer [, space]])
概念
MDN 中文檔案對它的解釋如下：
JSON.stringify() 方法將一個 JavaScript 值（物件或者陣列）轉換為一個 JSON 字串，如果指定了 replacer 是一個函式，則可以選擇性地替換值，或者如果指定了 replacer 是一個陣列，則可選擇性地僅包含陣列指定的屬性，
我個人覺得這樣解釋是有所不妥的，不妥之處在于“物件或者陣列”，因為實際上對于普通的值，我們也可以使用 JSON.stringify，只是我們很少這么用罷了，不過這個問題不大，我們文中介紹的也都是針對物件或者陣列，
JSON.stringify('foo'); // '"foo"'
而英文版 MDN 的解釋就會合理很多：
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.
簡單來說，JSON.stringify() 就是將值轉換為相應的 JSON 格式字串，
JSON.stringify 強大的第二個引數 replacer
這個引數是可選的，可以是一個函式，也可以是一個陣列
當是一個函式的時候，則在序列化的程序中，被序列化的每個屬性都會經過該函式的轉換和處理，看如下代碼：
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"}
這里其實就是一個篩選的作用，利用的是 JSON.stringify 中物件屬性值為 undefined 就會在序列化中被忽略的特性（后面我們會提到），
值得注意的是，在一開始 replacer 函式會被傳入一個空字串作為 key 值，代表著要被 stringify 的這個物件，
上面 console.log(key, value) 輸出的值如下：
{ name: 'Gopal', age: 25, like: 'FE' }
name Gopal
age 25
like FE
{"age":25,"like":"FE"}
可以看出，通過第二個引數，我們可以更加靈活的去操作和修改被序列化目標的值，
當第二個引數為陣列的時候，只有包含在這個陣列中的屬性名才會被序列化：
JSON.stringify(myIntro, ['name']) // {"name":"Gopal"}
中看不中用的第三個引數
指定縮進用的空白字串，更多時候就是指定一個數字，代表幾個空格：
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 使用場景
判斷物件/陣列值是否相等
let a = [1,2,3],
b = [1,2,3];
JSON.stringify(a) === JSON.stringify(b);// true
localStorage/sessionStorage 存盤物件
我們知道 localStorage/sessionStorage 只可以存盤字串，當我們想存盤物件的時候，需要使用 JSON.stringify 轉換成字串，獲取的時候再 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;
};
實作物件深拷貝
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' }
路由（瀏覽器地址）傳參
因為瀏覽器傳參只能通過字串進行，所以也是需要用到 JSON.stringify，
JSON.stringify 使用注意事項
看了上面，是不是覺得 JSON.stringify 功能很強大，立馬想在專案中嘗試了呢？稍等稍等，先看完以下的注意事項再做決定吧，可能在某些場景下會觸發一些難以發現的問題，
轉換屬性值中有 toJSON 方法，慎用
轉換值中如果有 toJSON 方法，該方法回傳的值將會是最后的序列化結果，
// toJSON
let toJsonMyIntro = {
name: "Gopal",
age: 25,
like: "FE",
toJSON: function () {
return "前端雜貨鋪";
},
};
console.log(JSON.stringify(toJsonMyIntro)); // "前端雜貨鋪"
被轉換值中有 undefined、任意的函式以及 symbol 值，慎用
分為兩種情況：
一種是陣列物件，undefined、任意的函式以及 symbol 值會被轉換成 null，
JSON.stringify([undefined, Object, Symbol("")]);
// '[null,null,null]'
一種是非陣列物件，在序列化的程序中會被忽略，
JSON.stringify({ x: undefined, y: Object, z: Symbol("") });
// '{}'
對于這種情況，我們可以使用 JSON.stringify 的第二個引數，使其達到符合我們的預期
const testObj = { x: undefined, y: Object, z: Symbol("test") }
const resut = JSON.stringify(testObj, function (key, value) {
if (value =https://www.cnblogs.com/gopal/archive/2022/08/31/== undefined) {
return'undefined'
} else if (typeof value =https://www.cnblogs.com/gopal/archive/2022/08/31/=="symbol" || typeof value =https://www.cnblogs.com/gopal/archive/2022/08/31/=="function") {
return value.toString()
}
return value
})
console.log(resut)
// {"x":"undefined","y":"function Object() { [native code] }","z":"Symbol(test)"}
包含回圈參考的物件，慎用
let objA = {
name: "Gopal",
}
let objB = {
age: 25,
}
objA.age = objB
objB.name = objA
JSON.stringify(objA)
會報以下錯誤：
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 為屬性鍵的屬性都會被完全忽略掉，即便 replacer 引數中強制指定包含了它們，
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，慎用
陣列的值，或者非陣列物件屬性值為 NaN 和 Infinity 的，會被轉換成 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]
具有不可列舉的屬性值時，慎用
不可列舉的屬性默認會被忽略：
let person = Object.create(null, {
name: { value: "Gopal", enumerable: false },
age: { value: "25", enumerable: true },
})
console.log(JSON.stringify(person))
// {"age":"25"}
總結
JSON.stringify 在實際應用中確實很方便的解決了我們很多問題，比如簡單的深拷貝等，
但是我們在使用時候，也需要知道它有哪些不足之處，在目標值可能是一些特殊值的情況下，可能序列化后的結果會不符合我們的預期，這個時候就需要慎用，
轉載請註明出處，本文鏈接：https://www.uj5u.com/qiye/503310.html
標籤：其他