ES6 深拷贝_你别自以为是:ES6误区 之 Object.assign()、const

2b9f83e8b194175446c367e139050597.png

文/北妈

阅读本文需要 2.3分钟

很久没发技术文,今天北妈在新开一个技术系列:“别自以为是,1分钟走出JS常见误区“,里面我会每期挑选几个常见基础属性,讲一讲里面最容易被人忽略和认知错误的误区。

帮助大家更好的掌握基础,这样在面试和实际项目中可以避免很多低级错误和节省时间,欢迎拍砖甚至投稿。

今天说一下关于ES6 就引入的最常用的关于操作对象的新属性:

Object.assign()、const

1、大家知道 Object.assign() 方法用于将所有可枚举属性的值从一个或多个源对象复制到目标对象。它将返回目标对象。

MDN官方文档的例子就已经说明一切 

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 }

这个属性在ES6才引入,是一个不错的操作js对象格式的新属性。里面还涉及到深拷贝和浅拷贝,替换对象等众多概念。

Object.assign 方法只会拷贝源对象自身的并且可枚举的属性到目标对象。

这个属性在ES6才引入,是一个不错的操作js对象格式的新属性。里面还涉及到深拷贝和浅拷贝,替换对象等众多概念。

在ES5里面要实现和Object.assign 相关的功能要用到  Object.defineProperty很复杂的去实现。

而Object.assign 最常用的功能是将新的对象或者json属性 复制和追加到老的对象,然后生成一个新的整合对象。

项目里,很常用的就是请求传参时,追加各种筛选条件了,这个大家应该深有体会。

重要描述:如果目标对象中的属性具有相同的键,则属性将被源对象中的属性覆盖。后面的源对象的属性将类似地覆盖前面的源对象的属性。

意思是如果原对象利用有j= {a: 1} ,新对象也有{a:2}那么 就会直接覆盖,相当于是 j.a =2.这个在用的过程中是没什么疑问的,正常覆盖就好。

但一定要注意这个误区:比如:json1 = {a:1, b:null } ,那么 直接  

Object.assign(json1, {a:2,b:3} );  会发生什么?

大部分人不看文档 会说:直接覆盖被 最后是{a:2,b:3},但结果事与愿违,因为如果是NULL 这个罪魁祸首,assign 属性是不会生效的,这个value 不会生效,因为官方有一句:

注意,Object.assign 不会跳过那些值为 null 或 undefined 的源对象。

所以一定要注意,检查后端返给你的json数据里,有没有属性值为 null 或者 undefined,这个相当重要,不然会引来很多麻烦和bug。

这也是为啥一直强调,null 和undefined 是绝对禁止出现在正常的数据格式中的。这个大家一定要注意,因为前一段我们后端居然就返回了null ,,无语!!!

2、大家知道 const 是类型声明,大家再熟悉不过,也是es6才有的新属性,之前都是万恶的var,随意改变作用于和值。有个const,相当于给变量加了一个锁,但是

const声明创建一个值的只读引用。但这并不意味着它所持有的值是不可变的,只是变量标识符不能重新分配。例如,在引用内容是对象的情况下,这意味着可以改变对象的内容(例如,其参数)。

 比如:


const  num = 1000;

num = 2000;
//  会报错 ,因为在同一作用于,num的值已经固定,不可改变。

986c26d98e7fb39d9a705324b2790b99.png

但是:

const  num = {a:1000};

num.a = 2000 ;
//  这个不会报错 ,因为在其属性值是可以被改变的,也就是文档里说的改变对象内容,但你不能改变他在内存中的表示和位置。

6a0b64a9e58bb7a4b872320ecdc4a001.png

-----

这个其实看似很简单,有很多人并不理解,以为看到const 就说明这个变量被锁定了,该改变对象也不行,直接let 就行了,其实不对的,const照样可以被改变,但记住,只是改变他的值。

这些在面试题或者平时开发都会遇到,算是常识的自以为是误区,大家注意,也欢迎大家对平时积累的累死误区,告诉我,我更多的公布出来。

每日金句世界上没有恒久不变的东西,包括爱情和承诺。唯一不变的就是这个世界永远在变

热门阅读

