JSON.stringify() 的進(jìn)階用法：解鎖你不曾了解的強(qiáng)大功能

作者：web前端開發(fā) 2025-08-25 09:36:06

JSON.stringify() 是 JavaScript 開發(fā)中最常用的方法之一，但大多數(shù)開發(fā)者只停留在基礎(chǔ)的數(shù)據(jù)序列化使用層面。本文將深入探討 JSON.stringify() 的進(jìn)階用法，幫助你寫出更優(yōu)雅、高效的代碼。

JSON.stringify() 是 JavaScript 開發(fā)中最常用的方法之一，但大多數(shù)開發(fā)者只停留在基礎(chǔ)的數(shù)據(jù)序列化使用層面。

實(shí)際上，這個(gè)方法隱藏了許多強(qiáng)大而實(shí)用的功能，能夠解決開發(fā)中的各種實(shí)際問(wèn)題。本文將深入探討 JSON.stringify() 的進(jìn)階用法，幫助你寫出更優(yōu)雅、高效的代碼。

一、基礎(chǔ)回顧：JSON.stringify() 的核心機(jī)制

在深入高級(jí)用法前，我們先明確 JSON.stringify() 的基本行為：

const user = {
name: "web前端開發(fā)官網(wǎng)",
score: 89,
secret: undefined,
  [Symbol('id')]: 123
};

console.log(JSON.stringify(user)); 
// 輸出: '{"name":"web前端開發(fā)官網(wǎng)","score":89}'

關(guān)鍵特性：

自動(dòng)忽略 undefined、Symbol 和函數(shù)類型的屬性
只序列化對(duì)象自身的可枚舉屬性
日期對(duì)象會(huì)被轉(zhuǎn)換為 ISO 格式字符串
循環(huán)引用會(huì)拋出錯(cuò)誤

二、選擇性序列化：第二個(gè)參數(shù)的妙用

1. 白名單過(guò)濾：精確控制輸出字段

通過(guò)數(shù)組參數(shù)可以指定需要包含的屬性列表：

const product = {
id: 101,
name: "無(wú)線耳機(jī)",
price: 299,
stock: 50,
manufacturer: "Acme Corp"
};

// 只保留 id 和 name 字段
console.log(JSON.stringify(product, ['id', 'name'])); 
// 輸出: '{"id":101,"name":"無(wú)線耳機(jī)"}'

實(shí)際應(yīng)用場(chǎng)景：

api 響應(yīng)數(shù)據(jù)瘦身
敏感信息過(guò)濾
減少網(wǎng)絡(luò)傳輸量

2. 轉(zhuǎn)換函數(shù)：動(dòng)態(tài)處理每個(gè)屬性

更強(qiáng)大的方式是使用轉(zhuǎn)換函數(shù)，它可以遞歸處理每個(gè)屬性：

const employee = {
name: "張三",
salary: 15000,
department: "研發(fā)部",
joinDate: newDate('2020-06-15')
};

const result = JSON.stringify(employee, (key, value) => {
if (key === 'salary') returnundefined; // 隱藏薪資
if (value instanceofDate) return value.toLocaleDateString();
return value;
});

console.log(result);
// 輸出: '{"name":"張三","department":"研發(fā)部","joinDate":"2020/6/15"}'

高級(jí)技巧：

實(shí)現(xiàn)自定義的序列化邏輯
數(shù)據(jù)脫敏處理
特殊類型（如 BigInt）的轉(zhuǎn)換

三、美化輸出：第三個(gè)參數(shù)的藝術(shù)

1. 數(shù)字縮進(jìn)：標(biāo)準(zhǔn)格式化

const book = {
title: "JavaScript高級(jí)程序設(shè)計(jì)",
author: {
name: "Nicholas C. Zakas",
country: "美國(guó)"
  },
tags: ["前端", "編程", "ES6"]
};

console.log(JSON.stringify(book, null, 2));

輸出效果：

{
"title": "JavaScript高級(jí)程序設(shè)計(jì)",
"author": {
"name": "Nicholas C. Zakas",
"country": "美國(guó)"
  },
"tags": [
"前端",
"編程",
"ES6"
  ]
}

2. 自定義縮進(jìn)：個(gè)性展示

console.log(JSON.stringify(book, null, '-->'));

輸出效果：

