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

栏目: JavaScript · 发布时间: 6年前

内容简介:文/北妈

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

文/北妈

阅读本文需要  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的值已经固定,不可改变。

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

但是:

const  num = {a:1000};

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

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

-----

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

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

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

热门阅读

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

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

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

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

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

长按扫码关注我

一个不一样的帅码农

每天有惊喜

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

也是对我的认可 你别自以为是:ES6误区 之 Object.assign()、const


以上就是本文的全部内容,希望本文的内容对大家的学习或者工作能带来一定的帮助,也希望大家多多支持 码农网

查看所有标签

猜你喜欢:

本站部分资源来源于网络,本站转载出于传递更多信息之目的,版权归原作者或者来源机构所有,如转载稿涉及版权问题,请联系我们

C++ Primer 中文版(第 5 版)

C++ Primer 中文版(第 5 版)

[美] Stanley B. Lippman、[美] Josée Lajoie、[美] Barbara E. Moo / 王刚、杨巨峰 / 电子工业出版社 / 2013-9-1 / CNY 128.00

这本久负盛名的 C++经典教程,时隔八年之久,终迎来史无前例的重大升级。除令全球无数程序员从中受益,甚至为之迷醉的——C++ 大师 Stanley B. Lippman 的丰富实践经验,C++标准委员会原负责人 Josée Lajoie 对C++标准的深入理解,以及C++ 先驱 Barbara E. Moo 在 C++教学方面的真知灼见外,更是基于全新的 C++11标准进行了全面而彻底的内容更新。......一起来看看 《C++ Primer 中文版(第 5 版)》 这本书的介绍吧!

在线进制转换器
在线进制转换器

各进制数互转换器

Markdown 在线编辑器
Markdown 在线编辑器

Markdown 在线编辑器

正则表达式在线测试
正则表达式在线测试

正则表达式在线测试