先看看啥叫深拷贝?啥叫浅拷贝?

假设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() 。

String类型和 Symbol 类型的属性都会被拷贝。

在出现错误的情况下,例如,如果属性不可写,会引发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}

本文参考:

MDN Web文档

Object.assign () 和深拷贝

Object.assign () 和深拷贝的更多相关文章

  1. Object.assign()与深拷贝(一)

    深拷贝与浅拷贝 所谓深拷贝与浅拷贝,是围绕引用类型变量的拷贝进行的讨论. 在ECMAScript中,变量分为基本类型和引用类型两种.其本质区别是不可变性,基本类型是不可变的,而引用类型是可变的. 所谓 ...

  2. es6 Object.assign(target, ...sources)

    Object.assign() 方法用于将所有可枚举属性(对象属性)的值从一个或多个源对象复制到目标对象.它将返回目标对象. 语法 Object.assign(target, ...sources) ...

  3. js - object.assign 以及浅、深拷贝

    浅(引用)拷贝:共用同一内存地址,你改值我也变 譬如常用的对象赋值操作 深拷贝:深拷贝即创建新的内存地址保存值(互不影响) 譬如以下 const shallBasicCopy = obj => ...

  4. Object.assign()方法

    对象的扩展 1.ES6中,对象的属性和方法可简写:对象的属性值可不写,前提是属性名已经声明: var name = "zhangsan"; "; var obj = { ...

  5. es6 Object.assign

    ES6 Object.assign 一.基本用法 Object.assign方法用来将源对象(source)的所有可枚举属性,复制到目标对象(target).它至少需要两个对象作为参数,第一个参数是目 ...

  6. 浅谈Object.assign()

    Object.assign()方法用于将所有可枚举属性的值从一个或多个源对象复制到目标对象.返回值为目标对象. 1 Object.assign 是 ES6 新添加的接口,主要的用途是用来合并多个 Ja ...

  7. Object.assign()解释整理

    链接:https://blog.csdn.net/wang252949/article/details/79106160 语法 Object.assign(target, ...sources) 参数 ...

  8. ES6 对象的扩展 Object.assign()

    Object.assign方法用于对象的合并,将源对象(source)的所有可枚举属性,复制到目标对象(target). const target = { a: 1 }; const source1 ...

  9. [转]javascript之Object.assign()痛点

    本文转自:http://blog.csdn.net/waiterwaiter/article/details/50267787 最近也一直会用javascript,然后中间使用的一些组件,如Echar ...

  10. es6 javascript对象方法Object.assign()

    es6 javascript对象方法Object.assign() 2016年12月01日 16:42:34 阅读数:38583 1  基本用法 Object.assign方法用于对象的合并,将源对象 ...

随机推荐

  1. @ControllerAdvice 注解使用及原理探究

    最近在新项目的开发过程中,遇到了个问题,需要将一些异常的业务流程返回给前端,需要提供给前端不同的响应码,前端再在次基础上做提示语言的国际化适配.这些异常流程涉及业务层和控制层的各个地方,如果每个地方都 ...

  2. linux测试ipv6

    前言 操作系统版本:centos 7.6 curl版本:7.87(centos 7自带的curl版本是7.29,测ipv6会有问题) 系统开启ipv6 centos 7默认开启 ipv6,可检查net ...

  3. GitOps 与 DevOps:了解关键差异,为企业做出最佳选择

    在软件开发领域,GitOps 和 DevOps 是加强协作和实现软件交付流程自动化的重要技术.虽然这两种模式都旨在提高软件开发生命周期的效率,但它们的核心原则和实施方式却各不相同. 本篇文章将帮助您了 ...

  4. 一种基于ChatGPT的高效吃瓜方式的探索和研究。

    你好呀,我是歪歪. 最近掌握了一个新的吃瓜方式,我觉得还行,给大家简单分享一下. 事情说来就话长了,还得从最近的一次"工业革命"开始,也就是从超导材料说起. 8 月 1 日的时候 ...

  5. erlang和rabbitMq在ubuntu上的安装过程

    安装rabbitMQ的前提是安装上erlang,所以从erlang安装开始. 安装erlang 1,先升级一下 $:sudo apt-get update 如果软件源有问题 修改etc/apt/sou ...

  6. PhotoShop Beta(爱国版)安装教程-内置AI绘画功能

    PS beta版安装教程 Window和Mac版都有,里面内置AI绘画功能 ps Beta版真的太爽了,今天来和大家分享下安装教程. 很多人拿这资料卖5块 9.9 19.9,球友们直接用,建议赶紧装, ...

  7. 《SQL与数据库基础》02. SQL-DDL

    目录 DDL 库管理 表管理 本文以 MySQL 为例 DDL 库管理 查看有哪些数据库: SHOW DATABASES; 使用某个数据库: USE 数据库名; 查看当前使用的数据库: SELECT ...

  8. 数据可视化【原创】vue+arcgis+threejs 实现海量建筑物房屋渲染,性能优化

    本文适合对vue,arcgis4.x,threejs,ES6较熟悉的人群食用. 先报备一下版本号 "vue": "^2.6.11" "@arcgis/ ...

  9. 深入探究API接口

    作为程序员,我们经常会遇到需要获取外部数据或调用外部服务的情况.而API(Application Programming Interface,应用程序编程接口)接口就是这样的一种机制,它允许我们的应用 ...

  10. DevOps|研发效能团队组织架构和能力建设

    研发效能团队相对于各个公司主营业务规模来说并不是很大,但是在经历的几家公司里主要是有两种组织架构,职能独立型组织架构和业务闭环型组织架构.本文主要讲解这两种组织架构的特点.优劣.劣势. 业务闭环组织架 ...