JavaScript深淺拷貝的介紹

本篇內容介紹了“JavaScript深淺拷貝的介紹”的有關知識，在實際案例的操作過程中，不少人都會遇到這樣的困境，接下來就讓小編帶領大家學習一下如何處理這些情況吧！希望大家仔細閱讀，能夠學有所成！

了解拷貝背后的過程，避免不必要的錯誤，Js專題系列之深淺拷貝，我們一起加油～

目錄

• 一、拷貝示例

• 二、淺拷貝

• 三、深拷貝的方法？

• 四、自己實現深淺拷貝

免費學習推薦：javascript視頻教程

一、拷貝示例

當我們在操作數據之前，可能會遇到這樣的情況：

1. 會經常改動一組數據，但可能會用到原始數據

2. 我需要兩組一樣的數據，但我不希望改動一個另一個隨之改動

3. 我需要對數據操作前后進行對比

4. …

當我們遇到類似需要場景時，首先想到的就是拷貝它，殊不知拷貝也大有學問哦～

下面簡單的例子，你是否覺得熟悉？

1.1 基本類型拷貝示例

var str = 'How are you';var newStr = str;newStr = 10console.log(str); // How are youconsole.log(newStr); // 10

大家都能想到，字符串是基本類型，它的值保存在棧中，在對它進行拷貝時，其實是為新變量開辟了新的空間。 str和newStr就好比兩個一模一樣的房間，布局一致卻毫無關聯。

1.2 引用類型拷貝示例

var data = [1, 2, 3, 4, 5];var newData = data;newData[0] = 100;console.log(data[0]); // 100console.log(newData[0]); // 100

類似的代碼段，但這次我們使用數組這個引用類型舉例，你會發現修改賦值后的數據，原始數據也跟著改變了，這顯然不滿足我們的需要。本篇文章就來聊一聊引用數據拷貝的學問。

如果大家對Js的數據類型存在著疑問，不妨看看《JavaScript中的基本數據類型》

二、淺拷貝

拷貝的劃分都是針對引用類型來討論的，淺拷貝——顧名思義，淺拷貝就是“淺層拷貝”，實際上只做了表面功夫：

var arr = [1, 2, 3, 4];var newArr = arr;console.log(arr, newArr); // [1,2,3,4] [1,2,3,4]newArr[0] = 100;console.log(arr, newArr) // [100,2,3,4] [100,2,3,4]

不發生事情（操作）還好，一旦對新數組進行了操作，兩個變量中所保存的數據都會發生改變。

發生這類情況的原因也是因為引用類型的基本特性：

• 存儲在變量處的值是一個指針（point），指向存儲對象的內存地址。賦值給新變量相當于配了一把新鑰匙，房間并沒有換。

數組中的slice和concat都會返回一個新數組，我們一起來試一下：

var arr = [1,2,3,4];var res = arr.slice();// 或者res = arr.concat()res[0] = 100;console.log(arr); // [1,2,3,4]

這個問題這么快就解決了？雖然對這一層數據進行了這樣的的處理后，確實解決了問題，但！

var arr = [ { age: 23 }, [1,2,3,4] ];var newArr = arr.concat();arr[0].age = 18;arr[1][0] = 100;console.log(arr) // [ {age: 18}, [100,2,3,4] ]console.log(newArr) // [ {age: 18}, [100,2,3,4] ]

果然事情沒有那么簡單，這也是因為數據類型的不同。

S 不允許我們直接操作內存中的地址，也就是說不能操作對象的內存空間，所以，我們對對象的操作都只是在操作它的引用而已。

既然淺拷貝達不到我們的要求，本著效率的原則，我們找找有沒有幫助我們實現深拷貝的方法。

三、深拷貝的方法？

數據的方法失敗了，還有沒有其他辦法？我們需要實現真正意義上的拷貝出獨立的數據。

3.1 JSON

這里我們利用JSON的兩個方法，JSON.stringify()，JSON.parse()來實現最簡潔的深拷貝

var arr = ['str', 1, true, [1, 2], {age: 23}]var newArr = JSON.parse( JSON.stringify(arr) );newArr[3][0] = 100;console.log(arr); // ['str', 1, true, [1, 2], {age: 23}]console.log(newArr); // ['str', 1, true, [100, 2], {age: 23}]

這個方法應該是實現深拷貝最簡潔的方法，但是，它仍然存在問題，我們先來看看剛才都做了些什么：

1. 定義一個包含都過類型的數組arr

2. JSON.stringify(arr), 將一個 JavaScript 對象或值轉換為 JSON 字符串

3. JSON.parse(xxx), 方法用來解析JSON字符串，構造由字符串描述的值或對象

理解：

