浅(引用)拷贝:共用同一内存地址,你改值我也变

譬如常用的对象赋值操作

深拷贝:深拷贝即创建新的内存地址保存值(互不影响)

譬如以下

const shallBasicCopy = obj => {
JSON.parse(JSON.stringify(obj))
}
 
* 优点:能正确处理的对象只有Number、String、Array等能够被json表示的数据结构
* 缺点:函数这种不能被json表示的类型将不能被正确处理

关于object.assign的梗(对象深、浅拷贝)

有些人说深拷贝,有些人说浅拷贝,也不见的谁错或对(某些特定情况下)

    // 深拷贝
let srcObj = {
'name': 'lilei',
'age': '20'
}; let copyObj2 = Object.assign({}, srcObj, {
'age': '21'
}); copyObj2.age = '23'; console.log('srcObj', srcObj); //{ name: 'lilei', age: '22' } // 浅拷贝
srcObj = {
'name': '明',
grade: {
'chi': '50',
'eng': '50'
}
};
copyObj2 = Object.assign({}, srcObj);
copyObj2.name = '红';
copyObj2.grade.chi = '60';
console.log('新 objec srcObj', srcObj); // { name: '明', grade: { chi: '60', eng: '50' } }

梗就在这里:

从例子中可以看出,改变复制对象的name 和 grade.chi ,源对象的name没有变化,但是grade.chi却被改变了。因此我们可以看出Object.assign()拷贝的只是属性值,假如源对象的属性值是一个指向对象的引用,它也只拷贝那个引用值。 
也就是说,对于Object.assign()而言, 如果对象的属性值为简单类型(string, number),通过Object.assign({},srcObj);得到的新对象为‘深拷贝’如果属性值为对象或其它引用类型,那对于这个对象而言其实是浅拷贝的。这是Object.assign()特别值得注意的地方。 
多说一句,Object.assign({}, src1, src2); 对于scr1和src2之间相同的属性是直接覆盖的,如果属性值为对象,是不会对对象之间的属性进行合并

对象深拷贝可以利用第三方:underscore实现

数组的浅、深拷贝也是如此!

详情可以看MDN,文章转载于:https://segmentfault.com/a/1190000014107100

js - object.assign 以及浅、深拷贝的更多相关文章

  1. Object.assign()

    https://developer.mozilla.org/zh-CN/docs/Web/JavaScript/Reference/Global_Objects/Object/assign 说明 Ob ...

  2. Object.assign()的使用

    一.Object.assign()对象的拷贝 1 Object.assign() 方法用于将所有可枚举属性的值从一个或多个源对象复制到目标对象.它将返回目标对象. 2 Object.assign(ta ...

  3. 用浅/深拷贝、和HTML5方法解决js对象的引用的问题

    先来看一个例子 例一: var a=[1,2,3]; var b=a; b.push(4); alert(b);//1,2,3,4 alert(a);//1,2,3,4 var a=[1,2,3]; ...

  4. 【JS】307- 复习 Object.assign 原理及其实现

    点击上方"前端自习课"关注,学习起来~ }let b = {    name: "muyiy",    book: {        title: " ...

  5. JS Object Deep Copy & 深拷贝

    JS Object Deep Copy & 深拷贝 针对深度拷贝,需要使用其他方法 JSON.parse(JSON.stringify(obj));,因为 Object.assign() 拷贝 ...

  6. JS Object Deep Copy & 深拷贝 & 浅拷贝

    JS Object Deep Copy & 深拷贝 & 浅拷贝 https://developer.mozilla.org/zh-CN/docs/Web/JavaScript/Refe ...

  7. 浅谈JS中的浅拷贝与深拷贝

    前端工程师应该都比较熟悉浅拷贝和深拷贝的概念,在日常业务代码的过程中,特别是做数据处理的时候,经常行的会遇到,比如如何在不修改原对象的基础上,重新生成一个一模一样的对象,加以利用,又或是,如何巧妙地运 ...

  8. 浅谈Object.assign()

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

  9. js 深冻结 与 浅冻结 Object.freeze

    1.深冻结 <!DOCTYPE html> <html> <head> <meta charset="utf-8" /> <t ...

随机推荐

  1. Android 实现页面跳转并传递参数教程

    首先我们来看一下实现的功能:     第二,我们看一下实现这个功能,总共会接触到哪些文件和代码. 1.实现本功能总共涉及如下6个文件 2.实现本功能,总共涉及如下6个文件中的如下代码: (1) 效果: ...

  2. C#编程(七十三)----------浅析C#中内存管理

    浅析C#中内存管理 前言:个人觉得C#吸收了各种语言的优点,可谓集大成者,但是不知但,这种集所有语言于一身的情况是好是坏.C#编程的一个优点就是程序员不需要关心具体的内存管理,尤其是垃圾收集器会处理所 ...

  3. WordPress主题开发:style.css主题信息标记

    在最简单的情况下,一个WordPress主题由两个文件构成: index.php ------------------主模版 style.css -------------------主样式表 而且s ...

  4. Base64 JAVA后台编码与JS前台解码(解决中文乱码问题)

    中文通过Java后台进行Base64编码后传到前台,通过JS进行Base64解码时会出现中文乱码的问题,被这个问题也是困扰了几天,使用jquery.base64.js只能转码非中文字符,经过搜集各种方 ...

  5. UITableView加载网络数据的优化

    UITableView加载网络数据的优化 效果 源码 https://github.com/YouXianMing/Animations // // TableViewLoadDataControll ...

  6. ExtJS 4.2 教程-08:布局系统详解

    ExtJS 4.2 系列教程导航目录: ExtJS 4.2 教程-01:Hello ExtJS ExtJS 4.2 教程-02:bootstrap.js 工作方式 ExtJS 4.2 教程-03:使用 ...

  7. 应用内截屏的代码,在Activity中测试可用

    截屏功能让我十分头疼,想做个无需root的又找不到资料.这里暂且分享一个无需root的,在应用内截屏的代码,本文转自:http://blog.csdn.net/csh159/article/detai ...

  8. HTML5 本地文件操作之FileSystemAPI整理(一)

    一.请求配额 DeprecatedStorageInfo对象 window.webkitStorageInfo:当使用持久存储模式时需要用到该对象的接口 方法: 1.requestQuota(type ...

  9. Netty端口被占用问题

    问题:   最近发现Netty项目每次发布的时候Netty在重启时都会报端口被占用的异常, 需要过十几秒左右手动重启一遍, Netty才能恢复正常 目前猜测是由于Tomcat_restart的时候Ne ...

  10. 使用idea 在springboot添加本地jar包的方法

    原文地址;https://blog.csdn.net/huxiaodong1994/article/details/80702278 1.首先在与src同级的目录下新建一个lib目录,然后将本地jar ...