前言

工作中經(jīng)常使用 JSON.stringify 方法存儲(chǔ) localStorage，深拷貝對(duì)象，用的最多的就是第一個(gè)參數(shù)，甚至不知道它還有第二個(gè)和第三個(gè)參數(shù)，所以詳細(xì)的整理了一下 JSON.stringify 用法和特性，使我們能夠真正的能靈活運(yùn)用這個(gè)方法。

語(yǔ)法

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

參數(shù)

replacer 參數(shù)

replacer 參數(shù)可以是一個(gè)函數(shù)或者一個(gè)數(shù)組。作為函數(shù)，它有兩個(gè)參數(shù)，鍵（key）和值（value），它們都會(huì)被序列化。

值得注意的是，在開(kāi)始時(shí), replacer 函數(shù)會(huì)被傳入一個(gè)空字符串作為 key 值，value代表著要被 stringify 的這個(gè)對(duì)象。隨后每個(gè)對(duì)象或數(shù)組上的屬性會(huì)被依次傳入。

總的來(lái)說(shuō) replacer 參數(shù)就是用來(lái)手動(dòng)忽略一些不想被序列化的屬性，有點(diǎn)類(lèi)似過(guò)濾器的作用

var foo = {
  id: 1,
  name: "sf",
  age: 18,
};
//作為函數(shù)，函數(shù)沒(méi)有返回值或者返回值為 undefined 時(shí)，忽略這個(gè)屬性值
JSON.stringify(foo, (key, value) => {
  if (typeof value === "string") {
    return undefined;
  }
  return value;
});
//{"id":1,"age":18}

//作為數(shù)組，數(shù)組的值代表將被序列化成 JSON 字符串的屬性名
JSON.stringify(foo, ['id',"name"]);
//{"id":1,"name":"sf"}

space 參數(shù)

space 參數(shù)用來(lái)控制結(jié)果字符串里面的間距。如果是一個(gè)數(shù)字, 則在字符串化時(shí)每一級(jí)別會(huì)比上一級(jí)別縮進(jìn)多這個(gè)數(shù)字值的空格（最多10個(gè)空格）；如果是一個(gè)字符串，則每一級(jí)別會(huì)比上一級(jí)別多縮進(jìn)該字符串（或該字符串的前10個(gè)字符）。實(shí)際使用基本都是用來(lái)美化輸出。

let a = JSON.stringify({ a: 1, b: 2 }, null, 2);
let b = JSON.stringify({ a: 1, b: 2 }, null, "  ");
console.log(a == b); //true

JSON.stringify({ a: 1, b: 2 }, null, "--");
// {
// --"a": 1,
// --"b": 2
// }

特性描述

1. undefined、Symbol值、函數(shù)

• 出現(xiàn)在對(duì)象屬性值中: undefined、Symbol值、函數(shù)，在序列化過(guò)程中將會(huì)被忽略
• 出現(xiàn)在數(shù)組中: undefined、Symbol值、函數(shù) 會(huì)被轉(zhuǎn)化為 null
• 單獨(dú)轉(zhuǎn)換時(shí): 會(huì)返回 undefined

const obj = {
  a: "a",
  b: undefined,
  c: Symbol(),
  d: function () {},
};
JSON.stringify(obj)
// {"a":"a"}
const arry = [undefined, Symbol("c"), function () {}];
JSON.stringify(arry); 
//[null,null,null]
JSON.stringify(undefined); 
// undefined
JSON.stringify(Symbol(111));
// undefined
JSON.stringify(function () {});
// undefined

2. 非數(shù)組對(duì)象的屬性不能保證以特定的順序出現(xiàn)在序列化后的字符串中

正如在第一特性所說(shuō)，JSON.stringify() 序列化時(shí)會(huì)忽略一些特殊的值，所以不能保證序列化后的字符串還是以特定的順序出現(xiàn)（數(shù)組除外）。

3. 布爾值、數(shù)字、字符串的包裝對(duì)象在序列化過(guò)程中會(huì)自動(dòng)轉(zhuǎn)換成對(duì)應(yīng)的原始值

JSON.stringify([new Boolean(true), new Number(1), new String("a")]);
// [true,1,"a"]

