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

如果感觉这篇文章对你有帮忙,帮忙点个关注,谢谢,后续会陆续更新文章。