JS浅拷贝与深拷贝
时间:2022-07-28
本文章向大家介绍JS浅拷贝与深拷贝,主要内容包括其使用实例、应用技巧、基本知识点总结和需要注意事项,具有一定的参考价值,需要的朋友可以参考一下。
数据类型
- 基本类型:undefined、null、Boolean、String、Number、Symbol
- 引用类型:Object、Array、Date、Function、RegExp等
#存储方式
- 基本类型:基本类型值在内存中占据固定大小,保存在
栈内存
当中,(不包含闭包
中的变量) - 引用类型:引用类型保存在
堆内存
中,而栈内存存储的是堆内存中的存储地址
(引用)。
#为什么要进行拷贝?
看个例子:
let obj1 = {
value: 'a'
}
let obj2 = obj1;
obj2.value='b';
console.log(obj1);//{ value: 'b' }
console.log(obj1 === obj2); // true
本来只想改变obj2
的 value
的值,但是改变之后连obj1
的值也一同改变了,很显然,这不是我们想要的的结果。
因为对象是引用类型,所以赋值时的操作仅是赋予相同的地址,当对其中一个对象进行操作时,就会影响其他的对象。解决这个问题就需要使用拷贝了。
拷贝的方式分两种:
- 浅拷贝
- 基本类型:拷贝值
- 引用类型:拷贝对象引用。
- 深拷贝
- 基本类型:拷贝值
- 引用类型:会创建一个新的引用,将之前的对象完整的拷贝一份出来,并添加至新的引用当中。
#浅拷贝
#Object.assign()
使用原生的 Object.assign()
方法就可以实现引用类型的浅拷贝
let obj1 = {
value: 'a'
}
let obj2 = Object.assign({},obj1);
obj2.value='b';
console.log(obj1);//{ value: 'a' }
但是如果拷贝的源对象当中包含对象时,OBject.assign()
方法只会拷贝对象的引用地址
#扩展运算符
使用 ES6 的扩展运算符也可以达到浅拷贝的效果
let arr1 = [1,2,3]
let arr2 = [...arr1]
console.log(arr1 === arr2); //false
输出 false
就说明克隆成功了,对象可以这么搞
let obj1 = {
value: 'a',
arr: [1,2,3]
};
let obj2 = {...obj1}
console.log(obj1 === obj2); // false
console.log(obj1.arr === obj2.arr); // true
输出 false
就说明克隆成功了,但是里面的数组却克隆失败了,是因为扩展运算符在复制引用类型时,复制的是地址。
这种比较试适合简单的单个数组或者对象使用,简单又方便
#深拷贝
#JSON.stringify()
如果要拷贝的对象中包含对象,就需要深拷贝了,一般使用原生的方法JSON.parse(JSON.stringify(obj))
let obj1 = {
value: 'a',
obj:{
value: 'b'
},
arr:[1,2,3]
}
let obj2 = JSON.parse(JSON.stringify(obj1));
console.log(obj1.arr === obj2.arr);// false
console.log(obj1.obj === obj2.obj);// false
输出 false
就说明克隆成功了
这个也会有一些缺陷,比如 undefined
或者有函数的时候就会出现问题,最好的方法是使用递归函数。
这个可以参考loadsh cloneDeep
#自己实现深拷贝
function deepClone(obj, hash = new WeakMap()) {
if (obj === null) return obj; // 如果是null或者undefined我就不进行拷贝操作
if (obj instanceof Date) return new Date(obj);
if (obj instanceof RegExp) return new RegExp(obj);
// 可能是对象或者普通的值 如果是函数的话是不需要深拷贝
if (typeof obj !== "object") return obj;
// 是对象的话就要进行深拷贝
if (hash.get(obj)) return hash.get(obj);
let cloneObj = new obj.constructor();
// 找到的是所属类原型上的constructor,而原型上的 constructor指向的是当前类本身
hash.set(obj, cloneObj);
for (let key in obj) {
if (obj.hasOwnProperty(key)) {
// 实现一个递归拷贝
cloneObj[key] = deepClone(obj[key], hash);
}
}
return cloneObj;
}
let obj = { name: 1, address: { x: 100 } };
obj.o = obj; // 对象存在循环引用的情况
let d = deepClone(obj);
obj.address.x = 200;
console.log(d === obj); // false 克隆成功
console.log(d);// { name: 1, address: { x: 100 }, o: [Circular] }
#参考
- CSS基础语法(一) CSS的3种引入
- php 实现文件下载
- Linux下Sublime Text 2的安装
- php判断客户端UserAgent
- CSS基础语法(二) CSS的9种选择器
- vue表单详解——小白速会
- php curl获取网页内容乱码和获取不到内容的解决方法
- vue组件详解(一)——组件与复用
- 【LeetCode 459】关关的刷题日记42 – Repeated Substring Pattern
- HDU 1848 Fibonacci again and again(SG函数)
- php 分页相关
- 最简单的php导出excel文件方法
- vue组件详解(二)——使用props传递数据
- Android获取QQ和微信的聊天记录,并保存到数据库
- JavaScript 教程
- JavaScript 编辑工具
- JavaScript 与HTML
- JavaScript 与Java
- JavaScript 数据结构
- JavaScript 基本数据类型
- JavaScript 特殊数据类型
- JavaScript 运算符
- JavaScript typeof 运算符
- JavaScript 表达式
- JavaScript 类型转换
- JavaScript 基本语法
- JavaScript 注释
- Javascript 基本处理流程
- Javascript 选择结构
- Javascript if 语句
- Javascript if 语句的嵌套
- Javascript switch 语句
- Javascript 循环结构
- Javascript 循环结构实例
- Javascript 跳转语句
- Javascript 控制语句总结
- Javascript 函数介绍
- Javascript 函数的定义
- Javascript 函数调用
- Javascript 几种特殊的函数
- JavaScript 内置函数简介
- Javascript eval() 函数
- Javascript isFinite() 函数
- Javascript isNaN() 函数
- parseInt() 与 parseFloat()
- escape() 与 unescape()
- Javascript 字符串介绍
- Javascript length属性
- javascript 字符串函数
- Javascript 日期对象简介
- Javascript 日期对象用途
- Date 对象属性和方法
- Javascript 数组是什么
- Javascript 创建数组
- Javascript 数组赋值与取值
- Javascript 数组属性和方法
- python - 获取网站PR及百度权重
- 详解Android Studio3.5及使用AndroidX的一些坑
- AndroidQ分区存储权限变更及适配的实现
- Gradle的缓存路径修改的四种方法(小结)
- 适配AndroidQ拍照和读取相册图片的实现方法
- 这是我的第一篇文章
- Android自定义View实现五子棋游戏
- AndroidQ(10)黑暗模式适配的实现
- Android仿微信录音功能
- android实现截图并动画消失效果的思路详解
- 位运算判断奇偶数
- Kotlin之在Gradle中无参(no-arg)编译器插件的使用详解
- android实现常驻通知栏遇到的问题及解决办法
- Android仿微信键盘切换效果
- Android实现WIFI和GPRS网络的切换