技術標籤：前端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

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

如果覺得這篇文章對你有幫助，幫忙點個關注，謝謝，後續會陸續更新文章。