慎用JSON.stringify

来源:https://www.cnblogs.com/gopal/archive/2022/08/31/16644799.html
-Advertisement-
Play Games

前言 項目中遇到一個 bug，一個組件為了保留一份 JSON 對象，使用 JSON.stringify 將其轉換成字元串，這樣做當然是為了避免對象是引用類型造成數據源的污染。 但發現後面使用 JSON.parse 方法之後，發現數據有所變化。 代碼簡化： let obj = { name: 'Gop ...


前言

項目中遇到一個 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 === Infinity) {
    return "Infinity";
  }
  return value;
}
var b = JSON.stringify(a, censor);

var c = JSON.parse(
  b,
  function (key, value) {
    return value === "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 === 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)"}

包含迴圈引用的對象，慎用

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 在實際應用中確實很方便的解決了我們很多問題，比如簡單的深拷貝等。

但是我們在使用時候，也需要知道它有哪些不足之處，在目標值可能是一些特殊值的情況下，可能序列化後的結果會不符合我們的預期，這個時候就需要慎用。


您的分享是我們最大的動力!

-Advertisement-
Play Games
更多相關文章
  • 開源公開課丨ChengYing安裝原理剖析
    一、直播介紹 之前的內容，我們為大家分享了ChengYing入門介紹，以及ChengYing部署Hadoop集群實戰，本期我們為大家分享ChengYing安裝原理。 本次直播我們將詳細介紹ChengYing安裝原理及卸載原理，以及其中會遇到的常見問題剖析，通過本次分享，希望大家能對ChengYing ...
  • 記錄一次資料庫CPU被打滿的排查過程
    資料庫CPU使用率100%報警頻繁起來。第一個想到的就是慢Sql，我們對未合理運用索引的表加入索引後，問題依然沒有得到解決，深入排查時，發現在 order by id asc limit n時，即使where條件已經包含了覆蓋索引，優化器還是選擇了錯誤的索引導致。 ...
  • 開源交流丨任務or實例 詳解大數據DAG調度系統Taier任務調度
    課件獲取：關註公眾號 “數棧研習社”，後臺私信 “Taier” 獲得直播課件 視頻回放：點擊這裡 ChunJun 開源項目地址：github 丨 gitee 喜歡我們的項目給我們點個__ STAR！STAR！！STAR！！！（重要的事情說三遍）__ 技術交流釘釘 qun：30537511 前言 在分 ...
  • 5分鐘搞定ORACLE到ClickHouse數據遷移同步-CloudCanal實戰
    簡述 ClickHouse 是一種流行的列式資料庫，對於計算 uv、mv、pv 等聚合類數據相當友好，所以廣泛使用於各類報表場景。 本文主要介紹如何使用 CloudCanal 快速構建一條穩定高效運行的 ORACLE 到 ClickHouse 數據同步鏈路。 示例中 ORACLE 庫為 PDB 模式 ...
  • 網卡限速工具之WonderShaper
    GreatSQL社區原創內容未經授權不得隨意使用，轉載請聯繫小編並註明來源。 GreatSQL是MySQL的國產分支版本，使用上與MySQL一致。 什麼是WonderShaper 如何安裝WonderShaper WonderShaper使用幫助 WonderShaper使用示例 查看網卡狀態 限制 ...
  • Jetpack架構組件學習(4)——APP Startup庫的使用
    最近在研究APP的啟動優化,也是發現了Jetpack中的App Startup庫,可以進行SDK的初始化操作,於是便是學習了,特此記錄 原文:Jetpack架構組件學習(4)——App Startup庫的使用 - Stars-One的雜貨小窩 兩種方式初始化SDK 首先,先是講解了關於SDK的初始化 ...
  • 如何通過經緯度坐標獲取附近的地址信息？
    經緯度是確定每個地點位置的精確坐標，使用坐標描述一個位置，非常準確但是並不直觀，面向用戶表達並不友好。HMS Core定位服務提供了逆地理編碼功能，可以通過緯度獲取附近地點的詳細地址，將坐標轉化為地理描述。例如，在電商App的地圖裡標定一個點，就可以顯示具體位置；打車、外賣App里拖動地圖或者點擊地 ...
  • 【面試題】js 問號(?)的強大之處，你知道嗎？？
    問號(?)的強大之處 點擊打開視頻講解更加詳細 一、問號點（?.） obj: { name: "末晨曦吖", }, console.log(this.obj.age, "年齡"); //undefined console.log(this.obj.hobby, "愛好"); //undefined ...
一周排行
    -Advertisement-
    Play Games
  • 移動開發（一）：使用.NET MAUI開發第一個安卓APP
    移動開發（一）：使用.NET MAUI開發第一個安卓APP 對於工作多年的C#程式員來說，近來想嘗試開發一款安卓APP，考慮了很久最終選擇使用.NET MAUI這個微軟官方的框架來嘗試體驗開發安卓APP，畢竟是使用Visual Studio開發工具，使用起來也比較的順手，結合微軟官方的教程進行了安卓 ...
  • wpf ToggleButton選中效果和一個登錄界面
    前言 QuestPDF 是一個開源 .NET 庫，用於生成 PDF 文檔。使用了C# Fluent API方式可簡化開發、減少錯誤並提高工作效率。利用它可以輕鬆生成 PDF 報告、發票、導出文件等。 項目介紹 QuestPDF 是一個革命性的開源 .NET 庫，它徹底改變了我們生成 PDF 文檔的方 ...
  • 彈幕樹洞項目功能新增篇
    項目地址 項目後端地址： https://github.com/ZyPLJ/ZYTteeHole 項目前端頁面地址： ZyPLJ/TreeHoleVue (github.com) https://github.com/ZyPLJ/TreeHoleVue 目前項目測試訪問地址： http://tree ...
  • 第27篇 sqlserver2022詳細安裝步驟
    話不多說，直接開乾 一.下載 1.官方鏈接下載： https://www.microsoft.com/zh-cn/sql-server/sql-server-downloads 2.在下載目錄中找到下麵這個小的安裝包 SQL2022-SSEI-Dev.exe，運行開始下載SQL server； 二. ...
  • .NET 開源高性能 MQTT 類庫
    前言 隨著物聯網（IoT）技術的迅猛發展，MQTT（消息隊列遙測傳輸）協議憑藉其輕量級和高效性，已成為眾多物聯網應用的首選通信標準。 MQTTnet 作為一個高性能的 .NET 開源庫，為 .NET 平臺上的 MQTT 客戶端與伺服器開發提供了強大的支持。 本文將全面介紹 MQTTnet 的核心功能 ...
  • Serilog文檔翻譯系列（六） - 可用的接收器、增強器、格式化輸出
    Serilog支持多種接收器用於日誌存儲，增強器用於添加屬性，LogContext管理動態屬性，支持多種輸出格式包括純文本、JSON及ExpressionTemplate。還提供了自定義格式化選項，適用於不同需求。 ...
  • 警惕 Visual Studio 屬性求值副作用導致邏輯不符合預期
    目錄簡介獲取 HTML 文檔解析 HTML 文檔測試參考文章 簡介 動態內容網站使用 JavaScript 腳本動態檢索和渲染數據，爬取信息時需要模擬瀏覽器行為，否則獲取到的源碼基本是空的。 本文使用的爬取步驟如下： 使用 Selenium 獲取渲染後的 HTML 文檔 使用 HtmlAgility ...
  • [使用目前最新版]HybridCLR6.9.0+YooAsset2.2.4實現純C# Unity熱更新方案 (一)
    1.前言 什麼是熱更新 游戲或者軟體更新時，無需重新下載客戶端進行安裝，而是在應用程式啟動的情況下，在內部進行資源或者代碼更新 Unity目前常用熱更新解決方案 HybridCLR，Xlua，ILRuntime等 Unity目前常用資源管理解決方案 AssetBundles，Addressable， ...
  • 在 ASP.NET Core Web API 中使用操作篩選器統一處理通用操作
    本文章主要是在C# ASP.NET Core Web API框架實現向手機發送驗證碼簡訊功能。這裡我選擇是一個互億無線簡訊驗證碼平臺，其實像阿裡雲，騰訊雲上面也可以。 首先我們先去 互億無線 https://www.ihuyi.com/api/sms.html 去註冊一個賬號 註冊完成賬號後，它會送 ...
  • 第28篇 如何.net中實現高效可靠數據同步api
    通過以下方式可以高效，並保證數據同步的可靠性 1.API設計 使用RESTful設計，確保API端點明確，並使用適當的HTTP方法（如POST用於創建，PUT用於更新）。 設計清晰的請求和響應模型，以確保客戶端能夠理解預期格式。 2.數據驗證 在伺服器端進行嚴格的數據驗證，確保接收到的數據符合預期格 ...
所有分類