优秀的编程知识分享平台

网站首页 > 技术文章 正文

前端笔记-ES6、ES7、ES8、ES9、ES10新特性

nanyue 2024-07-20 23:48:40 技术文章 9 ℃

ES6

https://es6.ruanyifeng.com/
https://www.cnblogs.com/theblogs/p/10575845.html

ES7

ES7在ES6的基础上添加三项内容:求幂运算符(**)、Array.prototype.includes()方法、函数作用域中严格模式的变更。
幂运算:

3**2 // 9

includes:

[1, 2, 3].indexOf(3) > -1 // true
等同于:
[1, 2, 3].includes(3) // true

ES8

async、await异步解决方案

在ES6中为了解决回调的书写方式,引入了Promise的then函数,业务逻辑很多的时候,需要链式多个then函数,语义会变得很不清楚。

new Promise((resolve, reject) => {this.login(resolve)})
.then(() => this.getInfo())
.then(() => {// do something})
.catch(() => { console.log("Error") })

ES8中把async和await变得更加方便,它其实就是Generator的语法糖。async/await是写异步代码的新方式,以前的方法有回调函数和Promise。相比于Promise,它更加简洁,并且处理错误、条件语句、获取中间值都更加方便。

Object.entries():

该方法会将某个对象的可枚举属性与值按照二维数组的方式返回。(如果目标对象是数组,则会将数组的下标作为键值返回)

Object.values():

它的工作原理和Object.entries()方法很像,但是它只返回键值对中的值,结果是一维数组

Object.values({one: 1, two: 2})    // [1, 2]
Object.values({3: 'a', 1: 'b', 2: 'c'}) // ['b', 'c', 'a'] 
Object.extries([1, 3])     //[1, 3]

字符串填充padStart()、padEnd():

ES8提供了新的字符串填充方法,该方法可以使得字符串达到固定长度。它有两个参数,字符串目标长度和填充内容。

'react'.padStart(10, 'm')      //'mmmmmreact'
'react'.padEnd(10, 'm')       //' reactmmmmm'
'react'.padStart(3, 'm')    // "react" --已经大于了3个长度了故原样输出

Tags:

最近发表
标签列表