寫前端的時(shí)候經(jīng)常會(huì)遇到對(duì)象的拷貝，一般我們會(huì)用到深拷貝，深拷貝就是完完整整的將一個(gè)對(duì)象從內(nèi)存中拷貝一份出來,放到另一塊新開辟的內(nèi)存中去。向下面這種賦值是淺拷貝，a、b都是對(duì)同一塊內(nèi)存進(jìn)行引用，a、b哪一個(gè)變量修改對(duì)象的屬性值都會(huì)相互影響?？偨Y(jié)一下常用的對(duì)象深拷貝以及數(shù)組對(duì)象的深拷貝。

var a = {id:"",name:""} var b = a;

1. 序列化轉(zhuǎn)成json字符串深拷貝，以及存在的問題

2. Object.assign()深拷貝，以及存在的問題

3. 循環(huán)遞歸深拷貝

一、序列化轉(zhuǎn)成json字符串深拷貝

例：

let source = {"id":1}; //序列化轉(zhuǎn)成json字符串 let jsonStr = JSON.stringify(source) //反序列化為對(duì)象 let target = JSON.parse(jsonStr);

存在的問題：
此方法僅在原對(duì)象包含可序列化值類型且沒有任何循環(huán)引用時(shí)才有效。不可序列化值類型的一個(gè)例子是 Date 對(duì)象 - JSON.parse 只能將其解析為字符串而無法解析回其原始的 Date 對(duì)象

注：
同時(shí)總結(jié)java的序列化
序列化：就是把一個(gè)java對(duì)象轉(zhuǎn)成字節(jié)流
反序列化：就是把字節(jié)流轉(zhuǎn)成java對(duì)象
當(dāng)然序列化不僅僅可以是轉(zhuǎn)成字節(jié)流或者json字符串，還有很多種方式
為什么在java對(duì)象要序列化，什么場(chǎng)景要序列化？
如果沒有序列化，怎么把一個(gè)在內(nèi)存里面的對(duì)象保存到文件里面去，怎么把內(nèi)存的對(duì)象通過網(wǎng)絡(luò)傳輸?shù)搅硪慌_(tái)計(jì)算機(jī)的內(nèi)存去呢？序列化就是把內(nèi)存的對(duì)象轉(zhuǎn)成字節(jié)流或者json字符串等方式進(jìn)行傳輸用的，用在一些保存對(duì)象到文件、網(wǎng)絡(luò)傳輸對(duì)象等io流傳輸對(duì)象的場(chǎng)景。

二、Object.assign()深拷貝

Object.assign() 方法用于將所有可枚舉屬性的值從一個(gè)或多個(gè)源對(duì)象復(fù)制到目標(biāo)對(duì)象。它將返回目標(biāo)對(duì)象。
基本語法：Object.assign(target, …sources)
例：

var source = {"id":1,name:"lin"}; var target = Object.assign({},source);

這樣就可以把source對(duì)象里面的相同屬性值拷貝到target對(duì)象

存在的問題：
如果要拷貝的對(duì)象source里面的屬性不是基礎(chǔ)類型也是對(duì)象，或者屬性含有對(duì)象數(shù)組，這種方式的拷貝就不會(huì)把source對(duì)象里面的對(duì)象或者數(shù)組對(duì)象進(jìn)行深拷貝
例：

var source = {"id":1,list:[{"name":"小明"},{"name":"小花"}]}; var target = Object.assign({},source);

這時(shí)target里面的屬性list數(shù)組對(duì)象只是淺拷貝source里面的list，還是對(duì)同一塊內(nèi)存的引用
也可以向下面這樣優(yōu)化,循環(huán)list數(shù)組里面的對(duì)象進(jìn)行Object.assign拷貝，添加到一個(gè)新的數(shù)組去，然后再賦值給target.list
例：

let source = {"id":1,list:[{"name":"小明"},{"name":"小花"}]}; let target = Object.assign({},source); //對(duì)象數(shù)組的深拷貝 let newlist = []; for(let i=0;i<target.list.length;i++){let obj = Object.assign({}, target.list[i]);newlist.push(obj); } target.list = newlist;

注：如果對(duì)象里面還含有對(duì)象屬性，而里面的對(duì)象屬性又含有對(duì)象屬性，則這種方式很麻煩不合適。

三、循環(huán)遞歸深拷貝

function deepClone(obj, newObj) {var newObj = newObj || {};for (let key in obj) {if (typeof obj[key] == 'object') {let isArray = Array.isArray(obj[key]);//判斷是否數(shù)組newObj[key] = (isArray == true ? [] : {})deepClone(obj[key], newObj[key]);} else {newObj[key] = obj[key]}}return newObj; }

參考：
網(wǎng)友haogemr的js 深度拷貝的幾種方法

總結(jié)

以上是生活随笔為你收集整理的js 对象深拷贝、对象数组深拷贝的几种方法总结的全部?jī)?nèi)容，希望文章能夠幫你解決所遇到的問題。

如果覺得生活随笔網(wǎng)站內(nèi)容還不錯(cuò)，歡迎將生活随笔推薦給好友。