ES7和ES8新特性

ES7

1.Array.prototype.includes()
includes()作用,是查找一个值在不在数组里,若是存在则返回true,不存在返回false.
1.基本用法：

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

2.接收俩个参数：要搜索的值和搜索的开始索引

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

2.求幂运算符
基本用法：

3 ** 2  //9
效果同
Math.pow(3, 2) //9

由于是运算符，所以可以和 +=一样的用法

var b = 3;
b **= 2;
console.log(b); //9

ES8

1.async await
异步函数async function()
声明方式：

• 函数声明： async function foo() {}
• 函数表达式： const foo = async function() {}
• 对象的方式： let obj = { async foo() {} }
• 箭头函数： const foo = async () => {}

支持返回Promise和同步的值：
sync用于定义一个异步函数，该函数返回一个Promise。
如果async函数返回的是一个同步的值，这个值将被包装成一个理解resolve的Promise，等同于return Promise.resolve(value)。
await用于一个异步操作之前，表示要“等待”这个异步操作的返回值。await也可以用于一个同步的值。

//async await
    //返回Promise
    let timer = async function timer() {
        return new Promise((reslove, reject) => {
            setTimeout(() => {
                reslove('a');
            }, 1000);
        })
    }
    timer().then(result => {
        console.log(result);
    }).catch(err => {
        console.log(err.message);
    })

//返回同步的值
let sayHello = async function sayHello() {
    let hi = 'hello world'//等同于return Promise.resolve(hi);
    return hi
}
sayHello().then(res => {
    console.log(res)
}).catch(err => {
    console.log(err.message);
})

2.Object.entries()
作用：将一个对象中可枚举属性的键名和键值按照二维数组的方式返回。
若对象是数组，则会将数组的下标作为键值返回。

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

3.Object.values()
作用：只返回自己的键值对中属性的值。它返回的数组顺序，也跟Object.entries()保持一致

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

ES6中的Object.keys()返回的是键名：

var obj = { foo: 'bar', baz: 42 };
    console.log(Object.keys(obj)) //["foo", "baz"]
    console.log(Object.values(obj)) //["bar", 42]

//Object.keys()的作用就类似于for...in
function myKeys() {
    let keyArr = []
    for (let key in obj1) {
        keyArr.push(key)
        console.log(key)
    }
    return keyArr
}
console.log(myKeys(obj1)) //["foo", "baz"]

entries()、values()总结：

var obj = { foo: 'bar', baz: 42 };
    console.log(Object.keys(obj)) //["foo", "baz"]
    console.log(Object.values(obj)) //["bar", 42]
    console.log(Object.entries(obj)) //[["foo", "bar"], ["baz", 42]]

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

'Vue'.padStart(10)           //'       Vue'
'React'.padStart(10)         //'     React'
'JavaScript'.padStart(10)    //'JavaScript'

填充函数只有在字符长度小于目标长度时才有效,而且目标长度如果小于字符串本身长度时，字符串也不会做截断处理，只会原样输出

'Vue'.padEnd(10, '_*')           //'Vue_*_*_*_'
'React'.padEnd(10, 'Hello')      //'ReactHello'
'JavaScript'.padEnd(10, 'Hi')    //'JavaScript'
'JavaScript'.padEnd(8, 'Hi')     //'JavaScript'

5.函数参数支持尾部逗号
该特性允许我们在定义或者调用函数时添加尾部逗号而不报错

let foo = function (
                a,
                b,
                c,
            ) {
                console.log('a:', a)
                console.log('b:', b)
                console.log('c:', c)
            }
            foo(1, 3, 4, )

            //输出结果为：
            a: 1
            b: 3
            c: 4

6.修饰器Decorator
其实就是一个函数包装成另一个函数,这样的方式我们称之为“修饰器”

@addSkill
class Person { }

function addSkill(target) {
    target.say = "hello world";
}
console.log(Person['say']) //'hello world'

在Person这个类中，开始定义的时候是什么属性都没有的，在其上面使用@来附着上一个函数，这个函数的功能是给目标对象添加额外的属性say。这样Person这个类就有了say这个属性了。
上面案例中的@addSkill其实就是一个最简单的修饰器。