数据处理之深浅拷贝完全剖析

大家好 !!!    又到了讨论代码的欢乐时光

深浅拷贝作为面试必考的一个知识点，我们要把它按在地上摩擦

首先 ， 我们要了解一个前提，

 

原始值 如 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忍者卡卡西 啊 ............ 而且两者之间不互相影响

 

你学会了吗