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

譬如常用的对象赋值操作

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

譬如以下

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. 一共81个,开源大数据处理工具汇总(下),包括日志收集系统/集群管理/RPC等

    作者:大数据女神-诺蓝(微信公号:dashujunvshen).本文是36大数据专稿,转载必须标明来源36大数据. 接上一部分:一共81个,开源大数据处理工具汇总(上),第二部分主要收集整理的内容主要 ...

  2. C#判断字符串的是否是汉字

    //第一种方法:正则表达式 private bool IsChinese(string Text) { ; i < Text.Length; i++) { if (Regex.IsMatch(T ...

  3. Fiddler抓包12-AutoResponder返回本地数据(mock)

    前言 mock可以说是面试必问的话题的,我第一次接触mock的时候也是一脸懵逼.虽然fiddler工具用了很久,里面的打断点,设置自动返回数据功能都用过. mock说的通俗一点就是模拟返回数据,只是面 ...

  4. Weblogic跨域session冲突解决办法

    一.现象: 在WebLogic中,有两个不同域A(端口:9000)和B(端口:8000),应用CA在域A中,应用CB在域B中,进行如下操作: 1.先登录应用CA,再登录应用CB,然后,切换回应用CA, ...

  5. Android之录音工具类

    /** * 录音工具类 * * @author rendongwei * */ public class RecordUtil { private static final int SAMPLE_RA ...

  6. iis 7上发布mvc报错:403.14-Forbidden Web 服务器被配置为不列出此目录的内容

    iis 7上发布mvc报错:403.14-Forbidden Web 服务器被配置为不列出此目录的内容 提示里面的解决方法是: 如果不希望启用目录浏览,请确保配置了默认文档并且该文件存在. 使用 II ...

  7. 使用samba进行共享文件操作步骤

    使用samba进行共享文件操作步骤 1.验证方式 设置用户访问samba server的验证方式,一共有四种验证方式. a. share:用户访问samba server不需要提供用户名和密码,安全性 ...

  8. 第一章 Java加解密简介

    1.加密算法: 移位.替代(古典加密) 对称加密:DES.AES 非对称加密:RSA 散列函数算法(单向加密):MD5.SHA.Mac 数字签名算法:RSA.DSA 其中,前三种主要完成数据的加解密: ...

  9. 二叉树 遍历 先序 中序 后序 深度 广度 MD

    Markdown版本笔记 我的GitHub首页 我的博客 我的微信 我的邮箱 MyAndroidBlogs baiqiantao baiqiantao bqt20094 baiqiantao@sina ...

  10. javascript定义对象写法

    javascript定义对象的几种简单方法 1.构造函数方式,全部属性及对象的方法都放在构造方法里面定义 优点:动态的传递参数 缺点:每创建一个对象就会创建相同的方法函数对象,占用大量内存 funct ...