【转】聊聊ES7与ES8特性

作者: 人类进化又没带我 | 来源:发表于2017-11-21 14:08 被阅读133次

    ES7只有2个特性:

    ES8尚未发布(2017年1月),下面是它已经完成起草的一些特性:

    Array.prototype.includes()

    不使用ES7

    使用indexOf()验证数组中是否存在某个元素,这时需要根据返回值是否为-1来判断:

    let arr = ['jQuery', 'ng', 'vue', 'react'];
    if (arr.indexOf('vue') !== -1){
    console.log('vue存在');
    }
    

    使用ES7

    使用includes()验证数组中是否存在某个元素,这样更加直观简单:

    let arr = ['react', 'angular', 'vue'];
    if (arr.includes('vue')){
        console.log('vue存在');
    }
    

    指数操作符

    不使用ES7

    使用自定义的递归函数calculateExponent或者Math.pow()进行指数运算:

    function calculateExponent(base, exponent){
    if (exponent === 1){
        return base;
    } else {
        return base * calculateExponent(base, exponent - 1);
        }
    }
    console.log(calculateExponent(7, 3)); // 输出343
    console.log(Math.pow(7, 3)); // 输出343
    

    使用ES

    使用指数运算符******,就像+-等操作符一样:

    console.log(7**3);
    

    Object.values()

    不使用ES8

    使用Object.keys()遍历对象的属性值,需要通过属性名key去获取属性值:

    let obj = {a: 1, b: 2, c: 3};
    Object.keys(obj).forEach((key) =>{
        console.log(obj[key]); // 输出1, 2, 3
    });
    

    使用ES8

    使用Object.values()遍历对象的属性值,无需使用属性名:

    let obj = {a: 1, b: 2, c: 3}
    Object.values(obj).forEach(() =>{
        console.log(obj); // 输出1, 2, 3
    });
    

    Object.entries()

    不使用ES8

    使用Object.keys()遍历对象的属性名和属性值:

    let obj = {a: 1, b: 2, c: 3};
    Object.keys(obj).forEach((key) => {
          console.log(key + ": " + obj[key]); // 输出a: 1, b: 2, c: 3
    })
    

    使用ES8

    使用Object.entries()遍历对象的属性名和属性值:

    let obj = {a: 1, b: 2, c: 3};
    Object.entries(obj).forEach(([key, value]) =>{
          console.log(key + ": " + value); // 输出a: 1, b: 2, c: 3
    })
    

    padStart()

    不使用ES8

    console.log('0.00')
    console.log('10,000.00')
    console.log('250,000.00')
    

    输出结果如下:

    0.00
    10,000.00
    250,000.00
    

    使用ES8

    使用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
    

    padEnd()

    不使用ES8

    console.log('0.00 ' + '0.00' )
    console.log('10,000.00 ' + '10,000.00' )
    console.log('250,000.00 ' + '250,000.00')
    

    输出如下:

    0.00 0.00
    10,000.00 10,000.00
    250,000.00 250,000.00
    

    使用ES8

    使用padEnd()可以在字符串后面填充指定的字符串:

    console.log('0.00'.padEnd(20) + '0.00' )
    console.log('10,000.00'.padEnd(20) + '10,000.00' )
    console.log('250,000.00'.padEnd(20) + '250,000.00')
    

    输出如下:

    0.00 0.00
    10,000.00 10,000.00
    250,000.00 250,000.00
    

    Object.getOwnPropertyDescriptors()

    azatsBooks对象的定义如下:

    let azatsBooks = {
    books: ['React Quickly'],
    get latest() {
        let numberOfBooks = this.books.length;
        if (numberOfBooks == 0) return undefined;
            return this.books[numberOfBooks - 1];
        }
    };
    

    不使用ES8

    使用Object.getOwnPropertyDescriptor()获取单个属性的属性描述符。
    获取azatsBooks对象的books属性的属性描述符:

    console.log(Object.getOwnPropertyDescriptor(azatsBooks, 'books'));
    /** 输出books属性的属性描述
    [object Object] {
        configurable: true,
        enumerable: true,
        value: ["React Quickly"],
        writable: true
    }
    **/
    

    获取azatsBooks对象的lastest方法的属性描述符:

    console.log(Object.getOwnPropertyDescriptor(azatsBooks, 'latest'));
    /** 输出lastest方法的属性描述
    [object Object] {
    configurable: true,
    enumerable: true,
    get: function get latest() {
    let numberOfBooks = this.books.length
    if (numberOfBooks == 0) return undefined
        return this.books[numberOfBooks - 1]
    },
    set: undefined
    }
    **/
    

    使用ES8

    Object.getOwnPropertyDescriptors()相当于Object.getOwnPropertyDescriptor()的复数形式,可以获取对象的所有自身属性的描述符:

    console.log(Object.getOwnPropertyDescriptors(azatsBooks))
    /** 输出azatsBooks对象所有自身属性的属性描述
    [object Object] {
    books: [object Object] {
    configurable: true,
    enumerable: true,
    value: ["React Quickly"],
    writable: true
    },
    latest: [object Object] {
    configurable: true,
    enumerable: true,
    get: function get latest() {
        let numberOfBooks = this.books.length
        if (numberOfBooks == 0) return undefined
            return this.books[numberOfBooks - 1]
        },
        set: undefined
        }
    }
    **/
    

    函数参数列表结尾允许逗号

    不使用ES8

    var f = function(a,b,c,d // d之后不能带逗号) {
        console.log(d)
    }
    

    使用ES8

    var f = function(a,b,c,d, // d之后允许带逗号) {
        console.log(d)
    }
    

    允许逗号之后,可以避免一些不必要的报错。

    Async/Await

    传送门
    Async/Await是写异步代码的新方式,以前的方法有回调函数Promise。相比于Promise,它更加简洁,并且处理错误、条件语句、中间值都更加方便,因此有望替代Promise,成为新一代的一步代码编写方式。
    转自:https://blog.fundebug.com/2017/08/28/es7-and-es8/
    感谢Fundebug的分享

    青团社招聘:

    招聘岗位:高级前端开发工程师P5及以上

    简历投递到:hr@qtshe.com || haochen@qtshe.com

    职位描述:

    1、建设工具、提炼组件、抽象框架,促进前端工程化、服务化,持续提升研发效率,保障线上产品质量

    2、构建H5/PC应用基础设施,主导建设前端各种发布/监控等平台,指导落实解决方案

    3、持续优化前端页面性能,维护前端代码规范,钻研各种前沿技术和创新交互,增强用户体验、开拓前端能力边界

    相关文章

      网友评论

      • 念丶凉:Object.values()那里使用es8和不使用es8一样的,是不是写错了

      本文标题:【转】聊聊ES7与ES8特性

      本文链接:https://www.haomeiwen.com/subject/wmxwvxtx.html