本文主要講一下 js 的基本數(shù)據(jù)類型以及一些堆和棧的知識和什么是深拷貝、什么是淺拷貝、深拷貝與淺拷貝的區(qū)別，以及怎么進(jìn)行深拷貝和怎么進(jìn)行淺拷貝。

本文思維導(dǎo)圖如下：本文思維導(dǎo)圖

堆和棧的區(qū)別

其實深拷貝和淺拷貝的主要區(qū)別就是其在內(nèi)存中的存儲類型不同。

堆和棧都是內(nèi)存中劃分出來用來存儲的區(qū)域。

棧(stack)為自動分配的內(nèi)存空間，它由系統(tǒng)自動釋放；而堆(heap)則是動態(tài)分配的內(nèi)存，大小不定也不會自動釋放。

ECMAScript 的數(shù)據(jù)類型

在將深拷貝和淺拷貝之前，我們先來重新回顧一下 ECMAScript 中的數(shù)據(jù)類型。主要分為

基本數(shù)據(jù)類型(undefined，boolean，number，string，null)

基本數(shù)據(jù)類型主要是：undefined，boolean，number，string，null。

基本數(shù)據(jù)類型存放在棧中

存放在棧內(nèi)存中的簡單數(shù)據(jù)段，數(shù)據(jù)大小確定，內(nèi)存空間大小可以分配，是直接按值存放的，所以可以直接訪問。

基本數(shù)據(jù)類型值不可變

javascript中的原始值(undefined、null、布爾值、數(shù)字和字符串)與對象(包括數(shù)組和函數(shù))有著根本區(qū)別。原始值是不可更改的：任何方法都無法更改(或“突變”)一個原始值。對數(shù)字和布爾值來說顯然如此 —— 改變數(shù)字的值本身就說不通，而對字符串來說就不那么明顯了，因為字符串看起來像由字符組成的數(shù)組，我們期望可以通過指定索引來假改字符串中的字符。實際上，javascript 是禁止這樣做的。字符串中所有的方法看上去返回了一個修改后的字符串，實際上返回的是一個新的字符串值。

基本數(shù)據(jù)類型的值是不可變的，動態(tài)修改了基本數(shù)據(jù)類型的值，它的原始值也是不會改變的，例如：

var str = "abc";

console.log(str[1]="f"); // f

console.log(str); // abc復(fù)制代碼

這一點其實開始我是比較迷惑的，總是感覺 js 是一個靈活的語言，任何值應(yīng)該都是可變的，真是圖樣圖森破，我們通常情況下都是對一個變量重新賦值，而不是改變基本數(shù)據(jù)類型的值。就如上述引用所說的那樣，在 js 中沒有方法是可以改變布爾值和數(shù)字的。倒是有很多操作字符串的方法，但是這些方法都是返回一個新的字符串，并沒有改變其原有的數(shù)據(jù)。

所以，記住這一點：基本數(shù)據(jù)類型值不可變。

基本類型的比較是值的比較

基本類型的比較是值的比較，只要它們的值相等就認(rèn)為他們是相等的，例如：

var a = 1;

var b = 1;

console.log(a === b);//true復(fù)制代碼

比較的時候最好使用嚴(yán)格等，因為 == 是會進(jìn)行類型轉(zhuǎn)換的，比如：

var a = 1;

var b = true;

console.log(a == b);//true復(fù)制代碼

引用類型

引用類型存放在堆中

引用類型(object)是存放在堆內(nèi)存中的，變量實際上是一個存放在棧內(nèi)存的指針，這個指針指向堆內(nèi)存中的地址。每個空間大小不一樣，要根據(jù)情況開進(jìn)行特定的分配，例如。

var person1 = {name:'jozo'};

var person2 = {name:'xiaom'};

var person3 = {name:'xiaoq'};復(fù)制代碼

堆內(nèi)存

引用類型值可變

引用類型是可以直接改變其值的，例如：

var a = [1,2,3];

a[1] = 5;

console.log(a[1]); // 5復(fù)制代碼

引用類型的比較是引用的比較

所以每次我們對 js 中的引用類型進(jìn)行操作的時候，都是操作其對象的引用(保存在棧內(nèi)存中的指針)，所以比較兩個引用類型，是看其的引用是否指向同一個對象。例如：

