js對象深拷貝
標簽:
JavaScript
1.使用slice或者concat进行数组深拷贝
对于值都是普通数据类型的数组,可以使用数组的slice或者concat函数来进行深拷贝。
let a = [1, 2, 3]let b = a.slice(0) //或者 let b = a.concat()b[0] = 0console.log(a[0] === 1) //true,改变b不影响a
若数组的项不是普通数据类型,而是引用数据类型,则使用slice或concat进行拷贝则只能进行一层深拷贝,也就是数组项内部不能进行深拷贝。如下,数组第一项为一个对象,改变b数组第一项中对象的key属性值,对应的a数组也被改变了。
let a = [{ key: 1}]let b = a.slice(0) //或者 let b = a.concat()b[0].key = 0console.log(a[0].key === 0) //true,改变b影响a
2.使用JSON序列化函数进行深拷贝
function deepColne(obj) { return JSON.parse(JSON.stringify(obj)) }
1.支持数组和常规对象深拷贝
let obj = [{ key: 1}]let newObj = colne(obj) newObj[0].key = 0console.log(obj[0].key) // 1
2.不支持undefined,会转成null
let a = [1, , 2]let b = colne(a)console.log(a[1]) // undefinedconsole.log(b[1]) // null
3.不支持函数、RegExp、Date对象,会报错
let func = function() { console.log(1) }let newFunc = colne(func) //这直接报错
3.使用递归进行对象深拷贝(递归为深度优先)
function deepColne(obj) { let newObj if(obj === null) { return null } else if (! (obj instanceof Object)) { return obj } else if (obj instanceof Date) { return new Date(obj) } else if (obj instanceof RegExp) { return new RegExp(obj) } else if (obj instanceof Function) { //经测试复制函数有问题 return eval(obj.toString()) } else if (obj instanceof Array) { newObj = [] for(item of obj) { newObj.push(clone(item)) } } else { newObj = Object.create(null) for(let key of Object.keys(obj)) { newObj[key] = clone(obj[key]) } } return newObj }
-缺陷:1)经测试函数拷贝有问题;2)不支持环的情况:对象的某个属性值是对象本身,若出现环会循环递归,造成内存溢出。
4.使用宽度优先 + 队列实现深拷贝,解决出现环的问题
-注意:不支持函数
function deepClone(obj) { if(obj === null) { return null } /*obj是Date类型 */ else if (obj instanceof Date) { return new Date(obj) } /*obj是正则表达式类型 */ else if (obj instanceof RegExp) { return new RegExp(obj) } /*obj是数组或者普通对象*/ let newObj = (obj instanceof Array) ? [] : {}, srcQueue = [obj], srcVisitedQueue = [], copyQueue = [newObj], copyVisitedQueue = []; while (srcQueue.length > 0) { let currentSrcElement = srcQueue.shift(), currentCopyElement = copyQueue.shift(); srcVisitedQueue.push(currentSrcElement); copyVisitedQueue.push(currentCopyElement); for (let key in currentSrcElement) { /*基础数据类型直接复制*/ if (typeof currentSrcElement[key] !== 'object') { currentCopyElement[key] = currentSrcElement[key]; } /*日期对象*/ else if (currentSrcElement[key] instanceof Date) { currentCopyElement[key] = new Date(currentSrcElement[key]) } /*正则*/ else if (currentSrcElement[key] instanceof RegExp) { currentCopyElement[key] = new RegExp(currentSrcElement[key]) } /*对象数据类型或者数组*/ else { // 有环的情况:判断该对象是否已被访问 let index = srcVisitedQueue.indexOf(currentSrcElement[key]); if (index >= 0) { currentCopyElement[key] = copyVisitedQueue[index]; //环(已访问)直接复制 } else { //非环对象或数组加入到源队列 srcQueue.push(currentSrcElement[key]); //copy对象对应位置暂时放置空对象或空数组,下一轮循环赋值 currentCopyElement[key] = currentSrcElement[key] instanceof Array ? [] : {}; copyQueue.push(currentCopyElement[key]); } } } } return newObj }
作者:WHU_GIS_LJ
链接:https://www.jianshu.com/p/74201ed5184d
點擊查看更多內容
為 TA 點贊
評論
評論
共同學習,寫下你的評論
評論加載中...
作者其他優(yōu)質文章
正在加載中
感謝您的支持,我會繼續(xù)努力的~
掃碼打賞,你說多少就多少
贊賞金額會直接到老師賬戶
支付方式
打開微信掃一掃,即可進行掃碼打賞哦