分享一个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多名前端小伙伴在等着一起学习哦 -->

模拟面试、简历指导可私信找我~