本站消息

站长简介/公众号


站长简介:高级软件工程师,曾在阿里云,每日优鲜从事全栈开发工作,利用周末时间开发出本站,欢迎关注我的微信公众号:程序员总部,程序员的家,探索程序员的人生之路!分享IT最新技术,关注行业最新动向,让你永不落伍。了解同行们的工资,生活工作中的酸甜苦辣,谋求程序员的最终出路!

 价值13000svip视频教程,前端大神匠心打造,零基础前端开发工程师视频教程全套,基础+进阶+项目实战,包含课件和源码

  出租广告位,需要合作请联系站长


+关注
已关注

分类  

暂无分类

标签  

暂无标签

日期归档  

2021-05(13)

2021-06(81)

2021-07(13)

2021-08(62)

2021-09(66)

进阶学习10:ECMAScript——ES2016、ES2017新特性

发布于2021-05-30 12:06     阅读(529)     评论(0)     点赞(7)     收藏(2)


目录

一、ES2016

1.数组实例对象的includes方法

2.指数运算符

二、ES2017

1.Object.values

2.Object.entries

3.Object.getOwnPropertyDescriptors

4.String.prototype.padStart / String.prototype.padEnd

5.允许函数参数中添加尾逗号

6.Async / Await


一、ES2016

这是一个小版本,仅包含2个小功能

1.数组实例对象的includes方法

以前检查数组中是否存在某个元素,要用indexOf实现,没有找到会返回-1.但是它不能用来查找数组中的NaN,而includes返回布尔值表示是否存在。还可以用来查找NaN。

  1. //DEMO30
  2. const arr = ['foo',1,NaN,false]
  3. console.log(arr.indexOf('foo'))
  4. console.log(arr.indexOf('bar'))
  5. console.log(arr.indexOf(NaN))
  6. console.log(arr.includes('foo'))
  7. console.log(arr.includes('bar'))
  8. console.log(arr.includes(NaN))

2.指数运算符

以前只能使用Math.pow(底数,指数)来完成,现在可以底数 ** 指数

  1. console.log(Math.pow(2,10))
  2. console.log(2 ** 10)

二、ES2017

这也只是一个小版本,不过页新增了一些有用的小功能

1.Object.values

这是用来获取对象所有值的方法,所有的值放在一个数组中返回。

  1. const obj = {
  2. foo: 'value1',
  3. baz: 'value2'
  4. }
  5. console.log(Object.values(obj))

2.Object.entries

以数组的形式,返回对象当中所有的键值对

  1. const obj = {
  2. foo: 'value1',
  3. baz: 'value2'
  4. }
  5. console.log(Object.entries(obj))
  6. //便于我们用for...of循环遍历
  7. for(let [key,value] of Object.entries(obj)){
  8. console.log(key,value)
  9. }
  10. //因为Map对象就是类似这样的格式,所有可以借助entries吧对象转换为Map
  11. console.log(new Map(Object.entries(obj)))

3.Object.getOwnPropertyDescriptors

这个方法主要的作用是返回属性的描述对象(descriptor)。可以用于浅拷贝一个对象。

  1. //Object.getOwnPropertyDescriptors
  2. const p1 = {
  3. firstName:'Lei',
  4. lastName:'Wang',
  5. get fullName(){
  6. return this.firstName + ' ' + this.lastName
  7. }
  8. }
  9. console.log(p1.fullName)
  10. //这个时候复制的,只是把fullName当成普通属性复制了,所以即时p2的firstName改了名字,但是fullName还是和p1一样
  11. const p2 = Object.assign({},p1)
  12. p2.firstName = 'zce'
  13. console.log(p2)
  14. const descriptors = Object.getOwnPropertyDescriptors(p1)
  15. console.log(descriptors)
  16. const p3 = Object.defineProperties({},descriptors)
  17. p3.firstName = 'zce'
  18. console.log(p3)

4.String.prototype.padStart / String.prototype.padEnd

这是两个字符串填充用的,比如对齐字符串长度。

  1. const books = {
  2. html: 5,
  3. css: 16,
  4. javascript:128
  5. }
  6. for(const [name,count] of Object.entries(books)){
  7. console.log(`${name.padEnd(16,'-')}|${count.toString().padStart(3,'0')}`)
  8. }

5.允许函数参数中添加尾逗号

其实是不影响实际功能上的东西,但是对于我们使用者来说其实还挺方便的。大家写对象或者数组的时候可能比较有感觉,就对象属性很多的时候,可能复制粘贴习惯最后也带个尾逗号,这样以后调整顺序啊什么的也比较方便,道理是一样的。

  1. function foo (
  2. bar,
  3. baz,
  4. ){
  5. console.log(bar,baz)
  6. }
  7. foo(1,2)

6.Async / Await

在我之前的这篇里面有详细的介绍了,这边就不再重复了。

进阶学习7:JavaScript异步编程——Generator异步方案、Async/ Await

https://blog.csdn.net/qq_43106115/article/details/117201178?spm=1001.2014.3001.5501

原文链接:https://blog.csdn.net/qq_43106115/article/details/117337610




所属网站分类: 技术文章 > 博客

作者:西小口到了吗

链接:http://www.qianduanheidong.com/blog/article/115933/0d3e6871baefc5930265/

来源:前端黑洞网

任何形式的转载都请注明出处,如有侵权 一经发现 必将追究其法律责任

7 0
收藏该文
已收藏

评论内容:(最多支持255个字符)