var a = [1,2,3];

var b = [1,2,3];

console.log(a === b); // false復(fù)制代碼

雖然變量 a 和變量 b 都是表示一個內(nèi)容為 1，2，3 的數(shù)組，但是其在內(nèi)存中的位置不一樣，也就是說變量 a 和變量 b 指向的不是同一個對象，所以他們是不相等的。

引用類型在內(nèi)存中的存儲

(懶癌晚期，不想自己畫圖了，直接盜圖)

傳值與傳址

了解了基本數(shù)據(jù)類型與引用類型的區(qū)別之后，我們就應(yīng)該能明白傳值與傳址的區(qū)別了。

在我們進(jìn)行賦值操作的時候，基本數(shù)據(jù)類型的賦值(=)是在內(nèi)存中新開辟一段棧內(nèi)存，然后再把再將值賦值到新的棧中。例如：

var a = 10;

var b = a;

a ++ ;

console.log(a); // 11

console.log(b); // 10復(fù)制代碼

基本數(shù)據(jù)類型的賦值

所以說，基本類型的賦值的兩個變量是兩個獨立相互不影響的變量。

但是引用類型的賦值是傳址。只是改變指針的指向，例如，也就是說引用類型的賦值是對象保存在棧中的地址的賦值，這樣的話兩個變量就指向同一個對象，因此兩者之間操作互相有影響。例如：

var a = {}; // a保存了一個空對象的實例

var b = a; // a和b都指向了這個空對象

a.name = 'jozo';

console.log(a.name); // 'jozo'

console.log(b.name); // 'jozo'

b.age = 22;

console.log(b.age);// 22

console.log(a.age);// 22

console.log(a == b);// true復(fù)制代碼

引用類型的賦值

淺拷貝

在深入了解之前，我認(rèn)為上面的賦值就是淺拷貝，哇哈哈，真的是圖樣圖森破。上面那個應(yīng)該只能算是“引用”，并不算是真正的淺拷貝。

一下部分參照知乎中的提問： javascript中的深拷貝和淺拷貝

賦值(=)和淺拷貝的區(qū)別

那么賦值和淺拷貝有什么區(qū)別呢，我們看下面這個例子：

var obj1 = {

'name' : 'zhangsan',

'age' : '18',

'language' : [1,[2,3],[4,5]],

};

var obj2 = obj1;

var obj3 = shallowCopy(obj1);

function shallowCopy(src){

var dst = {};

for (var prop in src) {

if (src.hasOwnProperty(prop)) {

dst[prop] = src[prop];

}

}

return dst;

}

obj2.name = "lisi";

obj3.age = "20";

obj2.language[1] = ["二","三"];

obj3.language[2] = ["四","五"];

console.log(obj1);

//obj1 = {

// 'name' : 'lisi',

// 'age' : '18',

// 'language' : [1,["二","三"],["四","五"]],

//};

console.log(obj2);

//obj2 = {

// 'name' : 'lisi',

// 'age' : '18',

// 'language' : [1,["二","三"],["四","五"]],

//};

console.log(obj3);

//obj3 = {

// 'name' : 'zhangsan',

// 'age' : '20',

// 'language' : [1,["二","三"],["四","五"]],

//};復(fù)制代碼

先定義個一個原始的對象 obj1，然后使用賦值得到第二個對象 obj2，然后通過淺拷貝，將 obj1 里面的屬性都賦值到 obj3 中。也就是說：

obj1：原始數(shù)據(jù)

obj2：賦值操作得到

obj3：淺拷貝得到

然后我們改變 obj2 的 name 屬性和 obj3 的 name 屬性，可以看到，改變賦值得到的對象 obj2 同時也會改變原始值 obj1，而改變淺拷貝得到的的 obj3 則不會改變原始對象 obj1。這就可以說明賦值得到的對象 obj2 只是將指針改變，其引用的仍然是同一個對象，而淺拷貝得到的的 obj3 則是重新創(chuàng)建了新對象。

然而，我們接下來來看一下改變引用類型會是什么情況呢，我又改變了賦值得到的對象 obj2 和淺拷貝得到的 obj3 中的 language 屬性的第二個值和第三個值(language 是一個數(shù)組，也就是引用類型)。結(jié)果見輸出，可以看出來，無論是修改賦值得到的對象 obj2 和淺拷貝得到的 obj3 都會改變原始數(shù)據(jù)。

