ES6/ES7/ES8新特性

ES6

1. 变量的改变

　　　　let const

　　2. 字符串新增方法

　　　　let str = 'react';

　　　　str.includes('re') // true

　　　　str.repeat(3) // reactreactreact

　　　　str.startsWith('re')  // true，参数2为查找的位置

　　　　str.endsWith('p', 4)  // true,参数2为查找的字符串长度

　　3. 键值对重名简写

　　　　function people(name, age) {
　　　　　　return {
　　　　　　　　name,
　　　　　　　　age
　　　　　　};
　　　　}

　　4. 对象字面量简写

　　　　getName () { // 省略冒号(:) 和function关键字
　　　　　　console.log(this.name)
　　　　}

　　5. 对象合并

　　　　Object.assign({}, obj1, ob2);

　　6. 数据解构和rest参数

　　　　const people = {
　　　　　　name: 'cs',
　　　　　　age: 25
　　　　}
　　　　const { name, age } = people; // 'cs', 25

　　　　// 数组解构
　　　　const arr = [1, 3, 4];
　　　　const [a, b, c] = arr; // 1, 3, 4

　　　　// rest参数,返回的是一个对象
　　　　const obj = {a: 2, b: 3, c: 4, d: 5};
　　　　const {a, ...rest} = obj; // 2 { b: 3, c: 4, d: 5 }

　　7. 数据展开

　　　　// 展开对象(和上面Object.assign()一样，也是对象合并)
　　　　const obj = {a: 2, b: 3}
　　　　console.log({...obj, c: 5});// {a 2, b: 3, c: 5}
　　　　// 展开数组
　　　　const arr = [1, 3, 4]
　　　　console.log([...arr, 5]); // [1, 3, 4, 5]

　　8. Promise

　　　　// resolve、reject的使用
　　　　function getNum() {
　　　　const randomNum = Math.ceil(Math.random() * 10);
　　　　　　return new Promise((resolve, reject) => {
　　　　　　　　if (randomNum > 5) {
　　　　　　　　　　resolve('大于5');
　　　　　　　　} else {
　　　　　　　　　　reject('小于5');
　　　　　　　　}
　　　　　　})
　　　　}
　　　　getNum().then((result) => {
　　　　　　console.log('success', result);
　　　　}).catch((err) => {
　　　　　　console.log('err', err);
　　　　});

　　9. Set

　　　　// Set实例的常用方法和属性add,delete,clear,has、size
　　　　const s = new Set(['A', 'B', 'C']);
　　　　console.log(s); // Set { 'A', 'B', 'C' }
　　　　console.log(s.has('A')) // true，bool值
　　　　console.log(s.size) // 3
　　　　console.log(s.clear()) // Set {}
　　　　console.log(s.delete('A')) // true,bool值

　　　　const a =[1, 2, 3]
　　　　const b = [2, 3, 4];
　　　　// 并集
　　　　const s = Array.from(new Set([...a, ...b])); // [ 1, 2, 3, 4 ]
　　　　// 交集、差集
　　　　const bSet = new Set(b);
　　　　const interestSet = a.filter(v => bSet.has(v)); // [ 2, 3 ]
　　　　const interestSet = a.filter(v => !bSet.has(v)); // [ 1 ]

ES7

　　1. 求幂运算符（**)

　　　　Math.pow(3, 2) === 3 ** 2    // 9

　　2. Array.prototype.includes()

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

ES8

　　1. 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()
　　　　};
　　　　ES8中把async和await变得更加方便，它其实就是Generator的语法糖。async/await是写异步代码的新方式，以前的方法有回调函数和Promise。相比于Promise，它更加简洁，并且处理错误、条件语句、获取中间值都更加方便。

　　　　async function asyncFunc(params) {
　　　　　　const result1 = await this.login()
　　　　　　const result2 = await this.getInfo()
　　　　}
　　　　如果想进一步了解async的具体时间，可以参见阮一峰的博客es6.ruanyifeng.com/#docs/async

　　2. Object.entries()

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

　　　　Object.entries({ one: 1, two: 2 }) //[['one', 1], ['two', 2]]
　　　　Object.extries([1, 3]) //[['0', 1], ['1', 3]]

　　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]

　　4. 字符串填充padStart()、padEnd()

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

　　　　'react'.padStart(10, 'm') //'mmmmmreact'
　　　　'react'.padEnd(10, 'm') //' reactmmmmm'
　　　　'react'.padStart(3, 'm') // 'react'