前言
1. 引入
深度拷贝,大部分情况出在处理对象的情况中。
例如
因为直接赋值,是指针传递,这样的话,使得两个对象变量是相绑定的,修改其中一个,另外一个也跟着修改,大部分情况,我们只需要obj对象的值,而不需要传递obj对象给obj2,使得obj2是独立的。
2. 概念
在js中,数组和对象的复制如果使用=号来进行复制,那只是浅拷贝。如下图演示:
1. 数组的深拷贝
1.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
}
1.2. slice 方法实现数组的深拷贝
测试如下:
更多slice
内容请访问w3school JavaScript slice方法
1.3. concat 方法实现数组的深拷贝
更多concat
内容请访问w3school JavaScript concat
1.4. ES6扩展运算符实现数组的深拷贝
测试如下:
var arr = [1,2,3,4,5]
var [ ...arr2 ] = arr
arr[2] = 5
console.log(arr)
console.log(arr2)
运行结果如下:
2. 对象的深拷贝
2.1. for循环实现对象的深拷贝
var obj = {
name: 'FungLeo',
sex: 'man',
old: '18'
}
var obj2 = copyObj(obj)
function copyObj(obj) {
let res = {}
for (var key in obj) {
res[key] = obj[key]
}
return res
}
2.2. 转换成json再转换成对象实现对象的深拷贝
var obj = {
id: '1',
name: 'dai',
age: '18'
}
var obj2 = JSON.parse(JSON.stringify(obj))
运行结果如下:
2.3. ES6扩展运算符实现对象的深拷贝
var obj = {
id: '1',
name: 'dai',
age: '18'
}
var { ...obj2 } = obj
运行结果如下:
3. 结言
更多的数组以及对象的操作方法,可以参考lodash的源码,查看它的源码可以让你的js基础变得非常牢固。
使用es6提供的扩展运算符的方法实现深拷贝,简单,高效。并且,对象的深拷贝不会像使用 JSON 方法深拷贝一样,丢失函数等信息,只能用来深拷贝 JSON 数据格式的对象。推荐大家使用。