H5W3
当前位置:H5W3 > JavaScript > 正文

【JS】你可能不知道的JS函数

1 前言

日常业务写的太多已经麻痹了神经,很多本该知道的知识早已抛之脑后,大家都知道在JS中函数是一等公民,但是竟然{有人|zuo zhe}连它的特性都不清楚,真是惭愧。

2 起因

在日常业务开发中,通常都会在数据中给一个默认值,然后在请求后端数据后替换掉默认值,如果完全替换整个对象肯能并不是我们想要的,也可能会出现一些为止的错误,又或者需要对一些数据做修改,这个时候就需要我们写一个函数去替换每个key对应的value,就在昨天我也遇到了同样的事情,废话就不多说了,直接上代码。

// form1为原始数据
// form2为后端返回数据
const mapForm = (form1, form2) => {
for (let key in form1) {
if (key in form2) {
form1[key] = form2[key]
}
}
}
const form1 = {
name: '',
age: 0
}
const form2 = {
name: 'mazi',
age: 26
}
mapForm(form1, form2)
console.log(form1) // { name: 'mazi', age: 26 }

3 问题

上面代码很明显可以看出在调用mapForm函数后form1的值已经和form2完全一致,其实这也正是我想要看到的,只是当时比较疑惑,因为之前并不知道js中函数如果传递复杂类型的话,形式参数和实际参数存在弱引用,所以这会导致form1的数据改变。

4 解决

如果在你的代码中也存在类似的情况,并且你不希望form1的对象改变,有个比较方便的办法就是直接使用JSON.parse(JSON.stringify(obj)的方式处理,代码修改如下:

...
- mapForm(form1, form2)
+ mapForm(JSON.parse(JSON.stringify(form1), form2)
console.log(form1) // { name: '', age: 0 }

因为直接使用JSON.parse(JSON.stringify(obj)的方式并不安全,某些数据类型并不会如愿,所以可以尝试使用lodash库提供的cloneDeep函数,方式如下:

const objects = [{ 'a': 1 }, { 'b': 2 }]
const deep = _.cloneDeep(objects)
console.log(deep[0] === objects[0]) // false

如果觉得这篇文章对你有帮助,帮忙点个关注,谢谢,后续会陆续更新文章。
【JS】你可能不知道的JS函数

本文地址:H5W3 » 【JS】你可能不知道的JS函数

评论 0

  • 昵称 (必填)
  • 邮箱 (必填)
  • 网址