摘要：深拷貝和淺拷貝問題的本質(zhì)還是不同數(shù)據(jù)類型的存儲(chǔ)方式差異，尤其是引用數(shù)據(jù)類型的特殊。

深拷貝和淺拷貝問題的本質(zhì)還是不同數(shù)據(jù)類型的存儲(chǔ)方式差異，尤其是引用數(shù)據(jù)類型的特殊。

現(xiàn)分別對賦值、淺拷貝、深拷貝做深入研究：

原理：直接將對象指針直接賦值給另一個(gè)變量

代碼：

let developer = {
    title: "Frontend",
    basic: {
        html: "5",
        css: "3",
        js: "es6"
    },
    frameworks: ["React", "Vue", "AngularJS"],
    summary: function(){
        console.log("I am FE developer");
    }
};

let newDeveloper = developer;

console.log(newDeveloper);

//基本類型：改變原對象
newDeveloper.title = "Frontend Leader";
console.log(developer.title); // Frontend Leader

//對象：改變原對象
newDeveloper.basic.http = "2.0";
console.log(developer.basic.http); // 2.0
newDeveloper.basic.js = "es5";
console.log(developer.basic.js); // es5

//數(shù)組：改變原對象
newDeveloper.frameworks.push("Angular");
console.log(developer.frameworks); // [ "React", "Vue", "AngularJS", "Angular" ]

//函數(shù)：改變原對象
newDeveloper.summary = function () {
    console.log("I like FE development");
};
developer.summary(); // I like FE development

原理：遍歷對象的每個(gè)屬性進(jìn)行逐個(gè)拷貝

實(shí)現(xiàn)方式：

方式1:遍歷并復(fù)制

方式2:Object.assign()

代碼：

let developer = {
    title: "Frontend",
    basic: {
        html: "5",
        css: "3",
        js: "es6"
    },
    frameworks: ["React", "Vue", "AngularJS"],
    summary: function(){
        console.log("I am FE developer");
    }
};

/*
* 方式1：逐個(gè)復(fù)制
*
* */
function cloneInShallow(source) {
    let target = {};

    for (prop in source){
        target[prop] = source[prop];
    }

    return target
}
let newDeveloper = cloneInShallow(developer);

/*
* 方式2：Object.assign()
*
* */
// let newDeveloper = Object.assign({}, developer);

console.log(newDeveloper);

//基本類型：不改變原對象
newDeveloper.title = "Frontend Leader";
console.log(developer.title); // Frontend

// 對象：改變原對象
newDeveloper.basic.http = "2.0";
console.log(developer.basic.http); // 2.0
newDeveloper.basic.js = "es5";
console.log(developer.basic.js); // es5

//數(shù)組：改變原對象
newDeveloper.frameworks.push("Angular");
console.log(developer.frameworks); // [ "React", "Vue", "AngularJS", "Angular" ]

//函數(shù)：不改變原對象
newDeveloper.summary = function () {
    console.log("I like FE development");
};
developer.summary(); // I am FE developer

原理：使用遞歸，遍歷每一個(gè)對象屬性進(jìn)行拷貝

實(shí)現(xiàn)方式：

方式1: 純手工打造回調(diào)函數(shù)

方式2: JSON.parse(JSON.stringify(obj))

方式3: 借助jQuery

方式4: 借助lodash

代碼：

let developer = {
    title: "Frontend",
    basic: {
        html: "5",
        css: "3",
        js: "es6"
    },
    frameworks: ["React", "Vue", "AngularJS", {node: "express"}],
    summary: function(){
        console.log("I am FE developer");
    }
};

/*
* 方式1: 純手工打造
* */
function cloneInDeep(source) {
    if(source && typeof source === "object"){
        let target = {};
        for (let prop in source){
            let value = source[prop];

            if(Array.isArray(value)){
                let newArray = [];
                value.forEach(function (item, index) {
                    if(Array.isArray(item) || Object.getPrototypeOf(item) === Object.prototype){
                        newArray.push(cloneInDeep(item))
                    }else{
                        newArray.push(item)
                    }
                });

                target[prop] = newArray;
            }else if(Object.getPrototypeOf(value) === Object.prototype){
                target[prop] = cloneInDeep(value);
            }else{
                target[prop] = value;
            }
        }

        return target
    }else{
        throw new Error("source is not object!")
    }
}
let newDeveloper = cloneInDeep(developer);


/*
* 方式2: JSON.parse(JSON.stringify(obj))
* 弊端：會(huì)拋棄對象的constructor
* 適用：能夠被json直接表示的數(shù)據(jù)結(jié)構(gòu)，對象中只包含number、string、boolean、array、扁平對象
* 不適用：含有function、regexp
* */
// let newDeveloper = JSON.parse(JSON.stringify(developer));


/*
* 方式3: jQuery
* */
let $ = require("jquery");
// let newDeveloper = $.extend({}, developer);

/*
* 方式4: lodash
* */
let _ = require("lodash");
// let newDeveloper = _.cloneDeep(developer);


console.log(newDeveloper);

//基本類型：不改變原對象
newDeveloper.title = "Frontend Leader";
console.log(developer.title); // Frontend

// 對象：不改變原對象
newDeveloper.basic.http = "2.0";
console.log(developer.basic.http); // undefined
newDeveloper.basic.js = "es5";
console.log(developer.basic.js); // es6

//數(shù)組：不改變原對象
newDeveloper.frameworks.push("Angular");
console.log(developer.frameworks); // [ "React", "Vue", "AngularJS" , { node: "express" } ]
newDeveloper.frameworks[3].node = "koa";
console.log(developer.frameworks); // [ "React", "Vue", "AngularJS" , { node: "express" } ]

//函數(shù)：不改變原對象
newDeveloper.summary = function () {
    console.log("I like FE development");
};
developer.summary(); // I am FE developer

數(shù)據(jù)類型及存儲(chǔ)機(jī)制

for...in...遍歷，枚舉屬性

遞歸

對象和數(shù)組的判斷