javascript数组以及对象的深拷贝（复制数组或复制对象）详解

• 更多分享www.catbro.cn

前言：

• 凡是牵涉到面向对象的语言，避免不了就要处理深拷贝和浅拷贝的问题

• 在js中，数组和对象的复制如果使用=号来进行复制，那只是浅拷贝。

数组的深拷贝for循环是非常好用的。如果不知道高级方法，通过for循环能够完成我们大多数的需求。

1、 for 循环实现数组的深拷贝

• 代码如下

    var arr = [1,2,3,4,5]
    var arr2 = copyArr(arr)
    function copyArr(arr) {
    		let res = []
    		for (let i = 0; i < arr.length; i++) {
    		 res.push(arr[i])
    		}
    		return res
    }
  

• 如上，通过对数组的for循环，即可实现对数组的深拷贝了。

• for循环是非常好用的。如果不知道高级方法，通过for循环能够完成我们大多数的需求。

2、slice 方法实现数组的深拷贝

• 将原数组中抽离部分出来形成一个新数组

    var arr = [1,2,3,4,5]
    var arr2 = arr.slice(0)
    arr[2] = 5
    console.log(arr)
    console.log(arr2)
  

3、concat 方法实现数组的深拷贝

• 用于连接多个数组组成一个新的数组的方法。那么，我们只要连接它自己，即可完成数组的深拷贝。代码如下：

    var arr = [1,2,3,4,5]
    var arr2 = arr.concat()
    arr[2] = 5
    console.log(arr)
    console.log(arr2)
  

4、ES6扩展运算符实现数组的深拷贝

• 用下面的方法实现数组的深拷贝是最简单的。

    var arr = [1,2,3,4,5]
    var [ ...arr2 ] = arr
    arr[2] = 5
    console.log(arr)
    console.log(arr2)
  

对象的深拷贝

1、for循环实现对象的深拷贝

• 在很多时候，for循环能够解决大问题。

    var obj = {
    	name: 'hello',
    	sex: 'man',
    }
    var obj2 = copyObj(obj)
    function copyObj(obj) {
    	let res = {}
    	for (var key in obj) {
    		res[key] = obj[key]
    	}
    	return res
    }
  

2、转换成json再转换成对象实现对象的深拷贝

• 代码如下

    var obj = {
    	name: 'anjie',
    	sex: 'man',
    }
    var obj2 = JSON.parse(JSON.stringify(obj))
  

3、 扩展运算符实现对象的深拷贝

• 代码如下 var obj = { name: ‘anjie’, sex: ‘man’, } var { …obj2 } = obj console.log(obj) console.log(obj2)