今天小編給大家分享一下es6如何實(shí)現(xiàn)對(duì)象拷貝的相關(guān)知識(shí)點(diǎn)，內(nèi)容詳細(xì)，邏輯清晰，相信大部分人都還太了解這方面的知識(shí)，所以分享這篇文章給大家參考一下，希望大家閱讀完這篇文章后有所收獲，下面我們一起來了解一下吧。

創(chuàng)新互聯(lián)建站專注于豐林企業(yè)網(wǎng)站建設(shè),響應(yīng)式網(wǎng)站設(shè)計(jì),商城網(wǎng)站開發(fā)。豐林網(wǎng)站建設(shè)公司,為豐林等地區(qū)提供建站服務(wù)。全流程按需求定制設(shè)計(jì)，專業(yè)設(shè)計(jì)，全程項(xiàng)目跟蹤，創(chuàng)新互聯(lián)建站專業(yè)和態(tài)度為您提供的服務(wù)

實(shí)現(xiàn)方法：1、用“Object.assign()”實(shí)現(xiàn)淺拷貝，它值拷貝了對(duì)象的第一層屬性。2、用擴(kuò)展運(yùn)算符實(shí)現(xiàn)淺拷貝，語法“{ ...obj };”。3、用“JSON.stringify()”實(shí)現(xiàn)深拷貝，原理是把一個(gè)對(duì)象序列化成為一個(gè)JSON字符串，將對(duì)象的內(nèi)容轉(zhuǎn)換成字符串的形式再保存在磁盤上，再用JSON.parse()反序列化將JSON字符串變成一個(gè)新的對(duì)象。

在理解對(duì)象的深拷貝和淺拷貝之前我們首先要知道JavaScript的數(shù)據(jù)類型，JavaScript包含兩大數(shù)據(jù)類型，基本數(shù)據(jù)類型和引用數(shù)據(jù)類型。

基本數(shù)據(jù)類型

基本數(shù)據(jù)類型是值存儲(chǔ)在棧中的一些簡單的數(shù)據(jù)。比如:

    let a = '123';
    let b = 2;

在JavaScript中的基本數(shù)據(jù)類型有String、Number、Boolean、Undefined、Null、Symbol(ES6新增的)?；緮?shù)據(jù)類型都是按值訪問的。比如把變量a賦值給變量b，修改變量a的值不會(huì)影響變量b的值，它們兩個(gè)是互相獨(dú)立的，互不影響。在存儲(chǔ)棧中這個(gè)兩個(gè)變量分別分配了空間。

    let a = '123';
    let b = a;
    a = 10;
    console.log(a) // 10
    console.log(b) // 123

引用數(shù)據(jù)類型

引用類型值是引用類型的實(shí)例，它是保存在堆內(nèi)存中的一個(gè)對(duì)象，引用類型是一種數(shù)據(jù)結(jié)構(gòu)，最常用的是Object,Array,Function類型，另外還有Date,RegExp,Error等，ES6同樣也提供了Set,Map2種新的數(shù)據(jù)結(jié)構(gòu)。

    let obj1 = {
        a: '1'
    }
    let obj2 = obj1;
    obj1.a = '2';

    console.log(obj1.a); // 2
    console.log(obj2.a) // 2

看看上面的代碼，發(fā)現(xiàn)和基本數(shù)據(jù)類型的結(jié)果不太一樣，我們把obj1賦值給了obj2，修改obj1的值，obj2的值也發(fā)生了改變。由于引用數(shù)據(jù)類型的值是存儲(chǔ)的堆內(nèi)存中，而在棧內(nèi)存中存儲(chǔ)了指向堆內(nèi)存中的指針（地址），我們上面代碼中的賦值操作只是賦值了指針（地址）。而指針指向的堆內(nèi)存還是同一個(gè)。

淺拷貝

