上篇博客中简单介绍了JS中的引用类型,本篇博客就简单介绍下JS的深浅拷贝,以后有时间再对深浅拷贝做个扩展。原始类型是保存在栈内存中的,对于它们的复制可以理解为“真实”复制,即重新开辟栈内存并将原来的值copy一份放进去。那么修改copy的那个值并不会影响原始值,因为它们是独立的。
先看看原始类型和引用类型的存储方式:(图片摘自https://www.cnblogs.com/onlycare/p/9791826.html)
复杂的数据类型即引用类型,它的值是对象,保存在堆内存中,包含引用类型值的变量实际上包含的并不是对象本身,而是一个指向该对象的指针。从一个变量向另一个变量复制引用类型的值,复制的其实是指针,因此两个变量最终都指向同一个对象。
const a = []
b = a
console.log("a:",a, "; b:",b) //输出: a: [ ] ; b: [ ]
b[0] = 1
console.log("a:",a, "b:",b) //输出: a: [1] ; b: [1]
上面代码,只是将a的地址给了b,因而对b进行操作,会影响到a的值,这在很多情况下并不是我们想要的。
【浅拷贝】
首先可以通过Object.assign来解决这个问题,很多人认为这个函数是用来深拷贝的。其实并不是,Object.assign只会拷贝所有属性值到新的对象中,如果属性值是对象的话,拷贝的是地址,所以并不是深拷贝。
let a = {
age: 1
}
let b = Object.assign({}, a)
a.age = 2
console.log(b.age) // 1
除了Object.assign之外,我们还可以通过展开运算符 ... 来实现浅拷贝,
let a = {
age: 1
}
let b = {...a}
a.age = 2
console.log(b.age) //1
通常来说浅拷贝就能解决大部分问题了,但是当我们遇到如下情况,就会发现浅拷贝无法满足我们的需要了。
let a = {
age:1,
jobs: {
first: 'IT'
}
}
let b = {...a}
a.jobs.first = 'PM'
console.log(b.jobs.first) // PM
对于第一层拷贝问题,浅拷贝可以解决,但如果接下去的值中还有对象的话,那么两者享有相同的地址。要解决这个问题,就不得不使用深拷贝了。
【深拷贝】
使用JSON.parse(JSON.stringify(a))
let a = {
age: 1,
jobs: {
first: 'IT'
}
}
let b = JSON.parse(JSON.stringify(a))
a.jobs.first = 'PM'
console.log(b.jobs.first) // IT
难道深拷贝就这么简单?并不是,该方法虽然可以实现深拷贝,但是存在诸多局限:
1、会忽略undifined;2、会忽略symbol;3、不能序列化函数;4、不能解决循环引用的对象。
JSON.parse(JSON.stringify())可以解决大部分深拷贝的问题,更高级的可以用lodash的深拷贝函数
function deepClone(obj){
function isObject(o){
return(typeof o === 'object' || typeof o === 'function') && o !== null
}
if(!isObject(obj)){
throw new Error('非对象')
}
let isArray = Array.isArray(obj)
let newObj = isArray ? [...obj] : {...obj}
Reflect.ownKeys(newObj).forEach(key => {
newObj[key] = isObject(obj[key]) ? deepClone(obj[key]) : obj[key]
})
return newObj
}
let obj = {
a: [1, 2, 3],
b: {
c: 2,
d: 3
}
}
let newObj = deepClone(obj)
newObj.b.d = 2
console.log(obj.b.d) // 3