分享一個 JSON-stringify 小技巧

前言

大家好，我是林三心，用最通俗易懂的話講最難的知識點是我的座右銘，基礎是進階的前提是我的初心。

背景

我們先來看看這樣的例子，假如我從後端拿到了數據users，並需要在前端去計算，大於 60 歲的就給這個 user 設置isOld = true，因爲我前端頁面需要根據這個isOld去進行一系列的交互顯示邏輯計算

function UserFactory (data) {
  const user = data
  if (user.age >= 60) {
    // 大於60歲就isOld=true
    user.isOld = true
  }
  return data
}

const query = async () => {
  return [
    {
      name: '年輕人',
      age: 30
    },
    {
      name: '老年人',
      age: 60
    }
  ]
}

const fetchUsers = async () => {
  const users = await query()
  const currentUsers = users.map((user) => UserFactory(user))
  return currentUsers
}

缺點？

大家可以想一下這有什麼缺點呢？

你給他加上了一個isOld屬性，是爲了方便在前端去進行控制某些樣式的顯隱，但是這個屬性僅僅只是在前端而已，那如果當你保存到後端時，不應該把這個isOld去掉嗎？

const save = (users) => {
  // 這裏需要操作去除isOld屬性
  users = format(users)
  return axios.post('url', { data: users })
}

toJSON

但是有沒有一個比較優雅的方法去進行數據的格式化呢？

const users = [
    {
      name: '老年人',
      age: 60,
      isOld: true,
      // 給每一個對象加上一個 toJSON 方法
      toJSON:function(){
        delete this.isOld
        return this
      }
    }
]

// JSON.stringify會調用對象上的toJSON方法
JSON.stringify(users) 
// 會發現isOld不見了
[
    {
      name: '老年人',
      age: 60,
    }
]

改造代碼

function toRequestUserData () {
  delete this.isOld
  return this
}

function UserFactory (data) {
  const user = data
  if (user.age >= 60) {
    user.isOld = true
  }
++  data.toJSON = toRequestUserData
  return data
}

以下 原始數據，指的是從服務端拿回來的數據

這樣改造之後，無論你在哪裏，需要拿到原始數據的時候，只需要調用JSON.stringify即可

結語

我是林三心，一個熱心的前端菜鳥程序員。如果你上進，喜歡前端，想學習前端，那咱們可以交朋友，一起摸魚哈哈，摸魚羣，關注我，拉你進羣，有 5000 多名前端小夥伴在等着一起學習哦 -->

本文由 Readfog 進行 AMP 轉碼，版權歸原作者所有。
來源：https://mp.weixin.qq.com/s/x3kSxICwNMi-sYXjkvZZdA