es6 对象中是否有键值_干货| ES6/ES7好玩实用的特性介绍
![](/assets/blank.gif)
本文介绍一些ES6/ES7好玩实用又简单的特性,或许对写代码的效率也有一定帮助噢。
ES6/ES7的出现已经有一段时间了,里面的一些新特性你们是否了解呢?本骚年将结合自身的一些使用经历介绍一些简单实用的新特性/语法糖。
基础常用的一些如let
、const
等这里就不详细介绍了,关于ES6/ES7的一些具体说明介绍大家可以参考ECMAScript 6 入门。
「解构」知多少
解构赋值
- 数组和对象
数组的变量的取值与位置相关,而对象的属性与变量名有关。
![](/assets/blank.gif)
数组和对象的解构赋值其实用得不多,毕竟这样代码阅读性可能不大好,尤其数组的解构赋值和变量顺序紧紧关联。
默认值
解构赋值允许指定默认值。我猜你们很多都用到对象的默认值,数组的用过吗?
![](/assets/blank.gif)
从上面代码我们可以发现两点:
- ES6内部使用严格相等运算符(
===
),如果一个数组成员不严格等于undefined
,默认值是不会生效的。 - 默认值是表达式时候,会遵守惰性求值(只有在用到的时候,才会求值)。
函数参数的解构
函数参数的解构就比较有趣了,当然应用场景会更多。
参数解构,同时设置默认值,再也不需要长长的if判断和处理了:
![](/assets/blank.gif)
数组和对象
别小看这三个点...
,身为拓展运算符,它们还是很方便的。
![](/assets/blank.gif)
这里面需要注意的是:
- 解构赋值必须是最后一个参数,否则会报错。
- 解构赋值不会拷贝继承自原型对象的属性(即不会继承来自
__proto__
的属性)。
配合解构赋值
解构赋值配合拓展运算符,还可以很方便地扩展某个函数的参数,引入其他操作。
![](/assets/blank.gif)
快速拷贝拓展对象
- 取出参数对象的所有可遍历属性,拷贝到当前对象之中。
![](/assets/blank.gif)
快速合并两个对象。
![](/assets/blank.gif)
我们会发现,使用拓展运算符...
进行对象的拷贝和合并,其实与ES6中另外一个语法糖Object.assign()
效果一致:
![](/assets/blank.gif)
![](/assets/blank.gif)
需要注意的有:
- 它们都只会拷贝源对象自身的并且可枚举的属性到目标对象身上
- 它们都是浅拷贝,即对象数组等将拷贝引用值
- 对多个对象进行拷贝时,相同的属性名,后面的将覆盖前面的
rest参数
ES6引入rest参数(形式为...rest
),用于获取函数的多余参数,这样就不需要使用arguments
对象了。
rest参数搭配的变量是一个数组,该变量将多余的参数放入数组中。
![](/assets/blank.gif)
替换arguments
:
![](/assets/blank.gif)
同样要注意的是,rest只能是最后一个参数。
说到arguments
,这里插播一下尾调用优化。
- 尾递归
递归非常耗费内存,因为需要同时保存成千上百个调用帧,很容易发生“栈溢出”错误(stack overflow)。
但对于尾递归来说,由于只存在一个调用帧,所以永远不会发生“栈溢出”错误。
- 尾调用优化
ES6的尾调用优化只在严格模式下开启,正常模式是无效的。因为在正常模式下,函数内部有两个变量,可以跟踪函数的调用栈:
func.arguments
:返回调用时函数的参数。func.caller
:返回调用当前函数的那个函数。
一起来「拓展」
对象的拓展
对象拓展了一些很方便的属性,简化了我们很多的工作。常用的:
Object.assign()
用于将所有可枚举的属性的值从一个或多个源对象复制到目标对象。它将返回目标对象。
Object.keys()
返回一个数组,成员是参数对象自身的(不含继承的)所有可遍历(enumerable)属性的键名。
听着好复杂,但是很多时候当我们需要遍历某个对象的时候就很方便了:
![](/assets/blank.gif)
Object.values()
:与Object.keys()
相似,返回参数对象属性的键值Object.entries
:同上,返回参数对象属性的键值对数组
数组的拓展
数组也拓展了一些属性:
Array.from()
:用于将两类对象转为真正的数组Array.of()
:用于将一组值,转换为数组- 其它的
entries()
、keys()
、values()
等
这里只介绍可能比较常用的:
Array.find()
:用于找出第一个符合条件的数组成员
参数是一个回调函数,所有数组成员依次执行该回调函数,直到找出第一个返回值为true的成员,然后返回该成员。如果没有符合条件的成员,则返回undefined
。
![](/assets/blank.gif)
Array.findIndex()
:用法与find方法非常类似,返回第一个符合条件的数组成员的位置,如果所有成员都不符合条件,则返回-1。Array.includes()
:返回一个布尔值,表示某个数组是否包含给定的值
数据结构的拓展
Set
它类似于数组,但是成员的值都是唯一的,没有重复的值。Set
本身是一个构造函数,用来生成Set
数据结构。
从此我们的去重就可以这样写了:
![](/assets/blank.gif)
Map
JavaScript的对象(Object
),本质上是键值对的集合(Hash结构),但是传统上只能用字符串当作键。
![](/assets/blank.gif)
原因是对象只接受字符串作为键名,所以obj被自动转为字符串[object Object]
。
Map
数据结构类似于对象,也是键值对的集合,但是“键”的范围不限于字符串,各种类型的值(包括对象)都可以当作键。
也就是说,Object
结构提供了“字符串—值”的对应,Map结构提供了“值—值”的对应,是一种更完善的Hash结构实现。
关于简写那些事
属性的简写
ES6允许直接写入变量和函数,作为对象的属性和方法。
![](/assets/blank.gif)
箭头函数
ES6允许使用“箭头”(=>
)定义函数。
![](/assets/blank.gif)
箭头函数有几个使用注意点:
- 函数体内的this对象,就是定义时所在的对象,而不是使用时所在的对象。
- 不可以当作构造函数,即不可以使用new命令。
- 不可以使用arguments对象,该对象在函数体内不存在。如果要用,可以用Rest参数代替。
最关键的是第一点:this对象的指向是可变的,但是在箭头函数中,它是固定的。
![](/assets/blank.gif)
结束语
这里我们介绍了ES6/ES7一些基础比较普遍的点,像解构、拓展表达式(...
)、数组对象等拓展属性等等,基本上是一些提高开发效率,减少冗余重复的代码的新特性和新语法。
而像改变我们设计思维、甚至是解决方案的则是一些较复杂的,像Class
、Module
、Promise
、async/await
等等,咱们分篇讲,或者查ECMAScript 6 入门手册吧哈哈。
文章来源:腾讯工程师王贝珊
es6 对象中是否有键值_干货| ES6/ES7好玩实用的特性介绍相关推荐
- es6 对象中是否有键值_js/es6判断对象是否为空,并判断对象是否包含某个属性...
js判断对象为空以及有好几种方法了,但是个人觉得不是特别方便. 比如: 1.把对象通过 JSON.stringify 转为字符串,再判断字符串是否等于 " {} " 2.for i ...
- java后台传一个对象到前台_前台判断对象中的一个布尔值_前后台分离的项目中,如何优雅的传输boolean类型的参数...
前言:需求 这是一个Spring + Angular前后台分离的项目,目前有一个查看作业列表的功能,并且已经设置了分页和几个查询参数,如图. 现在需要增加一个已评阅和未评阅的查询功能. Work实体的 ...
- 爬虫-在请求头中添加cookie键值对 访问登陆后可见的页面
关于cookie >笔记 >理解 cookie相当于病人手里的病历 cookie的格式 请求头中添加cookie键值对 练习-不使用cookie访问个人中心 访问人人网个人中心 结果是得到 ...
- html 表单内容怎么获取不到,jquery中formdate一直获取不到对象中的[0]的值 包括本身也是一个空的数据怎么办?...
jquery中formdate一直获取不到对象中的[0]的值 包括本身也是一个空的数据怎么办? 再做一个前台的ajax方法 查网上用formdate方法上传.可是进了接口之后一直在控制台获取不到for ...
- vue 取数组第一个值_vue遍历对象中的数组取值示例
前几天小项目,没考虑周全,让后端改接口,改成数组中包含对象中包含数组的形式,后来越琢磨越不对,后台把所有数据放在了一个对象里,我拿弹窗数据不好拿,索性又改了回来,把后端折腾够呛,自己也折腾够呛,发上来 ...
- js检测数组对象中是否有重复值
判断数组对象里的某个值是否都是同一个值 isRepeat=(arr)=> {var hash = {};for(let i=0;i<arr.length;i++){if (!hash[ar ...
- python字典怎么添加值_python字典中如何添加键值对
添加键值对 首先定义一个空字典 1 >>> dic={} 直接对字典中不存在的key进行赋值来添加 1 2 3 >>> dic['name']='zhangsan' ...
- python 如何定义空字典_python字典中如何添加键值对
添加键值对 首先定义一个空字典 1 >>> dic={} 直接对字典中不存在的key进行赋值来添加 1 2 3 >>> dic['name']='zhangsan' ...
- cockroachdb mysql_CockroachDB学习笔记——[译]CockroachDB中的SQL:映射表中数据到键值存储...
CockroachDB学习笔记--[译]CockroachDB中的SQL:映射表中数据到键值存储 原文标题:SQL in CockroachDB: Mapping Table Data to Key- ...
最新文章
- 云计算数据管理的4个关键因素
- Twitter Storm 序列化
- 随机生成一组不重复的随机数组
- c语言经典50道例题---精华篇
- 打印机更换感光鼓单元k_打印机换硒鼓步骤:老司机手把手教你
- oracle IMP命令导入导出DMP文件
- 计算机任务管理器恢复默认,我的电脑中的任务管理器怎么打不开了,总是提示的“任务管理器已被系统管理员停用”,请问如何才能使任务管理器恢复正常。...
- 计算机在保险的应用,浅谈计算机信息系统在医疗保险中的应用
- Python小工具:批量给视频加水印
- vue js 汉字转拼音
- BZOJ 4946: [Noi2017]蔬菜 模拟费用流
- 《全国青少年软件编程等级考试》2021年3月C语言一级真题(含答案)
- 大唐杯比赛辅导,国一选手
- W3af简单使用教程
- Trajectory Optimization
- Consult IDE log for more details (Help | Show Log),read failed, socket might closed or timeout,
- 目标文件夹访问被拒绝
- Java基础代码入门练习题(你也来试试?)
- 电子招标采购系统—企业战略布局下的采购寻源
- ASN.1编码格式介绍
热门文章
- 理解分布式一致性:Paxos协议之Cheap Paxos Fast Paxos
- python tkinter控件_python GUI作业:使用tkinter的重要控件
- 多线程基础-实现多线程的两种方式(二)
- 深入浅出理解 Variable used in lambda expression should be final or effectively final
- 【简洁代码】1071 小赌怡情 (15分)_22行代码
- priority_queue优先队列的用法总结
- 数据结构题:由逆置数组方法——逆置线性表L的所有元素
- 初识BGP外部网关协议(二)
- WINDOWS下与LINUX下写C程序的区别
- find linux 指定后缀_linux下find(文件查找)命令的用法总结