什么是JavaScript的深拷贝
什么是拷贝
拷贝: 英文copy的音译,中文意思是 复制
JS中复制通常有两种处理方式,一种是深复制,一种是浅复制
为什么JavaScript会区分深拷贝和浅拷贝
按照ECMAScript标准,数据类型可以分为两大类,一种是原始数据类型 ,一种是对象(Object)。
原始数据类型一共有七种: Undefined Null Number String Boolean Symbol BigInt
对象(Object):任何可以共同new来创建的类型都是对象类型,例如Map,Array,Date等。也就是说不属于原始数据类型的都是对象
JS在复制时,根据数据类型的不同,会表现出不同的特性。而深复制和浅复制是根据对象类型的复制后产生的不同的效果而进行的去区分
总的来说,只有对象类型才有深复制和前复制的区分
为什么只有对象类型才需要区分深复制和浅复制
对于原始数据类型来说,当它复制完成时,复制的前后两个变量是两个毫无关联的数据。其内部会新建一个内存地址来存放这两数据。
对于对象数据类型来说,当它进行浅复制时,复制完成的两个对象指向的是同一个内存地址。当进行深复制时,则会开辟出一个新的内存地址来存放变量数据。
所以深拷贝和浅拷贝的区别,就是复制时会不会开辟一个新的内存地址来存放对象类型
如何进行浅拷贝,浅拷贝有什么特性
1.新建一个变量指向一个非原始数据类型的变量就已经完成浅拷贝
2.特性:由于两个变量指向的是同一个内存地址,都是指向同一个对象,所以当任意一个拷贝对数据进行修改时,所有拷贝变量中的值都会发生变化
如何进行深拷贝,深拷贝有什么特性
方法:
- 使用JSON.parse()和JSON.stringify()对对象进行拷贝
- 构建函数进行深拷贝
深拷贝的两种方法有什么不同 方法一:
- JSON.parse(JSON.stringify(obj)) 可以简单的实现对对象的深拷贝,
- 当需要拷贝的对象obj中的值不属于原始数据类型时,无法很好的拷贝,不支持拷贝undefined、function、Date等,只能完成原始数据类型的深拷贝
根据拷贝的需要,使用typeof instanceof 和递归,构造函数进行拷贝
function deepClone(obj) {
//返回null类型
if (obj === null) return null
//typeof 的null 和 object 都会返回 object,第一步已经排除了 为null的情况,剩下的就是不需要处理的数据类型
if(typeof obj !== 'object') return objif(obj instanceof Date) return new Date(obj)if(obj instanceof RegExp) return new RegExp(obj)
const cloneObj = new obj.constructor();
//保持继承链
for(const key in obj) {
if(obj.hasOwnProperty(key)) {
cloneObj[key] = obj[key]
}
}
return cloneObj
}
【Javascript深拷贝发散总结】深拷贝思考发散出几个问题
1.什么是内存地址
2.JSON.stringify和JSON.parse()
3.typeof instanceof
4.递归
推荐阅读
- 操作系统|[译]从内部了解现代浏览器(1)
- web网页模板|如此优秀的JS轮播图,写完老师都沉默了
- JavaScript|vue 基于axios封装request接口请求——request.js文件
- vue.js|vue中使用axios封装成request使用
- JavaScript|JavaScript: BOM对象 和 DOM 对象的增删改查
- JavaScript|JavaScript — 初识数组、数组字面量和方法、forEach、数组的遍历
- JavaScript|JavaScript — call()和apply()、Date对象、Math、包装类、字符串的方法
- JavaScript|JavaScript之DOM增删改查(重点)
- javascript|vue使用js-xlsx导出excel,可修改格子样式,例如背景颜色、字体大小、列宽等
- javascript|javascript中的数据类型转换