JS 物件的深拷貝與淺拷貝

2021-09-26 04:55:24 字數 1999 閱讀 9218

基本型別和引用型別

物件的深拷貝和淺拷貝

基本型別和引用型別

js中包含兩種資料型別,既基本型別和引用型別,基本型別是簡單的資料段,它是按值訪問的,因為基本型別可以操作儲存在變數中的值。而引用型別指的是那些可能由多個值構成的物件。引用型別的值是儲存在記憶體中的物件,在js中,規定不能直接訪問記憶體中的位置,既不能直接訪問記憶體中的變數。所以在訪問引用型別時實際上是按引用訪問的。

那麼在複製基本型別和引用型別時存在著怎樣的不同呢?當從乙個變數向另乙個變數複製基本型別值時,會在變數物件上建立乙個新值,然後把改值複製到新變數分配的位置上。基本型別值複製實際上是生成了乙個新的副本,它們參與的操作不會相互收到影響。

var num1 =10;

var num2 = num1;

console.

log(num2)

;// 10;

num2 =20;

console.

log(num2)

;// 20;

console.

log(num1)

;// 10;

//num2由num1複製而來,但是改變num2時,原來的num1並不會受到影響。

當從乙個變數向另乙個變數複製引用型別時,同樣會將儲存的物件複製乙份到新的變數中。不同的是,這個值得副本實際上是乙個指標,指標指向儲存中的物件。兩個變數引用的是同乙個物件。因此改變其中乙個變數的值,將影響另乙個變數的值。

var obj1 =

var obj2 = obj1;

obj2.name =

'newhyt'

;console.

log(obj1.name)

;// newhyt;

物件的深拷貝和淺拷貝

1、淺拷貝

當複製乙個陣列/物件時,只是複製了陣列/物件的引用,改變陣列/物件中的值,另乙個陣列/物件也會跟著改變,這往往不是我們想要的。

function

******clone

(obj)

;for

(let k in obj)

}var obj1 =}}

;var obj2 =

******clone

(obj1)

;console.

log(obj2)

;obj2.a.b.c =

'hyt'

;obj1.a.b.c =

'hyt'

;

2、深拷貝

目標是拷貝乙個物件時,更改乙個變數,另乙個變數不受影響。在這裡將介紹三種方式實現物件的深拷貝。

物件的深拷貝實現原理: 定義乙個新的物件,遍歷源物件的屬性並賦給新物件的屬性

遞迴—就是對每一層的資料都實現一次 建立物件->物件賦值 的操作,簡單粗暴上**:

function

deepclone

(source)

;// 判斷複製的目標是陣列還是物件

for(

let keys in source)

; targetobj[keys]

=deepclone

(source[keys]);

}else}}

return targetobj;

}

es6的擴充套件運算子

var obj =

var= obj

obj.old =

'22'

console.

log(obj)

///console.

log(obj2)

///

js 物件深拷貝 深拷貝與淺拷貝

前言 最近在複習一些面試的知識點,剛剛好複習到了這一部分,於是就寫下這篇文章記錄一下。一 值型別和引用型別 在學習深拷貝和淺拷貝之前,我們先來了解一下js的變數型別。值型別 vs 引用型別 值型別 值型別主要有 number,string,boolean,symbol,null,undefined ...

js物件淺拷貝與深拷貝

在js中,如果乙個物件,作為變數賦值給另乙個物件,那麼兩個物件得值會是相同得引用位址,其中乙個改變,另外乙個也會隨之改變。var obj1 var obj2 obj1 obj2.num 456 console.log obj1.num 輸出 456 複製 在我們日常開發過程當中,我們去複製乙個物件得...

js深拷貝與淺拷貝

1 基礎知識 基本型別與引用型別 js中可以把變數分成兩部分,基本型別和引用型別。基本型別包括 undefined null boolean number和string 引用型別值可能由多個值構成的物件。在對基礎型別資料進行拷貝時,實際相當於建立新的相同資料 hello 賦值給b var a hel...