JS每日一題：深拷貝與淺拷貝的區別？如何實現一個深拷貝

MiracleWong 發布于2019-08-26 13:37 / 2202人閱讀

摘要：期深拷貝與淺拷貝的區別如何實現一個深拷貝在回答這個問題前，我們先來回顧一下中兩大數據類型基本類型引用類型基本類型基本類型就是值類型存放在棧內存中的簡單數據段，數據大小確定，內存空間大小可以分配引用類型引用類型存放在堆內存中的對象，變量實際保

20190311期

深拷貝與淺拷貝的區別？如何實現一個深拷貝

在回答這個問題前，我們先來回顧一下ＪＳ中兩大數據類型

基本類型 Undefined、Null、Boolean、Number、String

引用類型 Object Array

基本類型

基本類型就是值類型, 存放在棧(stack)內存中的簡單數據段，數據大小確定，內存空間大小可以分配

引用類型

引用類型, 存放在堆(heap)內存中的對象，變量實際保存的是一個指針，這個指針指向另一個位置

根據上面的分析，我們分別是兩處類型做一個copy處理

let obj = {
    name: "每日一題",
    value: "JS"
}

let obj2 = obj
let obj3 = obj.name

console.log(obj2.value) //JS
console.log(obj3) // 每日一題

// 改變obj2,obj3
obj2.value = "CSS"
obj3 = "HTML"

console.log(obj.value) // CSS
console.log(obj.name) // 每日一題

從上面的輸出結束來看，我們可以猜測obj,obj2操作的是同一個對象,而obj和obj3是完全獨立的, 說到這里就進入了深淺拷貝

淺拷貝

概念: 對于字符串類型，淺拷貝是對值的復制，對于對象來說，淺拷貝是對對象地址的復制, 也就是拷貝的結果是兩個對象指向同一個地址

基本概念回過頭去看上面的代碼我們就能分析出來其都是淺復制

深拷貝

概念: 深拷貝開辟一個新的棧，兩個對象對應兩個不同的地址，修改一個對象的屬性，不會改變另一個對象的屬性

如何實現深拷貝

JSON.stringify()

首先安利一個無腦黑科技騷操作
＊缺點: JSON.stringify()無法正確處理函數

let obj = {
    name: "每日一題",
    value: "JS"
}
console.log(JSON.parse(JSON.stringify(obj))) // 深拷貝了一份obj

let obj = {
    name: "每日一題",
    value: "JS",
    fn: function(){}
}
console.log(JSON.parse(JSON.stringify(obj))) // obj.fn 丟失

遞歸

講到深copy很多人都會想到extend方法,沒錯，這玩意deep為true確實能深copy，我們就過來翻一翻他的源碼

這邊以大家熟悉的jquery為例

// 源碼地址 https://github.com/jquery/jquery/blob/5bdc85b82b84e5459462ddad9002f22d1ce74f21/src/core.js#L125

// 只取核心邏輯代碼,感興趣的可以自行去源碼地址查看具體實現
// 有英文注釋，我就不蹩腳翻譯了
// 整體思路就是遞歸對象，判斷類型，處理類型
    for ( ; i < length; i++ ) {

        // Only deal with non-null/undefined values
        if ( ( options = arguments[ i ] ) != null ) {

            // Extend the base object
            for ( name in options ) {
                copy = options[ name ];

                // Prevent never-ending loop
                if ( target === copy ) {
                    continue;
                }

                // Recurse if we"re merging plain objects or arrays
                if ( deep && copy && ( jQuery.isPlainObject( copy ) ||
                    ( copyIsArray = Array.isArray( copy ) ) ) ) {
                    src = target[ name ];

                    // Ensure proper type for the source value
                    if ( copyIsArray && !Array.isArray( src ) ) {
                        clone = [];
                    } else if ( !copyIsArray && !jQuery.isPlainObject( src ) ) {
                        clone = {};
                    } else {
                        clone = src;
                    }
                    copyIsArray = false;

                    // Never move original objects, clone them
                    target[ name ] = jQuery.extend( deep, clone, copy );

                // Don"t bring in undefined values
                } else if ( copy !== undefined ) {
                    target[ name ] = copy;
                }
            }
        }
    }