空闲时间不要接私活,要提升自己

月薪5k的国企, 和月薪2万的私企,我选国企...

低学历者生存困难 程序员尤其明显

每天只想听你们说:小北最帅!

1e45d5bca05c80971d00ad62f9f4bc93.png

长按扫码关注我

一个不一样的帅码农

每天有惊喜

我觉得 「在看」与「转发」

也是对我的认可 6ac779bc98ee02fadd53e6877d29f6ec.gif

本文来自互联网用户投稿,该文观点仅代表作者本人,不代表本站立场。本站仅提供信息存储空间服务,不拥有所有权,不承担相关法律责任。如若转载,请注明出处:http://www.mzph.cn/news/558477.shtml

如若内容造成侵权/违法违规/事实不符,请联系多彩编程网进行投诉反馈email:809451989@qq.com,一经查实,立即删除!

相关文章

opengl实现三维动画简单代码_使用Python简单实现马赛克拼图!内附完整代码

今天小编带大家使用python简单实现马赛克拼图,内容比以往会稍长一些,各位看官老爷可以慢慢细读,若有不足之处还望请斧正,闲话不多说,请看文章。先看原图:效果图:思路:拼图的原理其实…

耳机不支持android,安卓手机为什么不能用EarPods耳机 原因分析【图解】

相信很多人都有这样的疑问,iPhone和安卓手机的耳机孔是一样的, 安卓手机为什么不能用EarPods耳机? 这是什么原因?本次在这里就给大家分析下。安卓手机为什么不能用EarPods耳机?目前市面上大多数的手机仍采用3.5mm的耳机接口。但很多人不知道…

python自然语言处理库_Python 自然语言处理(NLP)工具库汇总