{
-->"title": "JavaScript高級(jí)程序設(shè)計(jì)",
-->"author": {
--->"name": "Nicholas C. Zakas",
--->"country": "美國(guó)"
-->},
-->"tags": [
--->"前端",
--->"編程",
--->"ES6"
-->]
}

實(shí)用價(jià)值：

調(diào)試時(shí)更易讀的輸出
生成文檔中的示例數(shù)據(jù)
保持團(tuán)隊(duì)代碼風(fēng)格統(tǒng)一

四、深度比較：對(duì)象指紋技術(shù)

1. 對(duì)象比較的痛點(diǎn)

const obj1 = { a: 1, b: 2, 1: "x" };
const obj2 = { b: 2, a: 1, 1: "x" };

console.log(JSON.stringify(obj1) === JSON.stringify(obj2)); // false

2. 鍵序問(wèn)題的本質(zhì)

JavaScript 對(duì)象鍵的順序遵循特定規(guī)則：

數(shù)字鍵：按數(shù)值升序排列（0~232-1）
字符串鍵：按創(chuàng)建順序排列
Symbol鍵：不參與序列化

解決方案：

functionstableStringify(obj) {
returnJSON.stringify(obj, Object.keys(obj).sort());
}

console.log(stableStringify(obj1) === stableStringify(obj2)); // true

應(yīng)用場(chǎng)景：

對(duì)象內(nèi)容比對(duì)
生成唯一緩存鍵
數(shù)據(jù)一致性校驗(yàn)

五、特殊場(chǎng)景處理技巧

1. 處理循環(huán)引用

const circularObj = { a: 1 };
circularObj.self = circularObj;

// 直接序列化會(huì)報(bào)錯(cuò)
// JSON.stringify(circularObj); // TypeError

// 解決方案
const getCircularReplacer = () => {
const seen = new WeakSet();
return (key, value) => {
if (typeofvalue === "object" && value !== null) {
if (seen.has(value)) return'[Circular]';
      seen.add(value);
    }
returnvalue;
  };
};

console.log(JSON.stringify(circularObj, getCircularReplacer()));
// 輸出: {"a":1,"self":"[Circular]"}

2. 自定義 toJSON 方法

classPerson{
constructor(name, age) {
this.name = name;
this.age = age;
  }

  toJSON() {
return {
fullName: `Mr./Ms. ${this.name}`,
birthYear: newDate().getFullYear() - this.age
    };
  }
}

const p = new Person("李四", 30);
console.log(JSON.stringify(p));
// 輸出: {"fullName":"Mr./Ms. 李四","birthYear":1993}

六、性能與安全考量

1. 性能優(yōu)化

// 不好的做法：頻繁序列化大對(duì)象
for (let i = 0; i < 1000; i++) {
localStorage.setItem('data', JSON.stringify(largeObj));
}

// 優(yōu)化方案：只序列化變化部分
let lastState;
functionsavePartial(state) {
const changes = {};
for (const key in state) {
if (state[key] !== lastState?.[key]) {
      changes[key] = state[key];
    }
  }
localStorage.setItem('changes', JSON.stringify(changes));
  lastState = {...state};
}

2. 安全注意事項(xiàng)

// 潛在XSS風(fēng)險(xiǎn)
const userInput = '{"__proto__": {"isAdmin": true}}';
const parsed = JSON.parse(userInput);
Object.assign({}, parsed); // 污染原型鏈

// 安全做法
const safeParse = (json) => {
const parsed = JSON.parse(json);
if (parsed && typeof parsed === 'object') {
Object.setPrototypeOf(parsed, null);
  }
return parsed;
};

七、實(shí)際應(yīng)用案例

1. 深度克隆的局限與改進(jìn)

// 基礎(chǔ)深克隆
functiondeepClone(obj) {
returnJSON.parse(JSON.stringify(obj));
}

// 增強(qiáng)版（處理特殊類型）
functionenhancedDeepClone(obj) {
returnJSON.parse(JSON.stringify(obj, (key, value) => {
if (typeof value === 'bigint') return value.toString() + 'n';
if (value instanceofRegExp) return value.toString();
return value;
  }));
}

2. 數(shù)據(jù)差異比較

functiongetObjectDiff(a, b) {
const stableA = stableStringify(a);
const stableB = stableStringify(b);

if (stableA === stableB) returnnull;

// 實(shí)際項(xiàng)目中可以使用更專業(yè)的diff算法
return {
before: JSON.parse(stableA),
after: JSON.parse(stableB)
  };
}