js浅拷贝及深拷贝的几种方法

一、浅拷贝

(1) Object.assign()

Object.assign我们经常会用到合并对象，当然利用Object.assign性质我们也可以实现对象的拷贝。

var obj1 = {a: 1, b: 2}
 
var obj2 = Object.assign({}, obj1)
 
obj2.a = 4
 
console.log(obj1, obj2)

结果如图：

这里要注意的是Object.assign第一个参数必须是个空对象

(2) 解构赋值

var obj1 = {a: 1, b: 2}
 
var obj2 = {...obj1}
 
obj2.a = 4
 
console.log(obj1, obj2)

结果如图：

这里一样可以实现之前上面的结果。

但这两种拷贝有一个问题就是只能赋值一层，假设我们有如下数据结构

var obj1 = [{
    name: '臧三',
    childs: ['小明', '小芳']
}]
 
var obj2 = [...obj1]
 
obj2[0].childs = []
 
console.log(obj1, obj2)

我们会发现打印出的结果如下：

上图可看出obj1,obj2 的结果均变了，这并不是我们想要的结果，所以我们要用到深拷贝。

二、深拷贝

(1) 利用json.stringify

var obj1 = [{
    name: '臧三',
    childs: ['小明', '小芳']
}]
 
var obj2 = JSON.parse(JSON.stringify(obj1))
 
obj2[0].childs = []
 
console.log(obj1, obj2)

结果如下:

这样的话就能达到我们想要的结果。

这种方法简单，但也有弊端，看看下面的数据结构：

var obj1 = [{
    name: '臧三',
    childs: ['小明', '小芳'],
    fn: function() {},
    age: undefined
}]
 
var obj2 = JSON.parse(JSON.stringify(obj1))
 
obj2[0].childs = []
 
console.log(obj1, obj2)

结果：

我们从结果中发现，值为undefined,或者function的时候并不会拷贝过来。

(2) 利用递归来实现一个方法进行拷贝

var obj1 = [{
    name: '臧三',
    childs: ['小明', '小芳'],
    fn: function() {},
    age: undefined
}]
 
var obj2 = extend(obj1)
 
obj2[0].childs = []
 
console.log(obj1, obj2)
 
function extend(data) {
    if (typeof data === 'object' && data) {
        let val = typeof data.length === 'number' ? [] : {}
        for(let i in data) {
            val[i] = extend(data[i])
        }
        return val
    } else {
        return data
    }
}

结果：