4. 轉(zhuǎn)換值如果有 toJSON() 方法，該方法定義什么值將被序列化

const obj = {
  a: "aaa",
  toJSON() {
    return "hello world";
  },
};
JSON.stringify(obj);
// "hello world"

5. 對(duì)包含循環(huán)引用的對(duì)象（對(duì)象之間相互引用，形成無(wú)限循環(huán)）執(zhí)行此方法，會(huì)拋出錯(cuò)誤。

const obj = {
  name: "loopObj",
};
const loopObj = {
  obj,
};
// 對(duì)象之間形成循環(huán)引用，形成閉環(huán)
obj.loopObj = loopObj;
JSON.stringify(obj);
//TypeError: Converting circular structure to JSON

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

. 對(duì)包含循環(huán)引用的對(duì)象（對(duì)象之間相互引用，形成無(wú)限循環(huán)）執(zhí)行此方法，會(huì)拋出錯(cuò)誤。

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

7. 日期調(diào)用了 toJSON() 將其轉(zhuǎn)換為了 string 字符串（同Date.toISOString()），因此會(huì)被當(dāng)做字符串處理。

JSON.stringify({
  date: new Date("2022-02-02"),
})
// {"date":"2022-02-02T00:00:00.000Z"}

8. NaN 和 Infinity 格式的數(shù)值及 null 都會(huì)被當(dāng)做 null。

JSON.stringify([NaN, Infinity, 1 / 0, Number("a")]);
// [null,null,null,null]

9. 其他類(lèi)型的對(duì)象，包括 Map/Set/WeakMap/WeakSet，僅會(huì)序列化可枚舉的屬性。

// 不可枚舉的屬性默認(rèn)會(huì)被忽略：
JSON.stringify(
  Object.create(null, {
    x: { value: "x", enumerable: false },
    y: { value: "y", enumerable: true },
  })
);
// "{"y":"y"}"

應(yīng)用

localStorage

localStorage 中的鍵值對(duì)總是以字符串的形式存儲(chǔ)，所以當(dāng)我們需要把一個(gè)對(duì)象存在 localStorage 中時(shí)，只能用 JSON.stringify 將其轉(zhuǎn)化成字符串存儲(chǔ)，使用的時(shí)候用 JSON.parse 方法去取

const userInfo = { user: "admin" };
localStorage.setItem("userInfo", JSON.stringify(userInfo));
JSON.parse(localStorage.getItem("userInfo"));
// {user: 'admin'}

對(duì)象深拷貝

使用 JSON.parse(JSON.stringify) 是實(shí)現(xiàn)對(duì)象的深拷貝最簡(jiǎn)單粗暴的方法。但是由于 JSON.stringify 的一些特性，會(huì)產(chǎn)生問(wèn)題，例如：

• undefined、Symbol、 函數(shù)， 對(duì)象中會(huì)被忽略，數(shù)組中會(huì)被序列化成 null。
• NaN、Infinity 和 -Infinity 會(huì)被序列化成 null。
• 循環(huán)引用問(wèn)題，stringify 會(huì)報(bào)錯(cuò)。

當(dāng)確定不存在以上情況時(shí)，才考慮使用 JSON.parse(JSON.stringify) 進(jìn)行深拷貝。

屬性過(guò)濾

當(dāng)接口返回一大堆數(shù)據(jù)，我們只想存某幾個(gè)屬性的時(shí)候，通過(guò) replacer 函數(shù)過(guò)濾屬性是一個(gè)不錯(cuò)的小技巧。

var foo = {
  id: 1,
  name: "sf",
  age: 18,
};
localStorage.setItem("user", JSON.stringify(foo, ["id", "name"]));
localStorage.getItem("user");
//{"id":1,"name":"sf"}

總結(jié)

到此這篇關(guān)于JSON.stringify實(shí)例詳解以及靈活運(yùn)用的文章就介紹到這了,更多相關(guān)JSON.stringify運(yùn)用內(nèi)容請(qǐng)搜索腳本之家以前的文章或繼續(xù)瀏覽下面的相關(guān)文章希望大家以后多多支持腳本之家！