其他
分享一个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多名前端小伙伴在等着一起学习哦 -->
模拟面试、简历指导可私信找我~