ES7,ES8新特性

今天要来翻翻老梗了，有关于ES6的使用，在前端工程代码里面已经很普遍了，但是限于兼容性的限制，并没有过多的应用到具体实践中。ES7和ES8相关新特性的更新又让人忍不住去试试水。

ES7新特性

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

求幂运算符（**）

Math.pow()的简写

2 ** 2 = 4与Math.pow(2,2) = 4的效果是等同的

Array.prototype.includes()

这个方法是检查一个数组中是否有某个元素

['a', 'b', 'c'].includes('a')     // true
['a', 'b', 'c'].includes('d')     // false

当接收两个参数的时候，第二个参数是检测开始的下标，默认从零开始

['a', 'b', 'c', 'd'].includes('b', 1)      // true
['a', 'b', 'c', 'd'].includes('b', 2)      // false

类比于indexOf，indexOf得出的是元素的位置（下标），如果元素不存在的时候则返回-1

有一个特殊点：indexOf并不能识别NaN，返回了令人匪夷所思的结果

还有一个特殊点：includes认为+0和-0是一样的

ES8新特性

异步函数(Async functions)

为了避免回调函数多层嵌套的问题，异步函数的出现完美的解决了这个问题，从promise到async await,异步函数和异步回调的流程更加清晰和明了。

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

resolve是成功之后的回调，reject失败之后的回调

当有多个请求任务的时候promise会出现很多的then，如此看来，整个流程也不是很清晰。

之后引入了另外一种异步编程机制：Generator

Generator函数的用法如下：

function* helloWorldGenerator() {
  yield 'hello';
  yield 'world';
  return 'ending';
}

var hw = helloWorldGenerator();

Generator的特点如下：1，函数声明的* 2内部的yield关键字。除此之外使用方法和普通函数一样。

但是关键字yield相当于一种阻遏机制，需要手动触发，一下示例演示Generator的用法：

因为yield是一种阻遏机制，分析一下用法：

var gen = function* () {
  const f1 = yield this.login()
  const f2 = yield this.getInfo()
};

ES8引入了async函数，使得异步操作变得更加方便。简单说来，它就是Generator函数的语法糖。

async function asyncFunc(params) {
  const result1 = await this.login()
  const result2 = await this.getInfo()
}

Object.entries()和Object.values()

该方法会将某个对象的可枚举属性与值按照二维数组的方式返回。若目标对象是数组时，则会将数组的下标作为键值返回。如果对象的key值是数字，则返回值会对key值进行排序，返回的是排序后的结果。例如：

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

字符串填充：padStart和padEnd

ES8提供了新的字符串方法-padStart和padEnd。padStart函数通过填充字符串的首部来保证字符串达到固定的长度，反之，padEnd是填充字符串的尾部来保证字符串的长度的。该方法提供了两个参数：字符串目标长度和填充字段，其中第二个参数可以不填，默认情况下使用空格填充。

'Vue'.padStart(10)           //'       Vue'
'Vue'.padStart(10, '_*')           //'_*_*_*_Vue'
'JavaScript'.padStart(8, 'Hi')     //'JavaScript'
'Vue'.padEnd(10, '_*')           //'Vue_*_*_*_'
'JavaScript'.padEnd(8, 'Hi')     //'JavaScript'

Object.getOwnPropertyDescriptors()

该方法会返回目标对象中所有属性的属性描述符，该属性必须是对象自己定义的，不能是从原型链继承来的。先来看个它的基本用法：

let obj = {
  id: 1,
  name: 'test',
  get gender() {
    console.log('gender')
  },
  set grade(g) {
    console.log(g)
  }
}
Object.getOwnPropertyDescriptors(obj)

//输出结果为：
{
  gender: {
    configurable: true,
    enumerable: true,
    get: f gender(),
    set: undefined
  },
  grade: {
    configurable: true,
    enumerable: true,
    get: undefined,
    set: f grade(g)
  },
  id: {
    configurable: true,
    enumerable: true,
    value: 1,
    writable: true
  },
  name: {
    configurable: true,
    enumerable: true,
    value: 'test',
    writable: true
  }
}

方法还提供了第二个参数，用来获取指定属性的属性描述符。

let obj = {
  id: 1,
  name: 'test',
  get gender() {
    console.log('gender')
  },
  set grade(g) {
    console.log(g)
  }
}
Object.getOwnPropertyDescriptor(obj, 'id')

//输出结果为：
{
  id: {
    configurable: true,
    enumerable: true,
    value: 1,
    writable: true
  }
}

类比于Object.assign()

assign方法只能拷贝一个属性的值，而不会拷贝它背后的复制方法和取值方法。Object.getOwnPropertyDescriptors()主要是为了解决Object.assign()无法正确拷贝get属性和set属性的问题，Object.getOwnPropertyDescriptors方法配合Object.defineProperties方法，就可以实现正确拷贝。

let obj = {
  id: 1,
  name: 'test',
  get gender() {
    console.log('gender')
  }
}
let obj1 = {}
Object.defineProperties(obj1, Object.getOwnPropertyDescriptors(obj))
Object.getOwnPropertyDescriptors(obj1)

//输出结果为：
{
  gender: {
    configurable: true,
    enumerable: true,
    get: f gender(),
    set: undefined
  },
  id: {
    configurable: true,
    enumerable: true,
    value: 1,
    writable: true
  },
  name: {
    configurable: true,
    enumerable: true,
    value: 'test',
    writable: true
  }
}

以上的是部分ES7,ES8新特性，积极学习ES的新特性，这些新特性用起来能极大地方便和精简自己的编码逻辑。