這是因為淺拷貝只復(fù)制一層對象的屬性，并不包括對象里面的為引用類型的數(shù)據(jù)。所以就會出現(xiàn)改變淺拷貝得到的 obj3 中的引用類型時，會使原始數(shù)據(jù)得到改變。

深拷貝：將 B 對象拷貝到 A 對象中，包括 B 里面的子對象，

淺拷貝：將 B 對象拷貝到 A 對象中，但不包括 B 里面的子對象

--

和原數(shù)據(jù)是否指向同一對象

第一層數(shù)據(jù)為基本數(shù)據(jù)類型

原數(shù)據(jù)中包含子對象

賦值

是

改變會使原數(shù)據(jù)一同改變

改變會使原數(shù)據(jù)一同改變

淺拷貝

否

改變不會使原數(shù)據(jù)一同改變

改變會使原數(shù)據(jù)一同改變

深拷貝

否

改變不會使原數(shù)據(jù)一同改變

改變不會使原數(shù)據(jù)一同改變

深拷貝

看了這么半天，你也應(yīng)該清楚什么是深拷貝了吧，如果還不清楚，我就剖腹自盡(?_?)

深拷貝是對對象以及對象的所有子對象進(jìn)行拷貝。

那么問題來了，怎么進(jìn)行深拷貝呢？

思路就是遞歸調(diào)用剛剛的淺拷貝，把所有屬于對象的屬性類型都遍歷賦給另一個對象即可。我們直接來看一下 Zepto 中深拷貝的代碼：

// 內(nèi)部方法：用戶合并一個或多個對象到第一個對象

// 參數(shù)：

// target 目標(biāo)對象 對象都合并到target里

// source 合并對象

// deep 是否執(zhí)行深度合并

function extend(target, source, deep){

for (key in source)

if (deep && (isPlainObject(source[key]) || isArray(source[key]))) {

// source[key] 是對象，而 target[key] 不是對象， 則 target[key] = {} 初始化一下，否則遞歸會出錯的

if (isPlainObject(source[key]) && !isPlainObject(target[key]))

target[key] = {}

// source[key] 是數(shù)組，而 target[key] 不是數(shù)組，則 target[key] = [] 初始化一下，否則遞歸會出錯的

if (isArray(source[key]) && !isArray(target[key]))

target[key] = []

// 執(zhí)行遞歸

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){

var deep, args = slice.call(arguments, 1);

//第一個參數(shù)為boolean值時，表示是否深度合并

if (typeof target == 'boolean') {

deep = target;

//target取第二個參數(shù)

target = args.shift()

}

// 遍歷后面的參數(shù)，都合并到target上

args.forEach(function(arg){ extend(target, arg, deep) })

return target

}復(fù)制代碼

在 Zepto 中的 $.extend 方法判斷的第一個參數(shù)傳入的是一個布爾值，判斷是否進(jìn)行深拷貝。

在 $.extend 方法內(nèi)部，只有一個形參 target，這個設(shè)計你真的很巧妙。

因為形參只有一個，所以 target 就是傳入的第一個參數(shù)的值，并在函數(shù)內(nèi)部設(shè)置一個變量 args 來接收去除第一個參數(shù)的其余參數(shù)，如果該值是一個布爾類型的值的話，說明要啟用深拷貝，就將 deep 設(shè)置為 true，并將 target 賦值為 args 的第一個值(也就是真正的 target)。如果該值不是一個布爾類型的話，那么傳入的第一個值仍為 target 不需要進(jìn)行處理，只需要遍歷使用 extend 方法就可以。

這里有點繞，但是真的設(shè)計的很精妙，建議自己打斷點試一下，會有意外收獲(玩轉(zhuǎn) js 的大神請忽略)。

而在 extend 的內(nèi)部，是拷貝的過程。

參考文章：

總結(jié)

以上是生活随笔為你收集整理的js 浅拷贝直接赋值_js 深拷贝 vs 浅拷贝的全部內(nèi)容，希望文章能夠幫你解決所遇到的問題。

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