成人国产在线小视频_日韩寡妇人妻调教在线播放_色成人www永久在线观看_2018国产精品久久_亚洲欧美高清在线30p_亚洲少妇综合一区_黄色在线播放国产_亚洲另类技巧小说校园_国产主播xx日韩_a级毛片在线免费

資訊專欄INFORMATION COLUMN

JS每日一題：深拷貝與淺拷貝的區(qū)別？如何實現(xiàn)一個深拷貝

MiracleWong / 2230人閱讀

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

20190311期

深拷貝與淺拷貝的區(qū)別？如何實現(xiàn)一個深拷貝

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

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

引用類型 Object Array

基本類型

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

引用類型

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

根據(jù)上面的分析，我們分別是兩處類型做一個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) // 每日一題

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

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

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

深拷貝 
概念: 深拷貝開辟一個新的棧，兩個對象對應(yīng)兩個不同的地址，修改一個對象的屬性，不會改變另一個對象的屬性
如何實現(xiàn)深拷貝
JSON.stringify()

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

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

// 只取核心邏輯代碼,感興趣的可以自行去源碼地址查看具體實現(xiàn)
// 有英文注釋，我就不蹩腳翻譯了
// 整體思路就是遞歸對象，判斷類型，處理類型
    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;
                }
            }
        }
    }
總結(jié)

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

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

關(guān)于JS每日一題

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

注 絕不僅限于完成當(dāng)天任務(wù)，更多是查漏補缺，學(xué)習(xí)群內(nèi)其它同學(xué)優(yōu)秀的答題思路

點擊加入答題

文章版權(quán)歸作者所有，未經(jīng)允許請勿轉(zhuǎn)載,若此文章存在違規(guī)行為，您可以聯(lián)系管理員刪除。

轉(zhuǎn)載請注明本文地址：http://systransis.cn/yun/109181.html

相關(guān)文章

  • JS 中的深拷貝與淺拷貝

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

    ztyzz 評論0 收藏0

  • JS中的深拷貝與淺拷貝

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

    wuyumin 評論0 收藏0

  • JS中深拷貝與淺拷貝

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

    ranwu 評論0 收藏0

  • 談?wù)?em>深拷貝與淺拷貝

    摘要：前言關(guān)于深拷貝和淺拷貝其實是兩個比較基礎(chǔ)的概念，但是我還是想整理一下，因為里面有很多小細節(jié)還是很有意思的。那深拷貝就是兩者指向不同的內(nèi)存地址，是真正意義上的拷貝。談?wù)勈俏覀兘?jīng)常用到的方法，其實這個方法就是淺拷貝。 前言 關(guān)于深拷貝和淺拷貝其實是兩個比較基礎(chǔ)的概念，但是我還是想整理一下，因為里面有很多小細節(jié)還是很有意思的。 深拷貝和淺拷貝的區(qū)別 深拷貝和淺拷貝是大家經(jīng)常聽到的兩個名詞，兩...

    Awbeci 評論0 收藏0

  • 低門檻徹底理解JavaScript中的深拷貝和淺拷貝

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

    wind3110991 評論0 收藏0

發(fā)表評論

0條評論

最新活動
閱讀需要支付1元查看
<