ES7/8/next 特性点

Array.prototyp.includes (es7)

替代数组的indexOf方法，检查数组中是否存在检查值，返回布尔值。

const arr = [1,2,3]
arr.includes(1) //  true
//  可以填入第二可选参数，从指定位置查找
arr.includes(2, 1) //   true
arr.includes(2, 2)  //  false

还可以用于字符串:

const mvvm = 'React Vue Angular'
mvvm.includes('Vue')    //  true

Exponentiation Operator(求幂运算) (es7)

// 在es6及之前，指数只能通过Math内置方法求得
let a = Math.pow(2, 3)  // 8
//而在es7，可以通过 ** 来运算
let b = 2 ** 3  //  8

运算符与coffee和python一样。

Object.values(es8)

Object.values和Object.keys对应

const obj = {name: 1, age: 18, gender: 'male'}
Object.keys(obj).forEach((key, i) => {
    console.log(key,': ', obj[key])
})
//  name:  1
//  age: 18
//  gender: 'male'

在es5中也可以使用for of遍历对象

for (let key of Object.keys(obj)) {
  console.log(key, obj[key])
}

如果通过Object.keys或Object.values获得了对应的keys or values 数组。

tip: 尽量不要使用for in遍历对象，因为会有这样一个问题：Object.prototype上添加的可枚举属性也会被遍历出来。

Object.prototype.someEnumeration = 'boom!'
for (let key in obj) {
  console.log(key, obj[key])
}
// 会打印出 someEnumeration: boom!

Object.entries(es7)

Object.entries返回对象自身可迭代属性key-value对数组，分别以数组的形式存入数组。

const obj = {name: 1, age: 18, gender: 'male'}
const objArray = Object.entries(obj)
console.log(JSON.stringify(objArray))
//  [["name",1],["age",18],["gender","male"]]

这个api对于提取和迭代对象的属性非常有用

String.prototype.padStart和String.prototype.padEnd

padStart()在开始部位填充，返回一个给出长度的字符串，填充物给定字符串，把字符串填充到期望的长度。

console.log('0.00'.padStart(20))            
console.log('10,000.00'.padStart(20))    
console.log('250,000.00'.padStart(20)) 
// 打印出
//       0.00
//  10,000.00
// 250,000.00

也可以通过第二个参数来设置填充的字符

console.log('react'.padStart(10, '_')) 
//     "_____react"

async/await(es7)

实现一个sleep函数

var sleep = function (time) {
    return new Promise(function (resolve, reject) {
        setTimeout(function () {
            resolve()
        }, time)
    })
}
var start = async function () {
    // 在这里使用起来就像同步代码那样直观
    console.log('start')
    await sleep(3000)
    console.log('end')
}
start();

控制台先输出start，稍等3秒后，输出了end。

使用的基本规则:

• async 表示这是一个async函数，await只能用在这个函数里面
• await表示在这里 等待promise返回结果，再继续执行
• await 后面跟着的应该是一个promise对象（当然，其他返回值也没关系，只是会立即执行，不过那样就没有意义）
• await必须在async函数的上下文中的

如何获取返回值？

var sleep = function (time) {
    return new Promise(function (resolve, reject) {
        setTimeout(function () {
            // 返回 ‘ok’
            resolve('ok')
        }, time)
    })
}
var start = async function () {
    let result = await sleep(3000)
    console.log(result) //  ‘ok’
}
start()

如何捕捉错误

var sleep = function(time) {
    return new Promise((resolve, reject) => {
        setTimeout(() => {
            reject('error')
        }, time)
    })
}
var start = async function() {
    try{
        console.log('start')
        await sleep(3000)   //  这里返回错误
        console.log('end')  //  不会执行了
    }catch(err) {
        console.log(err)    // error
    }
}
start()

使用赋值解构生成自然数数组

let arr = [...Array.from({ length }).keys()]

Proxy用法

var handler = {
  get: function(target, name) {
    if (name === 'prototype') {
      return Object.prototype;
    }
    return 'Hello, ' + name;
  },
  apply: function(target, thisBinding, args) {
    return args[0];
  },
  construct: function(target, args) {
    return {value: args[1]};
  }
};
var fproxy = new Proxy(function(x, y) {
  return x + y;
}, handler);
fproxy(1, 2) // 作为apply调用，1
new fproxy(1,2) // 作为构造函数调用{value: 2}
fproxy.prototype === Object.prototype // true
fproxy.foo // "Hello, foo"