最近正在用nltk 对中文网络商品评论进行褒贬情感分类,计算评论的信息熵(entropy)、互信息(point mutual information)和困惑值(perplexity)等(不过这些概念我其实也还理解不深...只是…

android代码清除锁屏密码,清除Android手机锁屏密码的三个小妙招

大家有没有把锁屏密码忘记过?发生这种情况的概率应该很小吧,但为了以防万一大家还是看一下本文的解锁教程吧!这种解锁的方法要求,被锁上的手机是联网的状态,并登录了google账号,账号密码已知。如果以上条件…

c语言数组最大可定义多少位_C语言求数组的最大值三种方法

/* 黄哥Python培训 黄哥所写*/#include int maxValue(int* arr, int n);int maxRecursionValue(int* arr, int n);int maxDividAndConquerValue(int* arr, int left, int right);int main(void) { int arr[] {500, -1, 30, 7, 99, 12}; printf("数组中的元素最大…

android 百度map 一个layout加载多个mapview,android 百度地图API 使用Marker和InfoWindow

前言:在android开发过程中,百度地图的使用是比较普遍的,但是如何使用,使用什么版本的百度API还是需要一些讲究。在项目过程中,需要用到百度地图的marker和InfoWindow的功能。标注覆盖物(百度地图官方图)布局文件很简单…

python数据分析实验报告_Python 数据分析入门实战

本训练营中,我们将学习怎么样使用 Python 进行数据分析。课程将从数据分析基础开始,一步步深入讲解。从 Python 的基础用法到数据分析的各种算法,并结合各种实例,讲解数据分析过程中的方方面面。 课程内容将分为以下四个部分&…

go 写文件_如何在 Ubuntu 20.04 上安装 Go

本文最先发布在:如何在 Ubuntu 20.04 上安装 Go​www.itcoder.techGo,通常被称为 golang,它是一门由 Google 创建的现代化的开源编程语言,它允许你构建实时并且高效的应用。很多流行的应用程序,例如 Kubernetes&#x…

java汽车管理系统_坑爹!花费2亿耗时2年,网站没建完Java都写不好,顶级咨询公司埃森哲被告上法庭...

乾明 发自 凹非寺 量子位 报道 | 公众号 QbitA耗费2个多亿,耗时2年多,连一个可用的网站或者APP都没有交付出来。想要完工?那就再交1000万美元。这件事的受害方、美国汽车租赁公司赫兹(Hertz)一怒之下, 将顶级咨询公司埃森哲(Accen…

Android接口一般定义格式,Android开发规范

原标题:Android开发规范一.书写规范1. 编码方式统一用UTF-8.2. 花括号不要单独一行,和它前面的代码同一行。而且,花括号与前面的代码之间用一个空格隔开。3. 空格的使用if、else、for、switch、while等逻辑关键字与后面的语句留一个空格隔开。…

c++将小写转换为大写函数_必须掌握的基础函数组合应用技巧,提高效率,准时下班...

点击上方"Excel函数公式"免费订阅货币,生活中必不可少的东西,是物品价值等的直接体现,在实际的工作中也经常遇到,如果给定的数据中,要对其进行格式的设置,你会怎么做?一、Dollar函数&…

jenkins使用哪个版本号_Linux下安装JDK及jenkins

往期相关文章推荐:Linux ping不通域名安装JDK依赖(8/11)一.(推荐)// 查看yum仓库中可安装的jdk版本yum -y list java*// 安装示例yum install -y java-1.8.0-openjdk-devel.x86_64java --version 二.1.获取JDK安装包,可以win下下载,再用scp…

骁龙660鸿蒙系统,骁龙660双摄测试机偷跑 核心数/GPU证实

中关村在线消息:高通会在今年推出一款全新的中端处理器——骁龙660。此前有网友在微博上曝光一组疑似骁龙660的跑分,安兔兔总成绩为105576分。现在,微博上又出现搭载骁龙660双摄工程机的谍照,该机支持2K分辨率,采用6GB…

tensorflow 模型可视化_基于tensorflow-2.x的yolov3实现

YOLO v3可以说是单阶段检测器中的佼佼者,融合了多个框架的优势,在保持模型简洁性的同时,性能上也在当时达到了stoa。YOLO v3的主干网络是darknet-53的前面的52层,所以它是一个全卷积网络,并且为了降低池化带来的梯度负…

android闹钟延时,android闹钟定时启动延时或者直接不启动

自己写的android闹钟功能,需要实现timepicker选择完成后将选择的时间设定为闹钟的启动时间,但是不管怎么改总是没法定时启动alertDialog new AlertDialog.Builder(context).setView(view).setCustomTitle(viewTitle).setNegativeButton("确定"…

switch语句可以被代替吗_爬楼梯可以代替跑步吗?

转载:有很多人在下雨天选择爬楼梯作为运动方式,前几天就有人问老王:爬楼梯可以代替跑步吗?爬楼梯是在一个坡度上下移动,上楼梯时,腿部需要承受自身体重1.5-2.5倍的重量;下楼梯时则要承受自身体重…

gsonformat插件_吐血推荐珍藏的IDEA插件

之前给大家推荐了一些我自己常用的VS Code插件,很多同学表示很受用,并私信我说要再推荐一些IDEA插件。作为一名职业Java程序员/业余js开发者,我平时还是用IDEA比较多,所以也确实珍藏了一些IDEA插件。今天就一并分享给大家。在最开…

html城市手机搜索,原生js实现html手机端城市列表索引选择城市

本文实例为大家分享了js实现手机端城市列表索引选择城市的具体代码,供大家参考,具体内容如下html部分:定位城市上海市css部分:*{margin: 0;padding: 0;list-style: none;}html{font-size: 12px;}body {background-color: #f5f5f5;…

html 图片使用scale,缩放:scale() - CSS3 | 绿叶学习网

在CSS3中,我们可以使用transform属性的scale()方法来实现元素的缩放效果。缩放,指的是“缩小”和“放大”的意思。语法:transform: scaleX(x); /*沿X轴方向缩放*/transform: scaleY(y); /*沿Y轴方向缩放*/transform: scale(x, y); /*沿X轴和Y…

dbeaver无法修改表数据_隐藏彩蛋:你知道python有一个内置的数据库吗?

全文共2520字,预计学习时长7分钟如果你是软件开发人员,相信你一定知道甚至曾经使用过一个非常轻量级的数据库——SQLite。它几乎拥有作为一个关系数据库所需的所有功能,而且这些有功能都保存在一个文件中。下面是一些官方网站显示可以使用SQL…