浅谈js中的深浅拷贝
谈深浅拷贝之前我们先来聊一聊对象
什么是对象?
对象用来存储键值对和更复杂的实体,可以通过花括号 {…}
和其中包含一些可选的属性来创建。属性是一个键值对,键是一个字符串(也叫做属性名),值可以是任何类型。
对象和其他原始的类型相比有一个很重要的区别,对象都是按引用存储复制的。
let user = { name: 'John' }; let admin = user; admin.name = 'Pete'; // 改变 "admin" 的引用 alert(user.name); // 'Pete', changes are seen from the "user" reference
上面的例子展示了只存在一个对象,就像我们的一个抽屉带有两把钥匙,如果一个钥匙(admin
)去使用了抽屉,稍后使用另外一个钥匙(user
)打开的时候,就会看到有变化。
复制一个对象的变量也等同于创建了此对象的另一个引用。
那么我们该怎么复制一个对象呢?创建一份独立的拷贝,一份复制?
这也是可行的,但是有一点麻烦,因为JS并没有原生的方法支持这么做。实际上,我们很少这么做。复制引用很多时候是好用的。
如果我们真的想这么做,就需要创建一个新的对象,遍历现有对象的属性,在原始值的状态下复制给新的对象。
像这样:
let user = { name: "John", age: 30 }; let clone = {}; // 新的空对象 // 复制所有的属性值 for (let key in user) { clone[key] = user[key]; } // 现在复制是独立的复制了 clone.name = "Pete"; // 改变它的值 alert( user.name ); // 原对象属性值不变
我们也可以用Object.assign 来实现。
像这样:
let user = { name: "John", age: 30 }; let clone = Object.assign({}, user);
它复制了 user
对象所有的属性给了一个空对象,然后返回拷贝后的对象。事实上,这跟循环赋值一样,但是更短。
直到现在,我们是假设所有的 user
属性都是原始值,但是如果对象属性指向对象呢?
像这样:
let user = { name: "John", sizes: { height: 182, width: 50 } }; let clone = Object.assign({}, user); alert( user.sizes === clone.sizes ); // true,同一个对象 // user 和 clone 共享 sizes 对象 user.sizes.width++; // 在这里改变一个属性的值 alert(clone.sizes.width); // 51,在这里查看属性的值
这个叫浅拷贝,为了解决上面的的问题,我们在复制的时候应该检查 user[key]
的每一个值,如果是一个对象,我们再复制一遍这个对象,这叫做深拷贝。
有一个标准的深拷贝算法,解决上面和一些更复杂的情况,叫做 Structured cloning algorithm。为了不重复造轮子,我们使用它的一个 JS 实现的库 lodash, 方法名叫做 _.cloneDeep(obj)。
原文地址:https://www.cnblogs.com/r-mp/p/11765337.html
- 一次数据库无法登陆的问题及排查 (r3笔记第99天)
- 用深度学习keras的cnn做图像识别分类,准确率达97%
- 短信发送接口被恶意访问的网络攻击事件(三)定位恶意IP的日志分析脚本
- job处理缓慢的性能问题排查与分析(r4笔记第18天)
- 京东商品评论情感分析:数据采集与词向量构造方法
- springboot开启access_log日志输出
- 完美的执行计划导致的性能问题(r4笔记第17天)
- 解决Docker容器时区及时间不同步的问题
- 移动端测试方案--sptt
- 服务端事件EventSource揭秘
- 让docker中的mysql启动时自动执行sql文件
- 通过执行计划中的CONCATENATION分析sql问题(r4笔记第16天)
- 《小美好》短评文本情感分析+生成词云
- 通过shell定制dbms_advisor.quick_tune(r4笔记第15天)
- 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 数组属性和方法
- Redis系列:高可用哨兵方案部署
- linux或windows环境下pytorch的安装与检查验证(解决runtimeerror问题)
- Linux 查看历史命令并执行的方法
- 在 awk 中使用循环
- 移植busybox构建最小根文件系统的步骤详解
- Linux中的screen命令使用详解
- Mysql4种方式避免重复插入数据!
- 手撕RTSP协议系列(3)——sdp格式详解
- Linux tee命令使用详解
- 简单了解Linux性能监控命令free
- 在CentOS 8上安装htop的教程
- Ubuntu16.04.5LTS安装SVN的过程
- CentOS6.5与CentOS7 ssh修改默认端口号的方法
- CentOS8 配置本地yum源的详细教程
- linux查找大文件指定内容的实现方法