js中的淺拷貝深拷貝深入理解

lastSeries 發布于2019-08-21 16:43 / 1522人閱讀

摘要：舉個例子來說明一下什么是淺拷貝什么是深拷貝淺拷貝得出的結果可以看出是淺拷貝非對象的屬性值一個改變不影響另一個的值對象屬性是引用賦值所以一個改變會影響另一個的改變出現這種情況的本質是對象是按引用賦值的深拷貝指的是拷貝一個對象，改變一個值不影響

舉個例子來說明一下什么是淺拷貝什么是深拷貝

淺拷貝

var x = {
    a: 1,
    b: {f: {
        g: 1
    }},
    c: [1, 2, 3]
};
var y = shallow(x);

得出的結果可以看出是淺拷貝

非對象的屬性值一個改變不影響另一個的值

對象屬性是引用賦值所以一個改變會影響另一個的改變

出現這種情況的本質是：對象是按引用賦值的

深拷貝

指的是拷貝一個對象，改變一個值不影響另一個的值

// 實現深復制功能
// 判斷：1.是否是對象 2.是否是函數
function deepCopy (obj, isDeep) {
    if (!_.isObject(obj)) {
        return obj
    } else {
        if (_.isFunction(obj)) {
            return new Function("return " + obj.toString())();
        } else {
            var name,
                target = _.isArray(obj) ? [] : {},
                value;
            for (name in obj) {
                value = obj[name];

                // 是淺拷貝還是深拷貝
                if (isDeep && (_.isArray(value) || _.isObject(value))) {
                    console.log("深拷貝");
                    target[name] = deepCopy(value, isDeep);
                } else {
                    console.log("淺拷貝");
                    target[name] = value
                }
            }
            return target;
        }
    }
}

var array3 = {
    a: 1,
    b: {f: {
        g: 1
    }},
    c: function () {
        console.log("is function");
    }
};
var array4 = deepCopy(array3, false);

一個技巧

使用JSON對象的parse()和stringify()方法

pares() JSON字符串轉成js對象

stringify() 將js對象轉成JSON字符串

//例1
var source = { name:"source", child:{ name:"child" } } 
var target = JSON.parse(JSON.stringify(source));
target.name = "target";  //改變target的name屬性
console.log(source.name); //source 
console.log(target.name); //target

//例2
var source = { name:function(){console.log(1);}, child:{ name:"child" } } 
var target = JSON.parse(JSON.stringify(source));
console.log(target.name); //undefined

這種方法有局限性：

對于正則表達式類型、函數類型等無法進行深拷貝(而且會直接丟失相應的值)

它會拋棄對象的constructor，不管這個對象原來的構造函數是什么，在深拷貝之后都會變成Object

參考

lodash一些功能函數的使用

github js中淺拷貝和深拷貝的實現

GPU云服務器云服務器深拷貝和淺拷貝深拷貝 javascript深拷貝 js拷貝內存數據庫

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

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

JavaScript中的淺拷貝和深拷貝

摘要：在中可以通過添加一個參數來實現遞歸，調用就可以實現一個深拷貝。利用序列化實現一個深拷貝在JavaScript中，對于Object和Array這類引用類型值，當從一個變量向另一個變量復制引用類型值時，這個值的副本其實是一個指針，兩個變量指向同一個堆對象，改變其中一個變量，另一個也會受到影響。這種拷貝分為兩種情況：拷貝引用和拷貝實例，也就是我們說的淺拷貝和深拷貝淺拷貝（shallow...

ernest.wang 2019-08-21 11:34 評論0 收藏0
js的淺拷貝和深拷貝

摘要：拷貝分為淺拷貝和深拷貝。淺拷貝是引用復制，深拷貝是完全單純拷貝數據的值。所以，這種方法只是簡單繞過第一層箱子的引用復制深拷貝目前比較好的方法就是大法，要么就是自己寫遞歸的深拷貝函數。附帶深拷貝的自定義函數源自大佬的經常遇到數組或對象等引用類型作為函數的參數的情況，但又不想修改原來的數據，這時候就需要拷貝（基本類型的變量不需要考慮）。拷貝分為淺拷貝和深拷貝。淺拷貝是引用復制，深拷貝是完...

jsliang 2019-08-23 10:26 評論0 收藏0
關于JavaScript的淺拷貝和深拷貝

摘要：引用類型值引用類型值是保存在堆內存中的對象，變量保存的只是指向該內存的地址，在復制引用類型值的時候，其實只復制了指向該內存的地址。前言要理解 JavaScript中淺拷貝和深拷貝的區別，首先要明白JavaScript的數據類型。JavaScript有兩種數據類型，基礎數據類型和引用數據類型。js的基本類型：undefined，null，string，boolean，number,s...

shenhualong 2019-08-26 12:23 評論0 收藏0
淺探js深拷貝和淺拷貝

摘要：接下來就讓我們更細致的探究中的深淺拷貝。總結以上對深拷貝和淺拷貝做了簡單的介紹，在深拷貝的實現上也只介紹了最簡單的實現形式，并未考慮復雜情況以及相應優化，想要對深拷貝有更深入的了解，需要大家花時間去深入研究，或者可以關注我后續文章的動態。對象和數組的拷貝對我來說一直都是一個比較模糊的概念，一直有點一知半解，但是在實際工作中又偶爾會涉及到，有時候還會一不小心掉坑里，不知道大家有沒有同樣...

habren 2019-08-23 13:01 評論0 收藏0
實現JS中的淺拷貝和深拷貝

摘要：淺拷貝和淺拷貝的問題，不僅在日常應用中需要注意，而且在面試和筆試中也常被用來考察應聘者，屬于文體兩開花的。基本數據類型引用數據類型等等基本數據類型是按值訪問的，對其的拷貝會直接復制其值保存在新變量中。方法手工遍歷法方法方法方法方法淺拷貝和淺拷貝的問題，不僅在日常應用中需要注意，而且在面試和筆試中也常被用來考察應聘者，屬于文體兩開花的points。什么是深拷貝和淺拷貝呢？名稱 ...

huangjinnan 2019-08-26 13:38 評論0 收藏0