淺拷貝是按位拷貝對(duì)象，它會(huì)創(chuàng)建一個(gè)新對(duì)象，這個(gè)對(duì)象有著原始對(duì)象屬性值的一份精確拷貝。如果屬性是基本類型，拷貝的就是基本類型的值；如果屬性是內(nèi)存地址（引用類型），拷貝的就是內(nèi)存地址 ，因此如果其中一個(gè)對(duì)象改變了這個(gè)地址，就會(huì)影響到另一個(gè)對(duì)象。

JavaScript中常見的一些淺拷貝方法

Object.assign()

    let target = {}; // 目標(biāo)對(duì)象
    let source = {
        a: 1
    } // 原對(duì)象

    Object.assign(target, source);
    console.log(target.a); // 1
    source.a = 2;
    console.log(source.a); // 2
    console.log(target.a); // 1

Object.assign()是一個(gè)淺拷貝，它值拷貝了對(duì)象的第一層屬性。如果對(duì)象的屬性仍然是一個(gè)對(duì)象，就無法實(shí)現(xiàn)拷貝了。

除了Object.assign()能實(shí)現(xiàn)對(duì)象的淺拷貝之外，擴(kuò)展運(yùn)算符var cloneObj = { ...obj }; Array.prototype.slice()、也都是淺拷貝。

手動(dòng)實(shí)現(xiàn)一個(gè)淺拷貝

    function shalldowCopy(source) {
        let obj = Array.isArray(origin) ? [] : {}; // 目標(biāo)對(duì)象
        for(let prop in source) {
            if (src.hasOwnProperty(prop)) {
                target[prop] = source[prop];
            }
        }
        return target;
    }

測試一下

var sourceObj = { a:1, arr: [2,3] };
var targetObject = shallowCopy(sourceObj);

shallowObj.arr[1] = 5;
obj.arr[1]; // = 5

深拷貝

深拷貝就是指將一個(gè)對(duì)象完整的復(fù)制一份新的出來，在堆內(nèi)存中開辟一份新的存儲(chǔ)空間。如果對(duì)象的屬性是對(duì)象，也依舊會(huì)拷貝。

JavaScript中常見的一些深拷貝方法

JSON.stringify()

JSON.stringify()是目前前端開發(fā)過程中最常用的深拷貝方式，原理是把一個(gè)對(duì)象序列化成為一個(gè)JSON字符串，將對(duì)象的內(nèi)容轉(zhuǎn)換成字符串的形式再保存在磁盤上，再用JSON.parse()反序列化將JSON字符串變成一個(gè)新的對(duì)象

    let target = {}; // 目標(biāo)對(duì)象
    let source = {
        a: 1,
        b: {
            d: 3
        }
    } // 原對(duì)象
    let targetStr = JSON.stringify(source);
    let target = JSON.parse(targetStr);
    console.log(target); // {a: 1, b: {d: 3}}
    source.b.d = 10;
    console.log(source); // {a: 1, b: {d: 10}}
    console.log(target); // {a: 1, b: {d: 3}}

手動(dòng)實(shí)現(xiàn)一個(gè)深拷貝

/**
 *  深拷貝
 * @param {*} origin 
 */
function deepCopy(origin) {
    let obj = Array.isArray(origin) ? [] : {};
    if (origin && typeof origin === 'object') {
        for(let key in origin) {
            let item = origin[key];
            if (item && typeof item === 'object') {
                obj[key] = deepCopy(item); 
            } else {
                obj[key] = item;
            }
        }
    }
    return obj;
}

測試一下

var sourceObj = { a:1, arr: [2,3] };
var targetObject = deepCopy(sourceObj); 
shallowObj.arr[1] = 5;
obj.arr[1]; // = 3

以上就是“es6如何實(shí)現(xiàn)對(duì)象拷貝”這篇文章的所有內(nèi)容，感謝各位的閱讀！相信大家閱讀完這篇文章都有很大的收獲，小編每天都會(huì)為大家更新不同的知識(shí)，如果還想學(xué)習(xí)更多的知識(shí)，請(qǐng)關(guān)注創(chuàng)新互聯(lián)行業(yè)資訊頻道。