前端造輪子(二) JS中的深複製與淺複製

2021-09-24 12:22:30 字數 2929 閱讀 2114

在讀到這篇文章前,對淺複製的理解存在誤區-。- js 深拷貝 vs 淺拷貝

var obj1 =

var obj2 = obj1;

varshallowcopy

=function

(obj)

for(

var prop in obj)

}return copy

}var obj3 =

shallowcopy

(obj1)

;// 現在改變obj1的name屬性

obj1.name =

'八哥'

;console.

log(obj2.name)

//八哥

console.

log(obj3.name)

//richard

//現在改變obj1的arr屬性

obj1.arr =

['一'

,'二'

,'三'

]console.

log(obj2.arr)

;//['一','二','三']

console.

log(obj3.arr)

;//['1','2','3']

//現在改變obj1的arr2[1],arr2[2]屬性

obj1.arr2[1]

=['二',

'三']

obj1.arr2[2]

=['四',

'五']

console.

log(obj3.arr2)

//['1',['二','三'],['四','五']]

型別和原物件是否指向同一物件

第一層資料為基本型別

原資料報含子物件賦值是

改變會使原資料一同改變

改變會使原資料一同改變

淺拷貝否

改變會使原資料一同改變

改變會使原資料一同改變

深拷貝否

改變會使原資料一同改變

改變會使原資料一同改變

以下是zepto的淺複製原始碼

// 內部方法:使用者合併乙個或多個物件到第乙個物件

// 引數:

// target 目標物件 物件都合併到target裡

// source 合併物件

// deep 是否執行深度合併

function

extend

(target, source, deep)

初始化一下,否則遞迴會出錯的if(

isplainobject

(source[key])&&

!isplainobject

(target[key]))

target[key]

=// source[key] 是陣列,而 target[key] 不是陣列,則 target[key] = 初始化一下,否則遞迴會出錯的if(

isarray

(source[key])&&

!isarray

(target[key]))

target[key]=[

]// 執行遞迴

extend

(target[key]

, source[key]

, deep)

}// 不滿足以上條件,說明 source[key] 是一般的值型別,直接賦值給 target 就是了

else

if(source[key]

!== undefined) target[key]

= source[key]

}// copy all but undefined properties from one or more

// objects to the `target` object.

$.extend

=function

(target)

// 遍歷後面的引數,都合併到target上

args.

foreach

(function

(arg)

)return target

}

/**

* 陣列的深拷貝實現

* @param src

* @param target

**/function

clonearr

(src,target)

elseif(

typeof item ===

'object'))

);}else

}return target;

}/**

* 物件的深拷貝實現

*@param src

*@param target

*@return

**/function

deepcopy

(src,target)

elseif(

typeof value ===

'object'))

;}else

}return target;

}var a =

}var b =

deepcopy

(a,b)

//以下為測試

a.arr[1]

=[9,

10];console.

log(b.arr[1]

)//[2,3]

a.obj.x =

100;

console.

log(b.obj.x)

//1

js的淺拷貝,深複製

淺拷貝,拷貝的是乙個陣列 var arr one two three var arrto arr arrto 1 test document.writeln 陣列的原始值 arr export 陣列的原始值 one,test,three document.writeln 陣列的新值 arrto ex...

js中的深複製與淺複製

二者的區別 深複製只複製物件的值,在複製後指向不同的位址,但兩個物件的值相同 淺複製複製的是物件的位址,在複製後指向同乙個位址,兩個物件的位址與值都相同 淺複製 let a let b a console.log a console.log b 如果改變b的name屬性,會發現a的name屬性也會改...

js中的深複製與淺複製

前言 所謂深複製與淺複製 深拷貝與淺拷貝 乍一聽感覺聽高大上,像是乙個非常難理解的概念,其實我們平常專案開發都是在用的,只是你可能不知道該怎麼叫它的名字而已,就像你聽熟了一首歌,就是不知道這首歌叫什麼名字一樣。在j ascript中有兩種資料型別,一種是基本型別,另一種是引用型別,今天說討論的深複製...