我們可以理解為，將原始數據轉換為新字符串，再通過新字符串還原為一個新對象，這中改變數據類型的方式，間接的繞過了拷貝對象引用的過程，也就談不上影響原始數據。

限制：

這種方式成立的根本就是保證數據在“中轉”時的完整性，而JSON.stringify()將值轉換為相應的JSON格式時也有缺陷：

• undefined、任意的函數以及 symbol 值，在序列化過程中會被忽略（出現在非數組對象的屬性值中時）或者被轉換成 null（出現在數組中時）。

• 函數、undefined 被單獨轉換時，會返回 undefined，

• 如JSON.stringify(function(){})

• JSON.stringify(undefined)

• 對包含循環引用的對象（對象之間相互引用，形成無限循環）執行此方法，會拋出錯誤。

• NaN 和 Infinity 格式的數值及 null 都會被當做 null。

• 其他類型的對象，包括 Map/Set/WeakMap/WeakSet，僅會序列化可枚舉的屬性。

所以當我們拷貝函數、undefined等stringify轉換有問題的數據時，就會出錯，我們在實際開發中也要結合實際情況使用。

舉一反三：

既然是通過改變數據類型來繞過拷貝引用這一過程，那么單純的數組深拷貝是不是可以通過現有的幾個API來實現呢？

var arr = [1,2,3];var newArr = arr.toString().split(',').map(item => Number(item))newArr[0] = 100;console.log(arr); // [1,2,3]console.log(newArr); // [100,2,3]

注意，此時僅能對包含純數字的數組進行深拷貝，因為：

1. toString無法正確的處理對象和函數

2. Number無法處理 false、undefined等數據類型

但我愿稱它為純數字數組深拷貝！

3.2 Object.assign()

有的人會認為Object.assign()，可以做到深拷貝，我們來看一下

var obj = {a: 1, b: { c: 2 } }var newObj = Object.assign({}, obj)newObj.a = 100;newObj.b.c = 200;console.log(obj); // {a: 1, b: { c: 200 } }console.log(newObj) // {a: 100, b: { c: 200 } }

神奇，第一層屬性沒有改變，但第二層卻同步改變了，這是為什么呢？

因為 Object.assign()拷貝的是（可枚舉）屬性值。

假如源值是一個對象的引用，它僅僅會復制其引用值。MDN傳送門

四、自己實現深淺拷貝

既然現有的方法無法實現深拷貝，不妨我們自己來實現一個吧～

4.1 淺拷貝

我們只需要將所有屬性即其嵌套屬性原封不動的復制給新變量一份即可，拋開現有的方法，我們應該怎么做呢？

var shallowCopy = function(obj) {
    if (typeof obj !== 'object') return;

    // 根據obj的類型判斷是新建一個數組還是對象
    var newObj = obj instanceof Array ? [] : {};
    // 遍歷obj，并且判斷是obj的屬性才拷貝
    for (var key in obj) {
        if (obj.hasOwnProperty(key)) {
            newObj[key] = obj[key];
        }
    }
    return newObj;}

我們只需要將所有屬性的引用拷貝一份即可～

4.2 深拷貝

相信大家在實現深拷貝的時候都會想到遞歸，同樣是判斷屬性值，但如果當前類型為object則證明需要繼續遞歸，直到最后

var deepCopy = function(obj) {
    if (typeof obj !== 'object') return;
    var newObj = obj instanceof Array ? [] : {};
    for (var key in obj) {
        if (obj.hasOwnProperty(key)) {
            newObj[key] = typeof obj[key] === 'object' ? deepCopy(obj[key]) : obj[key];
        }
    }
    return newObj;}

我們用白話來解釋一下deepCopy都做了什么

const obj = [1, { a: 1, b: { name: '余光'} } ];const resObj = deepCopy(obj);

• 讀取 obj，創建 第一個newObj

• 判斷類型為 []

• key為 0 (for in 以任意順序遍歷，我們假定按正常循序遍歷)

• 判斷不是引用類型，直接復制

• key為 1

• 判斷是引用類型

• 進入遞歸，重新走了一遍剛才的流程，只不過讀取的是obj[1]

另外請注意遞歸的方式雖然可以深拷貝，但是在性能上肯定不如淺拷貝，大家還是需要結合實際情況來選擇。

寫在最后

前端專項進階系列的第五篇文章，希望它能對大家有所幫助，如果大家有什么建議，可以在評論區留言，能幫到自己和大家就是我最大的動力！

“JavaScript深淺拷貝的介紹”的內容就介紹到這里了，感謝大家的閱讀。如果想了解更多行業相關的知識可以關注億速云網站，小編將為大家輸出更多高質量的實用文章！