你别自以为是：ES6误区之 Object.assign()、const

Love The Way You Lie 2022-01-15 06:31 189阅读 0赞

![640?wx\_fmt=jpeg][640_wx_fmt_jpeg]

文/北妈

阅读本文需要 2.3分钟

**一**

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

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

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

Object.assign()、const

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

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

这个属性在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的值已经固定，不可改变。

![640?wx\_fmt=png][640_wx_fmt_png]

但是：

const  num = \{a:1000\}；

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

![640?wx\_fmt=png][640_wx_fmt_png 1]

\-----

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

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

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

**热门阅读**

[空闲时间不要接私活，要提升自己][Link 1]

[月薪5k的国企, 和月薪2万的私企，我选国企][5k_ _2]...

[低学历者生存困难 程序员尤其明显][Link 2]

**每天只想听你们说：****小北最帅！**

![640?wx\_fmt=jpeg][640_wx_fmt_jpeg 1]

长按扫码关注我

一个不一样的帅码农

每天有惊喜

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

也是对我的认可 **![640?wx\_fmt=gif][640_wx_fmt_gif]**

[640_wx_fmt_jpeg]: /images/20220115/0ce9324e7a5749448f8212af875c0322.png
[640_wx_fmt_png]: /images/20220115/3c8b917163874eea937334ac1a3cd65b.png
[640_wx_fmt_png 1]: /images/20220115/9073f3fc562045c0a1ed38eecff6dbaa.png
[Link 1]: https://blog.csdn.net/csdnsevenn/article/details/80823441
[5k_ _2]: http://mp.weixin.qq.com/s?__biz=MzI5ODM3MjcxNQ==&mid=2247486651&idx=1&sn=9ab1b200ba6e1e2cab1354ed1ea00cc6&chksm=eca797bfdbd01ea9ffd13e6b0a45caed35c2ceca2a42a9e1ccfd75e3111b701658ab75619ffb&scene=21#wechat_redirect
[Link 2]: http://mp.weixin.qq.com/s?__biz=MzI5ODM3MjcxNQ==&mid=2247486800&idx=1&sn=bda9d0d2f9c150dfeb9ef9dbe99dcb86&chksm=eca79654dbd01f4269a9a3ae9784cdbcd8729f526f26f94521d8101d0516050b4a5e713a8a59&scene=21#wechat_redirect
[640_wx_fmt_jpeg 1]: /images/20220115/61b402c27679463ea29c2afc7581e930.png
[640_wx_fmt_gif]: /images/20220115/05051b2c013543e0b9816c14ca9d908a.png