实现JS深浅拷贝的五种方式

一、堆栈、基本数据类型、引用数据类型

在了解深浅拷贝之前，我们需得对堆栈、基本数据类型、引用数据类型有基本的了解

基本数据类型：number、string、boolean、null、undefined

引用数据类型：object、function、array

栈内存是保存大小固定的数据，即保存基本数据类型。堆保存的大小不固定，可保存引用数据

二、深浅拷贝理解

浅拷贝：拷贝基本数据类型时，不受任何影响，当拷贝引用类型时，源对象也会被修改。

深拷贝：深拷贝就是完完全全拷贝一份新的对象，它会在内存的堆区域重新开辟空间，修改拷贝对象就不会影响到源对象

即深浅拷贝是针对于引用数据类型

比如下面我们常见的浅拷贝代码，源对象被修改往往不是我们需要的

let a = {
   name : '张三',
    age : '18'
}
let b = a;
b.name = '李四';
console.log(a);
console.log(b);

结果可见源数据发生了改变

三、实现深拷贝的三种方式

1、es6的展开语法

let a = {
   name : '张三',
    age : '18'
}
let b = {...a};
b.name = '李四';
console.log('a：',a);
console.log('b：',b);

代码运行：源数据不会发生改变

2、JSON.parse(JSON.stringify(待拷贝对象))

但此拷贝的缺点,即没法拷贝内部函数

let a = {
    name : '张三',
    age : '18',
    like(){
        console.log('喜欢唱歌、滑冰');
    }
}
let b =JSON.parse( JSON.stringify(a) );
b.name = '李四';
console.log('a：',a);
console.log('b：',b);

结果：在b对象中未出现like函数

3、JS中拷贝Array的slice和concat方法【针对数组】

let origin = [1, 2, 3, 4];
let new_data = origin.slice()
new_data.push(5)
console.log('origin：',origin);
console.log('new_data：',new_data);

代码运行结果：

contact操作类似，在这里就不做过多的演示了。主要讲一下slice和concat方法的弊端，即只能深拷贝第一层，对于多层拷贝无效

let origin = [[1,1], 2, 3, 4];
let new_data = origin.slice()
 new_data[0].push(5)
 console.log('origin：',origin);
 console.log('new_data：',new_data);

4、jQuery 中的 $.extend (添加true就是深拷贝,不添加就是浅拷贝)

let origin = [[1,1], 2, 3, 4];
let new_data = []

$.extend(true,new_data,origin)

new_data[0].push(5)

console.log('origin：',origin);
console.log('new_data：',new_data);

5、手写递归的方式来实现深拷贝

const origin = {
   name : '张三',
    age : '18',
    like(){
        console.log('喜欢唱歌、滑冰');
    },
    a : [[1,1], 2, 3, 4]
}


function extend(origin, deep){
    // deep true  启动深拷贝
    // false  浅拷贝
    let obj = {}
    // 数组对象
    if(origin instanceof Array){
        // true 数组  obj 就得是数组
        obj = []
    }
    for(let key in origin){
        let value = origin[key]
        // 确定value是不是引用型，前提是deep 是true
        obj[key] = (!!deep && typeof value === "object" && value !== null) ? extend(value, deep) : value
    }
    return obj
}


const new_data = extend(origin, true)

new_data.a[0].push(6666)
console.log(origin)
console.log(new_data)

运行代码：