js - object.assign 以及浅、深拷贝
浅(引用)拷贝:共用同一内存地址,你改值我也变
譬如常用的对象赋值操作
深拷贝:深拷贝即创建新的内存地址保存值(互不影响)
譬如以下
const shallBasicCopy = obj => {
JSON.parse(JSON.stringify(obj))
}
关于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 以及浅、深拷贝的更多相关文章
- Object.assign()
https://developer.mozilla.org/zh-CN/docs/Web/JavaScript/Reference/Global_Objects/Object/assign 说明 Ob ...
- Object.assign()的使用
一.Object.assign()对象的拷贝 1 Object.assign() 方法用于将所有可枚举属性的值从一个或多个源对象复制到目标对象.它将返回目标对象. 2 Object.assign(ta ...
- 用浅/深拷贝、和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]; ...
- 【JS】307- 复习 Object.assign 原理及其实现
点击上方"前端自习课"关注,学习起来~ }let b = { name: "muyiy", book: { title: " ...
- JS Object Deep Copy & 深拷贝
JS Object Deep Copy & 深拷贝 针对深度拷贝,需要使用其他方法 JSON.parse(JSON.stringify(obj));,因为 Object.assign() 拷贝 ...
- JS Object Deep Copy & 深拷贝 & 浅拷贝
JS Object Deep Copy & 深拷贝 & 浅拷贝 https://developer.mozilla.org/zh-CN/docs/Web/JavaScript/Refe ...
- 浅谈JS中的浅拷贝与深拷贝
前端工程师应该都比较熟悉浅拷贝和深拷贝的概念,在日常业务代码的过程中,特别是做数据处理的时候,经常行的会遇到,比如如何在不修改原对象的基础上,重新生成一个一模一样的对象,加以利用,又或是,如何巧妙地运 ...
- 浅谈Object.assign()
Object.assign()方法用于将所有可枚举属性的值从一个或多个源对象复制到目标对象.返回值为目标对象. 1 Object.assign 是 ES6 新添加的接口,主要的用途是用来合并多个 Ja ...
- js 深冻结 与 浅冻结 Object.freeze
1.深冻结 <!DOCTYPE html> <html> <head> <meta charset="utf-8" /> <t ...
随机推荐
- 关于UIImageView的显示问题——居中显示或者截取图片的中间部分显示
我们都知道在ios中,每一个UIImageView都有他的frame大小,但是如果图片的大小和这个frame的大小不符合的时候会怎么样呢?在默认情况,图片会被压缩或者拉伸以填满整个区域. 通过查看UI ...
- 女子监狱第一季/全集Orange Is the New Black迅雷下载
本季第一季 Orange Is the New Black 1 (2013) 看点:该剧描述主人公Piper Chapman(Taylor Schilling)在大学里结识了毒贩Alex(Laura ...
- Material Designer的低版本兼容实现(八)—— Flat Button
除了中规中矩的矩形按钮外,5.0中将按钮扁平化,产生了一个扁平按钮——Flat Button.这个按钮降低了很多存在感,主要用于在对话框,提示栏中.让整个界面减少层级.今天说的就是它的用法. 这 ...
- 用layer-list实现图片旋转叠加、错位叠加、阴影、按钮指示灯
先来看看一个简单的文件: <?xml version="1.0" encoding="utf-8"?> <layer-list xmlns:a ...
- 《图解CSS3:核心技术与案例实战》
<图解CSS3:核心技术与案例实战> 基本信息 作者: 大漠 丛书名: Web开发技术丛书 出版社:机械工业出版社 ISBN:9787111469209 上架时间:2014-7-2 出版日 ...
- 深入理解Java Callable接口
概述Callable和Runnbale一样代表着任务,区别在于Callable有返回值并且可以抛出异常.其使用如下: public class CallableDemo { static class ...
- python读取配置文件的方式
python读取配置文件的方式 1.从config.ini中读取,后缀无所谓,文件名字也无所谓,不过config.ini是常用写法,所谓见名知意 config.ini内容: [global] ip = ...
- Chapter 7 -- Functional
Caveats 说明 As of Java 7, functional programming in Java can only be approximated through awkward and ...
- Maven中的库(repository)详解
Maven中的库(repository)是构件(artifact)的集合.构件以一定的布局存储在库中. 本地仓库 vs. 远程仓库 运行Maven的时候,Maven所需要的任何构件都是直接从本地仓库获 ...
- 初识网络进程通信<Heart.X.Raid>
可以这样说:我们在网络上只做一件事,利用各种软件没完没了的相互通信. 对于单机系统而言,进程在系统中有自己唯一的进程号.但在网络环境下,各主机独立分配的进程号不能唯一标识该进程.例如,主机A赋于某进程 ...