Object.assign () 和深拷贝
先看看啥叫深拷贝?啥叫浅拷贝?
假设B复制了A,修改A的时候,看B是否发生变化:
如果B跟着也变了,说明是浅拷贝,拿人手短!(修改堆内存中的同一个值)
如果B没有改变,说明是深拷贝,自食其力!(修改堆内存中的不同的值)
深拷贝(deepCopy)是增加了一个指针并且申请了一个新的内存,使这个增加的指针指向这个新的内存,使用深拷贝的情况下,释放内存的时候不会因为出现浅拷贝时释放同一个内存的错误。
浅拷贝(shallowCopy)只是增加了一个指针指向已存在的内存地址
简单理解:
深拷贝(深复制):在计算机中开辟一块新的内存地址用于存放复制的对象。
浅拷贝(浅复制):仅仅是指向被复制的内存地址,如果原地址发生改变,那么浅复制出来的对象也会相应的改变。
MDN Web开发文档上对Object.assign()得解释:
Object.assign()
方法用于将所有可枚举属性的值从一个或多个源对象复制到目标对象。它将返回目标对象。
官网示例:
const target = { a: 1, b: 2 };
const source = { b: 4, c: 5 }; const returnedTarget = Object.assign(target, source); console.log(target);
// expected output: Object { a: 1, b: 4, c: 5 } console.log(returnedTarget);
// expected output: Object { a: 1, b: 4, c: 5 }
语法: Object.assign(target, ...sources)
参数:target
目标对象、sources
源对象。
返回值:目标对象。
作用话根据官网来看:复制一个对象、拷贝对象(当对象中只有一级属性,没有二级属性的时候,此方法为深拷贝,但是对象中有对象的时候,此方法,在二级属性以后就是浅拷贝。)、合并对象。
描述:
如果目标对象中的属性具有相同的键,则属性将被源对象中的属性覆盖。后面的源对象的属性将类似地覆盖前面的源对象的属性。
Object.assign
方法只会拷贝源对象自身的并且可枚举的属性到目标对象。该方法使用源对象的[[Get]]
和目标对象的[[Set]]
,所以它会调用相关 getter 和 setter。因此,它分配属性,而不仅仅是复制或定义新的属性。如果合并源包含getter,这可能使其不适合将新属性合并到原型中。为了将属性定义(包括其可枚举性)复制到原型,应使用Object.getOwnPropertyDescriptor()
和Object.defineProperty()
。
在出现错误的情况下,例如,如果属性不可写,会引发TypeError
,如果在引发错误之前添加了任何属性,则可以更改target
对象。
注意:Object.assign
不会在那些source
对象值为 null
或 undefined
的时候抛出错误。
Object.assign()对象的深拷贝
针对深拷贝,需要使用其他办法,因为 Object.assign()拷贝的是属性值。假如源对象的属性值是一个对象的引用,那么它也只指向那个引用。
let obj1 = { a: 0 , b: { c: 0}};
let obj2 = Object.assign({}, obj1);
console.log(JSON.stringify(obj2)); // { a: 0, b: { c: 0}} obj1.a = 1;
console.log(JSON.stringify(obj1)); // { a: 1, b: { c: 0}}
console.log(JSON.stringify(obj2)); // { a: 0, b: { c: 0}} obj2.a = 2;
console.log(JSON.stringify(obj1)); // { a: 1, b: { c: 0}}
console.log(JSON.stringify(obj2)); // { a: 2, b: { c: 0}} obj2.b.c = 3;
console.log(JSON.stringify(obj1)); // { a: 1, b: { c: 3}}
console.log(JSON.stringify(obj2)); // { a: 2, b: { c: 3}}
最后一次赋值的时候,b是值是对象的引用,只要修改任意一个,其他的也会受影响 // Deep Clone (深拷贝)
obj1 = { a: 0 , b: { c: 0}};
let obj3 = JSON.parse(JSON.stringify(obj1));
obj1.a = 4;
obj1.b.c = 4;
console.log(obj3); // { a: 0, b: { c: 0}}
递归的方式实现深拷贝
function _deepClone(source) {
let target;
if (typeof source === 'object') {
target = Array.isArray(source) ? [] : {}
for (let key in source) {
if (source.hasOwnProperty(key)) {
if (typeof source[key] !== 'object') {
target[key] = source[key]
} else {
target[key] = _deepClone(source[key])
}
}
}
} else {
target = source
}
return target
} const obj = {
a: {
aa: 1,
aaa: 2
},
b: 2,
c: 3
}
var obj2 = _deepClone(obj)
obj.b = 9
console.log(obj2) //{a: {aa: 1,aaa: 2}, b: 2, c: 3}
console.log(obj) //{a: {aa: 1,aaa: 2}, b: 9, c: 3}
js实现深拷贝
const obj = {
a: {
aa: 1,
aaa: 2
},
b: 2,
c: 3
}
let obj3 = JSON.parse(JSON.stringify(obj));
obj.a.aa = 4;
obj.b = 9;
console.log(obj3); // {a: {aa: 1,aaa: 2}, b: 2, c: 3}
console.log(obj) // {a: {aa: 4,aaa: 2}, b: 9, c: 3}
本文参考:
Object.assign () 和深拷贝的更多相关文章
- Object.assign()与深拷贝(一)
深拷贝与浅拷贝 所谓深拷贝与浅拷贝,是围绕引用类型变量的拷贝进行的讨论. 在ECMAScript中,变量分为基本类型和引用类型两种.其本质区别是不可变性,基本类型是不可变的,而引用类型是可变的. 所谓 ...
- es6 Object.assign(target, ...sources)
Object.assign() 方法用于将所有可枚举属性(对象属性)的值从一个或多个源对象复制到目标对象.它将返回目标对象. 语法 Object.assign(target, ...sources) ...
- js - object.assign 以及浅、深拷贝
浅(引用)拷贝:共用同一内存地址,你改值我也变 譬如常用的对象赋值操作 深拷贝:深拷贝即创建新的内存地址保存值(互不影响) 譬如以下 const shallBasicCopy = obj => ...
- Object.assign()方法
对象的扩展 1.ES6中,对象的属性和方法可简写:对象的属性值可不写,前提是属性名已经声明: var name = "zhangsan"; "; var obj = { ...
- es6 Object.assign
ES6 Object.assign 一.基本用法 Object.assign方法用来将源对象(source)的所有可枚举属性,复制到目标对象(target).它至少需要两个对象作为参数,第一个参数是目 ...
- 浅谈Object.assign()
Object.assign()方法用于将所有可枚举属性的值从一个或多个源对象复制到目标对象.返回值为目标对象. 1 Object.assign 是 ES6 新添加的接口,主要的用途是用来合并多个 Ja ...
- Object.assign()解释整理
链接:https://blog.csdn.net/wang252949/article/details/79106160 语法 Object.assign(target, ...sources) 参数 ...
- ES6 对象的扩展 Object.assign()
Object.assign方法用于对象的合并,将源对象(source)的所有可枚举属性,复制到目标对象(target). const target = { a: 1 }; const source1 ...
- [转]javascript之Object.assign()痛点
本文转自:http://blog.csdn.net/waiterwaiter/article/details/50267787 最近也一直会用javascript,然后中间使用的一些组件,如Echar ...
- es6 javascript对象方法Object.assign()
es6 javascript对象方法Object.assign() 2016年12月01日 16:42:34 阅读数:38583 1 基本用法 Object.assign方法用于对象的合并,将源对象 ...
随机推荐
- nacos系列:简介和安装
目录 版本选择 安装 windows安装 centos安装 mysql方式存储 官网:https://nacos.io github:https://github.com/alibaba/nacos ...
- RocketMQ Linux单机测试:简易快速部署指南及Dashboard控制台部署
目录 简介 开始 下载 增加环境变量 修改启动文件jvm大小 修改rocketmq配置文件 启动 快速测试 关闭 Dashboard 下载Dashboard 已编译jar包网盘下载 启动命令 可能遇到 ...
- Programming abstractions in C阅读笔记:p84-p87
<Programming Abstractions In C>学习第43天,p84-p87总结. 一.技术总结 1.record record也称为structure(结构体),是一种数据 ...
- maven系列:简介和安装配置(Mac、Linux、Windows、settings.xml、IDEA配置)
目录 一.简介 二.安装 三.配置 Mac配置 Centos配置 Window配置 settings.xml配置 IDEA配置 一.简介 官网:https://maven.apache.org mav ...
- 文心一言 VS 讯飞星火 VS chatgpt (75)-- 算法导论7.2 4题
四.如果用go语言,银行一般会按照交易时间来记录某一账户的交易情况.但是,很多人却喜欢收到的银行对账单是按照支票号码的顺序来排列的.这是因为,人们通常都是按照支票号码的顺序来开出支票的,而商人也通常都 ...
- 9、Spring之代理模式
9.1.环境搭建 9.1.1.创建module 9.1.2.选择maven 9.1.3.设置module名称和路径 9.1.4.module初始状态 9.1.5.配置打包方式和依赖 <?xml ...
- 算法笔记_python
目录 算法 概念 时间复杂度 空间复杂度 递归原理 顺序查找 二分查找 列表排序 LowB 三人组 冒泡排序 选择排序 插入排序 NB三人组 快速排序 堆排序 归并排序 NB三人组小结 总结 其他排序 ...
- 代码随想录算法训练营第二十五天| 216.组合总和III 17.电话号码的字母组合
216.组合总和III 卡哥建议:如果把 组合问题理解了,本题就容易一些了. 题目链接/文章讲解:https://programmercarl.com/0216.%E7%BB%84%E5%90%8 ...
- 性能调优 session 1 - 计算机体系结构 量化研究方法
近期本人参与的存储系统项目进入到性能调优阶段,当前系统的性能指标离项目预期目标还有较大差距.本人一直奉行"理论指导下的实践",尤其在调试初期,更要抓住主要矛盾,投入最少的资源来获取 ...
- 文心一言 VS 讯飞星火 VS chatgpt (90)-- 算法导论8.3 3题
三.用go语言,利用归纳法来证明基数排序是正确的.在你所给出的证明中,在哪里需要假设所用的底层排序算法是稳定的? 文心一言: 基数排序是一种非比较型整数排序算法,其通过在每一位上进行比较来排序.基数排 ...