數據處理之深淺拷貝徹底剖析

你們好 !!!    又到了討論代碼的歡樂時光

深淺拷貝做爲面試必考的一個知識點，咱們要把它按在地上摩擦

首先 ， 咱們要了解一個前提，

 

原始值 如 number , string,  boolean , null, undefined是存在棧內存中

引用值如  object   是存在堆內存中，

 

爲何 原始值存在棧內存中呢 ？  由於原始類型佔據的空間是固定的，

把它們存在較小的內存區域 -- 棧 中， 方便迅速查詢變量的值。

 

因爲引用值的一些增刪操做會改變引用值的大小， 因此不能把引用值放在棧

內存中，不然會下降變量的查詢速度，可是引用值的地址大小是不變的，因此

引用值的地址是存在棧內存中，

 

因此直接把一個引用值賦值給一個變量， 賦的是引用值的地址

const a = {
    0 : 'eat',
    1 : 'run'
};
const b = a;

b[0] = 'change';
console.log(a[0]); // change

把a的賦給b,      a,b指向同一個地址，   因此改變b[0]的值， a[0]的值也發生了變化。

那咱們要把a 的 值賦 給 b  同時  不讓a, b產生關係應該怎麼作呢？

最容易想到的方法， 遍歷a,    把a的屬性一個一個賦給b

const a = {
    0 : 'eat',
    1 : 'run'
};
const b = {

};
for (let i in a) {
    b[i] = a[i]
}
console.log(b);   // {0: "eat", 1: "run"}
b[0] = 'change';
console.log(a[0]);  // eat

這就是所謂的淺拷貝，又叫作首層深拷貝，

 由於若是 a 的屬性 值 裏 有 引用值的話 ，直接賦值的話仍是賦的地址  ，a 和 b 仍是有關聯 ， 拷貝的不夠完全， 因此叫淺拷貝，

咱們先把上面的遍歷方法抽成一個myClone方法

const a = {
    0 : 'eat',
    1 : 'run'
};
function myClone(target) {
    if (typeof  target !== 'object') {return}    // 只拷貝對象和數組
    const result = target instanceof Array ? [] : {};  // 新建一個對象或者數組
    for (let key in target) { // 遍歷賦值
        result[key] = target[key];
    }
    return result
}
const b = myClone(a);
console.log(b);   // {0: "eat", 1: "run"}
b[0] = 'change';
console.log(a[0]);  // eat

這是教科書式的淺拷貝  ，  數組有特有的淺拷貝方法   ：

　　

const a = [1, 2, 3, 4, 5];

const b = a.concat();

const c = [].concat(a);

const d = a.slice();

console.log(b);  // (5) [1, 2, 3, 4, 5]

console.log(c);  // (5) [1, 2, 3, 4, 5]

console.log(d); // (5) [1, 2, 3, 4, 5]

 對象也有簡單的淺拷貝方法

const me = {
    'look': 'handsome',
};

const you = Object.assign({},me);

console.log(you);  // {look: "handsome"}

you.look = 'ugly';

console.log(me); //  {look: "handsome"}

注意， Object.assign第一個參數必定要傳一個空對象， 這樣你的醜就和我無關，我依然帥氣，不然：

const me = {
    'look': 'handsome',
};

const you = Object.assign(me);

console.log(you);  // {look: "handsome"}

you.look = 'ugly';

console.log(me); //  {look: "ugly"}

你的醜陋把我也帶偏了！！！！！！

 

那如何實現有多層嵌套引用值的深拷貝呢？

1    我工做中用的最多的就是。。。。

const me = {
    'look': 'handsome',
    'face' : {
        'eyes' : 'big',
        'mouse': 'small'
    }
};

const you = JSON.parse(JSON.stringify(me));

console.log(you);  // {look: "handsome", face: {eyes: "none", mouse: "small"}}

you.face.eyes = 'none';

console.log(me); //  {look: "handsome", face: {eyes: "big", mouse: "small"}}

這樣雖然你的眼睛沒了，個人依舊是卡姿蘭大眼睛。

這種方法雖然方便，但也有侷限性 ： 1 屬性值爲function 或者  undefined 時會被忽略    2  正則表達式會被序列化成一個空對象

const me = {
    'look': 'handsome',
    'face' : {
        'eyes' : 'big',
        'mouse': 'small'
    },
    'eat' : function () {
        console.log('當心吃胖')
    },
    'reg' : /\d+[\w]/g,
    'xxx' : undefined
};

const you = JSON.parse(JSON.stringify(me));

console.log(you);

console.log(me);

輸出結果： 

you 中沒有了eat 方法 和  xxx 屬性 且 reg 變成了 {} ，  解決辦法， 利用 JSON.stringify的第二個參數 把它們轉成字符串再序列化

const me = {
    'look': 'handsome',
    'face' : {
        'eyes' : 'big',
        'mouse': 'small'
    },
    'eat' : function () {
        console.log('當心吃胖')
    },
    'reg' : /\d+[\w]/g,
    'xxx' : undefined
};
function replace (key, value) {
    if (typeof value === 'function') {
        return value.toString()
    }
    if (typeof  value === 'undefined') {
        return 'undefined'
    }
    return value
}
const you = JSON.parse(JSON.stringify(me, replace));

console.log(you);

console.log(me);

輸出結果：

這樣 undefined 和 function  也能  拷貝了，  正則表達式你們也能夠寫一個方法來判斷是不是正則表達式，是就也轉成字符串

 

2   利用第三方庫中的深拷貝方法， 好比 ：在jQuery中能夠經過添加一個參數來實現遞歸extend，調用$.extend(true, {}, ...)就能夠實現一個深拷貝。

 

3   教科書式的 遞歸  深拷貝  ：

const me = {
    'look': 'handsome',
    'face' : {
        'eyes' : 'big',
        'mouse': {
            'tooth': 'white'
        }
    },
    'eat' : function () {
        console.log('當心吃胖')
    },
    'reg' : /\d+[\w]/g,
    'xxx' : undefined
};
function  isObj(target) {
    if (Object.prototype.toString.call(target) === '[object Array]' || Object.prototype.toString.call(target) === '[object Object]'){
        return true
    } else {
        return false
    }
}
function deepClone (target) {
    // 只拷貝數組和對象, 原始值直接返回
    if (!isObj(target)) {
        return target
    }
    // 存數據的變量
    const result = Array.isArray(target) ? [] : {};
    for (const key in target) {
        // 判斷是不是自身的屬性，而不是繼承自原型鏈的屬性
        if (target.hasOwnProperty(key)) {
            result[key] = isObj(target[key]) ? deepClone(target[key]) : target[key];
        }
    }
    return result

}
const you = deepClone(me);
console.log(you);

console.log(me);

結果 ：

全部屬性完美拷貝過來了有沒有？ 簡直就是copy忍者卡卡西 啊 ............ 並且二者之間不互相影響

 

你學會了嗎🐒🐒🐒🐒🐒🐒