js之深拷贝与浅拷贝

一、拷贝是什么?

从生活中理解,拷贝就是用u盘中复制一份文件到电脑中,或者是将某个文件夹的快捷方式发到桌面上。

拷贝分为两种

• 浅拷贝
• 深拷贝

二、产生浅拷贝与深拷贝的原因

浅拷贝就是类似于将一个文件夹的快捷方式发送到桌面上,无论是从桌面上打开还是从路径中打开都是对同一个文件夹的操作。
1)从js理解,因为js有基本类型和引用类型之分。

• 基本类型存放在栈内存中
• 引用类型放在堆内存中
  当我们调用一个变量时,实际上是在栈内存中查询该变量, 此时堆内存中的引用类型将地址放在栈内存中。如果我们调用该引用类型,是在栈内存中查找该地址,然后根据对应的地址去调用堆内存中的数据

2)正因为引用类型是放在堆内存中,地址放在栈内存中才有了深拷贝与浅拷贝。所以将一个引用类型直接赋值给另一个变量,只是将栈内存中的地址复制,对堆内存中的数据并未进行任何实质性的操作。

三、解决浅拷贝的办法

1、手动赋值

let obj = {
	username:'wz',
	age:'18',
	sex:'male'
}

//浅拷贝
let obj2 = obj

//深拷贝
let obj2 = {
	username:obj.username,
	age:obj.age,
	sex:obj.sex
}

2.递归算法

let arr = []
console.log(recurrence(obj));
function recurrence(data) {
    Object.keys(data).forEach(item => {
        if (typeof data[item] === "object") {
            return recurrence(data[item])
        }
        arr.push(data[item])
    })
    return arr
}

3、JSON转换

	//该方法利用的是JSON.parse(JSON.stringify(obj))
	//我对于该方法的理解是利用json格式对于字符串和对象实现灵活的转换

该方法是存在坑点的,我总结一下

• obj有时间对象 => 转换后将还是字符串类型(很好理解,json只能实现字符串和对象转换)
• obj有函数 => 转换后函数将是undefined(理由同上)

以下的丢失我并不是太理解,但还是写下吧

• 如果obj里有RegExp、Error对象，则序列化的结果将只得到空对象
• 如果obj里有NaN、Infinity和-Infinity，则序列化的结果会变成null
• SON.stringify()只能序列化对象的可枚举的自有属性，例如 如果obj中的对象是有构造函数生成的， 则使用JSON.parse(JSON.stringify(obj))深拷贝后，会丢弃对象的constructor
• 如果对象中存在循环引用的情况也无法正确实现深拷贝

四、总结

json转换是常用的一个深拷贝方式,但是其存在的坑点也是我之前面试遇到的,开发应该是不常见的