JavaScript|ES7、ES8新特性整理
?ES7 ES7在ES6的基础上添加三项内容：求幂运算符（**）、Array.prototype.includes()方法、函数作用域中严格模式的变更。
- 求幂运算符（**）
Math.pow(2,2);
//4
// ES7
2**2 //4
- Array.prototype.includes()
数组原型的方法,查找一个数值是否在数组中，只能判断一些简单类型的数据，对于复杂类型的数据无法判断。该方法接受两个参数，分别是查询的数据和初始的查询索引值。
[1, 2, 3].indexOf(3) > -1 // true
// 等同于：
[1, 2, 3].includes(3) // true
两种方式的优缺点和使用场景
- 简便性
includes方法略胜一筹，直接返回bool。indexOf需要返回数组下标，我们需要对下标值在进行操作，进而判断是否在数组中。 - 精确性
两者这都是通过===进行数据处理，但是对NaN数值的处理行为不同。includes对NaN的处理不会遵循严格模式去处理，所以返回true。indexOf会按照严格模式去处理，返回-1。
[1, 2, NaN].includes(NaN)// true
[1, 2, NaN].indexOf(NaN)// -1
- 使用场景
1.查找数据是否在数组中，建议使用includes
2.查找数据的索引位置，建议使用indexOf
- async、await异步解决方案
提出场景有两个：JS是单线程、优化回调地狱的写法。
this.$http.jsonp('/login', (res) => {
this.$http.jsonp('/getInfo', (info) => {
// do something
})
})
在ES6中为了解决回调的书写方式，引入了Promise的then函数，业务逻辑很多的时候，需要链式多个then函数，语义会变得很不清楚。
new Promise((resolve, reject) => {this.login(resolve)})
.then(() => this.getInfo())
.then(() => {// do something})
.catch(() => { console.log("Error") })Generator函数应运而生，它只是一个分段执行任务，通过状态指针next分布执行任务，但是流程管理不太方便（每个阶段何时执行不太明了），所以它只是一个中间产物。
const gen = function* () {
const f1 = yield this.login()
const f2 = yield this.getInfo()
};
【JavaScript|ES7、ES8新特性整理】ES8中把async和await变得更加方便，它其实就是Generator的语法糖。async/await是写异步代码的新方式，以前的方法有回调函数和Promise。相比于Promise，它更加简洁，并且处理错误、条件语句、获取中间值都更加方便。
async function asyncFunc(params) {
const result1 = await this.login()
const result2 = await this.getInfo()
}
- Object.entries()
该方法会将某个对象的可枚举属性与值按照二维数组的方式返回。（如果目标对象是数组，则会将数组的下标作为键值返回）
Object.entries({ one: 1, two: 2 })//[['one', 1], ['two', 2]]
Object.extries([1, 3])//[['0', 1], ['1', 3]]
- 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'
推荐阅读
- 一个人的碎碎念
- 野营记-第五章|野营记-第五章 讨伐梦魇兽
- Shell-Bash变量与运算符
- 清明，是追思、是传承、是感恩。
- 牛人进化+|牛人进化+ 按自己的意愿过一生
- 七老修复好敏感、角质层薄、红血丝
- 华为旁！大社区、地铁新盘，佳兆业城市广场五期！
- 标签、语法规范、内联框架、超链接、CSS的编写位置、CSS语法、开发工具、块和内联、常用选择器、后代元素选择器、伪类、伪元素。
- 事件代理
- 螃蟹和这些食物同吃，轻则腹泻、重则中毒！要小心哦~