總結

淺拷貝是復制,兩個對象指向同一個地址

深拷貝是新開棧,兩個對象指向不同的地址

關于JS每日一題

JS每日一題可以看成是一個語音答題社區
每天利用碎片時間采用60秒內的語音形式來完成當天的考題
群主在次日0點推送當天的參考答案

注絕不僅限于完成當天任務，更多是查漏補缺，學習群內其它同學優秀的答題思路

點擊加入答題

GPU云服務器云服務器深拷貝和淺拷貝深拷貝 javascript深拷貝 java實現文件拷貝

文章版權歸作者所有，未經允許請勿轉載,若此文章存在違規行為，您可以聯系管理員刪除。

轉載請注明本文地址：http://specialneedsforspecialkids.com/yun/109181.html

JS 中的深拷貝與淺拷貝

摘要：什么是深拷貝淺拷貝見名知義，無論是深拷貝還是淺拷貝，都是的問題。使用如下以上就是關于中的深拷貝與淺拷貝的知識和如何進行深拷貝的知識了，如果有錯或者有其他方式的話，歡迎在下面留言評論啦前言最近在寫項目的時候涉及到一些父子組件傳遞個對象或者數組通信啥的，或者是直接復制添加對象啥的，直接使用賦值的時候總會出錯。一查原來是淺拷貝的問題，就從網上找了點資料，匯總到這里來了。 1 什么是深拷貝...

ztyzz 2019-08-23 13:41 評論0 收藏0
JS中的深拷貝與淺拷貝

摘要：深拷貝和淺拷貝最根本的區別在于是否是真正獲取了一個對象的復制實體，而不是引用，深拷貝在計算機中開辟了一塊內存地址用于存放復制的對象，而淺拷貝僅僅是指向被復制的內存地址，如果原地址中對象被改變了，那么淺拷貝出來的對象也會相應改變。深拷貝和淺拷貝最根本的區別在于是否是真正獲取了一個對象的復制實體，而不是引用，深拷貝在計算機中開辟了一塊內存地址用于存放復制的對象，而淺拷貝僅僅是指向被...

wuyumin 2019-08-22 16:11 評論0 收藏0
JS中深拷貝與淺拷貝

摘要：地址傳遞引用類型則是地址傳遞，將存放在棧內存中的地址賦值給接收的變量。即對象的淺拷貝會對主對象進行拷貝，但不會復制主對象里面的對象。相關知識點 1.javascript變量包含兩種不同數據類型的值：基本類型和引用類型。基本類型值指的是簡單的數據段，包括es6里面新增的一共是有6種，具體如下：number、string、boolean、null、undefined、symbol。引...

ranwu 2019-08-23 15:41 評論0 收藏0
談談深拷貝與淺拷貝

摘要：前言關于深拷貝和淺拷貝其實是兩個比較基礎的概念，但是我還是想整理一下，因為里面有很多小細節還是很有意思的。那深拷貝就是兩者指向不同的內存地址，是真正意義上的拷貝。談談是我們經常用到的方法，其實這個方法就是淺拷貝。前言關于深拷貝和淺拷貝其實是兩個比較基礎的概念，但是我還是想整理一下，因為里面有很多小細節還是很有意思的。深拷貝和淺拷貝的區別深拷貝和淺拷貝是大家經常聽到的兩個名詞，兩...

Awbeci 2019-08-23 12:26 評論0 收藏0
低門檻徹底理解JavaScript中的深拷貝和淺拷貝

摘要：案例中的賦值就是典型的淺拷貝，并且深拷貝與淺拷貝的概念只存在于引用類型。修改修改經測試，也只能實現一維對象的深拷貝。經過驗證，我們發現提供的自有方法并不能徹底解決的深拷貝問題。在說深拷貝與淺拷貝前，我們先看兩個簡單的案例： //案例1 var num1 = 1, num2 = num1; console.log(num1) //1 console.log(num2) //1 num...

wind3110991 2019-08-22 16:02 評論0 收藏0