为什么要写这篇文章呢?因为现在有很多前端,觉得自己会一些ES6,就可以了,就完美了,但事实是这样吗?
不!事实是,只要这门语言在更新,在通过提案并被浏览器厂商所慢慢地实现,你就必须得马不停蹄地学下去,没办法,谁让js一开始被设计出来的时候漏洞百出呢~他的作者艾奇先生如果知道这门语言现在是世界上最火爆的语言,肯定会为当初瞎几把写它的自己而感到羞愧万分!
那咱们程序员目前的现状是:只要学不死,就还是得学啊!况且babel解决了一些新功能的浏览器兼容问题……不学能行吗?不行啊!
那么我的这篇文章呢,会以最实在最精简最高效的方式,让你在短时间里,快速掌握ES7和ES8两个版本的新特性!
骚年,是不是很期待!往下看吧:

首先,阅读本文需要的基础技能前提:完全掌握ES5,并且懂一些ES6,比如Promise、Object.assign()、Object.keys()等等。
如果你还未达到这个前提,我建议你先去看看阮一峰老师的《ECMAScript 6 标准入门》。
首先呢,是ES7:

  1. Array.prototype.includes()
    这个方法呢,跟indexOf()方法是很相似的,不同之处在于:includes()可以查找NaN的存在,算是高级版的indexOf()了吧。

    1
    2
    3
    4
    5
    6
    7
    8
    9
    10
    let arr1 = [1, 2, 3, 4];
    console.log(arr1.indexOf(5)); /* -1 */
    console.log(arr1.includes(5)); /* false */

    let arr2 = [1, 2, 3, 4, NaN];
    console.log(arr2.indexOf(NaN)); /* -1 */
    console.log(arr2.includes(NaN)); /* true */

    /* 特点: includes() 分不清 -0 和 +0,不过+0和-0本来也算是同一个数字了嘛 */
    console.log([-0].includes(+0)); /* true */
  2. 幂运算符

    1
    2
    3
    4
    /* 即:计算a的b次方 */
    a**b == Math.pow(a, b)
    /* 当然这个运算符在chrome的v8引擎里,是偶尔会出现bug的: */
    99**99 !== Math.pow(99, 99)

不过这并不重要,你写a**b,webpack打包时候,babel还是会给你转成Math.pow(a, b),所以,放心大胆的用~!

ES7就到此结束了,是不是很简单?!

接下来是ES8:

  1. Object.values()
    它跟ES6里的Object.keys()很相似!作用呢就是:返回一个对象中自己的所有属性的值(不包括通过原型链继承的属性)。

    1
    2
    3
    const obj1 = { a: 3, b: 2, c: 1 };
    console.log(Object.keys(obj1)); /* [a, b, c] key值 */
    console.log(Object.values(obj1)); /* [3, 2, 1] value值 */
  2. Object.entries()
    它也跟ES6里的Object.keys()很相似!作用呢就是:以数组的形式返回key和value,这样一来使用循环或者将对象换为Map就很方便了。

    1
    2
    3
    4
    5
    6
    7
    8
    9
    const obj2 = { a: 1, b: 2, c: 3 };
    for(let [key, value] of Object.entries(obj2)) {
    /* key和value都输出 */
    console.log(`key: ${key} value: ${value}`);
    }

    /* 直接生成Map、很便捷,能去重 */
    const map1 = new Map(Object.entries(obj2));
    console.log(map1); /* Map { a: 1, b: 2, c: 3 } */
  3. String.prototype.padStart 与 String.prototype.padEnd
    作用:方便我们将一个新的字符串追加到某字符串的头尾。(对于格式化的输出很有用)
    用法:String.padStart(numberOfCharcters[, stringForPadding]);

    1
    2
    3
    4
    5
    6
    7
    8
    9
    10
    11
    12
    13
    14
    15
    const str1 = 'haha';
    str1.padStart(10); /* ' 5' */
    str1.padStart(10, '=*'); /* '=*=*=*=*=5' */

    /* 实际用途: */
    const longArr1 = [0, 1, 12, 123, 1234].map(num => {
    return num.toString().padStart(5, '0');
    })

    const longArr2 = [0, 1, 12, 123, 1234].map(num => {
    return num.toString().padEnd(5, '-');
    })

    console.log(longArr1); /* ['00000', '00001', '00012', '00123', '01234'] */
    console.log(longArr2); /* ['0----', '1----', '12---', '123--', '1234-'] */
  4. Object.getOwnPropertyDescriptor()
    它跟ES6中的 Object.assign()相似。
    作用的话:它的返回值比Object.assign()多了setter和getter属性。
    通俗讲就是:可以返回getter和setter的assign()。

    1
    2
    3
    4
    5
    6
    7
    8
    9
    10
    11
    12
    13
    14
    const obj3 = {
    a: 1,
    b: 2,
    set num() {
    this.a = 3;
    },
    get num() {
    return this.b;
    }
    }

    /* 将对象obj3深拷贝到objReturn,getOwnPropertyDescriptor拷贝了getter和setter,但assign没有。 */
    const objReturn = Object.assign({}, obj3);
    console.log(Object.getOwnPropertyDescriptor(objReturn, 'num')); /* a, b, set, get */
  5. 允许函数的参数最后添加逗号…
    目的:让git等工具更容易显示出函数参数的改动…
    感觉这个功能……超鸡肋……

    1
    2
    3
    4
    5
    6
    function Person(
    name,
    age,
    ) {
    return this.name;
    }
  6. Async/Await 异步函数
    重头戏!今天的压轴大戏!开始上演!
    先说下作用:摆脱”回调地狱”、”链式地狱”,提升代码可读性!

    1
    2
    3
    4
    5
    async function getUserInfo2(userId) {
    const user = await getUser(userId);
    const age = await getUserAge(user);
    console.log(age);
    }

可读性是不是高了很多?而且代码量也减少了!而且它自带Promise效果!

Alright, 今天的分享就这么简单,不到30分钟的时间就能轻松学会ES7和ES8,你学会了吗?