詳細(xì)分析JavaScript中的深淺拷貝
在說JS中深淺拷貝之前,我們需要對JS中的數(shù)據(jù)類型有所了解,分為基本數(shù)據(jù)類型與引用數(shù)據(jù)類型,對于基本數(shù)據(jù)類型并沒有深淺拷貝的說法,深淺拷貝主要針對引用數(shù)據(jù)類型。
一、淺拷貝
淺拷貝只復(fù)制了引用,并沒有復(fù)制值。在JS中最簡單的淺拷貝就是利用“=”賦值操作符來實(shí)現(xiàn)。
var obj1 = { a:1, b:[2,3,4], c:{name:’tanj’}, fun:function(){ console.log(’fun’) }}var obj2 = obj1obj2.a = 666 /* 修改obj2的值,obj1的值也隨之改變 */console.log(obj1) /* {a: 666, b: Array(3), c: {…}, fun: ƒ} */
上述代碼中,我們修改obj2的值,obj1的值也隨之發(fā)生了改變,使用”=“只實(shí)現(xiàn)了淺拷貝。
二、深拷貝
深拷貝是對目標(biāo)的完全拷貝,進(jìn)行深拷貝后的兩個值互不影響。
1. 利用JSON.stringify與JSON.parse方法
JSON.stringify將一個JavaScript值轉(zhuǎn)換為JSON字符串;
JSON.parse將一個JSON字符串轉(zhuǎn)換為JavaScript值。
var obj1 = { a:1, b:[2,3,4], c:{name:’tanj’},}var obj2 = JSON.parse(JSON.stringify(obj1))obj2.a = 12console.log(obj1) /* {a: 1, b: Array(3), c: {…}} */
修改obj2的值并沒有影響到obj1中的屬性值,顯然,我們利用JSON.parse與JSON.stringify實(shí)現(xiàn)了深拷貝。
但是,真的可以這么簡單的實(shí)現(xiàn)嗎?我們來看看下面的例子!
var obj1 = { a:1, b:[2,3,4], c:{name:’tanj’}, fun:function(){ console.log(’fun’) }}var obj2 = JSON.parse(JSON.stringify(obj1))obj2.a = 12console.log(obj1) /* {a: 1, b: Array(3), c: {…}, fun: ƒ} */console.log(obj2) /* {a: 12, b: Array(3), c: {…}} */
轉(zhuǎn)換后的obj2中沒有了fun這個屬性,這是由于在利用JSON.stringify轉(zhuǎn)換過程中,忽略了undefined、function、symbol。顯然,當(dāng)我們的對象中出現(xiàn)這些類型的屬性時無法利用該方法實(shí)現(xiàn)深拷貝。
2. 遞歸
function deepClone(source){ if(!isObject(source)) return source var newObj = source instanceof Array? []:{} for(let key in source){if(source.hasOwnProperty(key)){ newObj[key] = isObject(source[key])?deepClone(source[key]):source[key] } } return newObj}function isObject(x) { return typeof x === ’object’ && x != null}
測試一下上述方法:
var obj1 = { a:1, b:[2,3,4], c:{name:’tanj’}, fun:function(){console.log(’fun’) }}var obj2 = deepClone(obj1)obj2.a = 12console.log(obj1) /* {a: 1, b: Array(3), c: {…}, fun: ƒ} */
通過例子可以看到,我們修改了obj2中a屬性的值,但是并沒有影響到obj1中的a屬性值。通過遞歸我們可以實(shí)現(xiàn)深拷貝!
注意:上述方法未解決循環(huán)引用的問題。
var obj1 = {}obj1.a = obj1var obj2 = deepClone(obj1) /* 報(bào)錯,棧溢出 */console.log(obj2)
關(guān)于如何解決循環(huán)引用問題以及實(shí)現(xiàn)Symbol類型拷貝,稍后完善。
三、其他拷貝方法
1. 數(shù)組中的concat()和slice()方法
我們知道數(shù)組中有兩個方法concat和slice可以完成復(fù)制數(shù)組,并且返回新數(shù)組。以concat為例。
var arr = [1,2,3]var arr2 = arr.concat()arr2[2]=4console.log(arr) /* [1, 2, 3] */console.log(arr2) /* [1, 2, 4] */
改變arr2的值,并沒有影響到arr的值,這是實(shí)現(xiàn)了數(shù)組的深拷貝嗎,先不急于下結(jié)論,一起看看下面的例子再來分析:
var arr = [1,2,3,[4,5,6],{a:7}]var arr2 = arr.concat()arr2[3] = 444arr2[4].a=8console.log(arr) /* [1,2,3,[4,5,6],{a:8}] */console.log(arr2) /* [1,2,3,444,{a:8}] */
我們直接修改arr2[3],并沒有引起arr的改變,但是我們修改arr2[4].a時,arr中的相應(yīng)元素跟著一起發(fā)生了改變。其實(shí),我們對arr2數(shù)組中的元素直接進(jìn)行改變(比如:arr2[0]=***,arr2[1]=***,arr2[3]=***)時,不會影響到原數(shù)組arr,但是我們修改數(shù)組中的[3,4,5]或{a:7}時,會造成原數(shù)組arr的改變。
結(jié)論:concat()方法對數(shù)組第一層進(jìn)行了深拷貝。
可以再試試數(shù)組的slice()方法,它也是只對數(shù)組第一層進(jìn)行了深拷貝。
2. Object.assign()和...展開運(yùn)算符
var obj1 = { a:1, b:[2,3,4], c:{name:’tanj’}}var obj2 = {...obj1}obj2.a = 666obj2.c.name = ’xinxin’console.log(obj1) /* {a:1,b:[2,3,4],c:{name:’xinxin’}} */
可以看到利用...展開運(yùn)算符實(shí)現(xiàn)的是對象第一層的深拷貝。后面的只是拷貝的引用值。
可以試試Object.assign()方法:
var obj1 = { a:1, b:[2,3,4], c:{name:’tanj’}}var obj2 = {}Object.assign(obj2,obj1)obj2.a = 666obj2.b[0] = 0console.log(obj1) /* {a:1,b:[0,3,4],c:{name:’tanj’} */
同樣,只對對象第一層進(jìn)行了深拷貝,假如源對象的屬性值(例如obj1)是一個指向?qū)ο蟮囊茫琽bj2也只拷貝那個引用值。所以改變obj2中b所指向的那個數(shù)組時,obj1的值也會發(fā)生改變。
我們可以自己實(shí)現(xiàn)一個這樣的效果,只對第一層進(jìn)行深拷貝:
function shallowClone(source) { const newObj = source.constructor === Array ? [] : {} for (let keys in source) { if (source.hasOwnProperty(keys)) { newObj[keys] = source[keys]} } return newObj}
以上就是分析JavaScript中的深淺拷貝的詳細(xì)內(nèi)容,更多關(guān)于JavaScript 深淺拷貝的資料請關(guān)注好吧啦網(wǎng)其它相關(guān)文章!
相關(guān)文章:
1. ASP.NET MVC實(shí)現(xiàn)登錄后跳轉(zhuǎn)到原界面2. jsp實(shí)現(xiàn)簡單用戶7天內(nèi)免登錄3. asp文件如何打開4. ASP和PHP文件操作速度的對比5. jsp實(shí)現(xiàn)局部刷新頁面、異步加載頁面的方法6. ASP基礎(chǔ)入門第二篇(ASP基礎(chǔ)知識)7. ASP.NET MVC使用JSAjaxFileUploader插件實(shí)現(xiàn)單文件上傳8. 怎樣打開XML文件?xml文件如何打開?9. JSP出現(xiàn)中文亂碼問題解決方法詳解10. Spring依賴注入的三種方式實(shí)例詳解
