• 首页
  • vue
  • TypeScript
  • JavaScript
  • scss
  • css3
  • html5
  • php
  • MySQL
  • redis
  • jQuery
  • ECMAScript 2017(ES8)新特性

    ECMAScript 2017(ES8)新特性:

    • 函数参数列表结尾允许,(逗号)。
    • 异步函数:asyncawait
    • 对象函数:Object.values()Object.entries()
    • 字符串填充:String.prototype.padStart()String.prototype.padEnd()
    • 列出对象所有属性的描述对象集合:Object.getOwnPropertyDescriptors()
    • 二进制数据缓冲区:ShareArrayBufferAtomics对象,用于从共享内存位置读取和写入。


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

    function foo(param1,param2,) {}
    foo('abc','def',);
    


    异步函数:async、await

    如果某个方法的返回值是一个 Promise 实例对象,我们可以在它的调用的方法名前加await,最后这个方法返回值就不是 Promise 对象,而是一个具体的值,但是在调用这个方法的外部函数需要加上async

    async getData(){
        const res = await api.getTableData();
        // do something    
    }
    


    Object.values()、Object.entries()

    ES5 引入了Object.keys()方法,返回一个数组,成员是参数对象自身的(不含继承的)所有可遍历属性的键名。ES8 引入了跟Object.keys()配套的Object.values()Object.entries(),作为遍历一个对象的补充手段,供for…of循环使用。

    • Object.keys(obj):返回一个包含该对象所有的键的数组。
    • Object.values(obj):返回一个包含该对象所有的值的数组。
    • Object.entries(obj):返回一个包含该对象所有[key, value]键值对的数组。

    Object.values(obj)方法返回一个数组,成员是参数对象自身的(不含继承的)所有可遍历属性的键值。

    const obj = { foo: 'bar', baz: 42 };
    Object.values(obj) // ["bar", 42]
    
    const obj = { 100: 'a', 2: 'b', 7: 'c' };
    Object.values(obj) // ["b", "c", "a"]
    // 注意:如果属性名为数值的属性,是按照数值大小,从小到大遍历的,因此返回的顺序是 b、c、a。
    

    Object.entries(obj)方法返回一个数组,成员是参数对象自身的(不含继承的)所有可遍历属性的键值对数组。

    const obj = { foo: 'bar', baz: 42 };
    Object.entries(obj) // [ ["foo", "bar"], ["baz", 42] ]
    
    const obj = { 10: 'xxx', 1: 'yyy', 3: 'zzz' };
    Object.entries(obj); // [['1', 'yyy'], ['3', 'zzz'], ['10': 'xxx']]
    


    String.prototype.padStart()、String.prototype.padEnd()

    在 ES8 中 String 新增了两个实例函数String.prototype.padStart()String.prototype.padEnd(),允许将空字符串或其他字符串添加到原始字符串的开头或结尾。

    String.padStart(targetLength,padStringh)
    String.padEnd(targetLength,padStringh)
    
    • targetLength:必填。当前字符串需要填充到的目标长度。如果这个数值小于当前字符串的长度,则返回当前字符串本身。
    • padStringh:可选。默认值""(空字符串)。填充字符串。如果字符串太长,使填充后的字符串长度超过了目标长度,则只保留最左侧的部分,其他部分会被截断。
    'x'.padStart(5, 'ab') // 'ababx'
    
    'hello'.paddingStart(10);  // '          hello';
    'hello'.paddingEnd(10);  //  'hello          ';
    

    有时候我们处理日期、金额的时候经常要格式化,这个特性就派上用场:

    '12'.padStart(10, 'YYYY-MM-DD') // "YYYY-MM-12"
    '09-12'.padStart(10, 'YYYY-MM-DD') // "YYYY-09-12"
    


    Object.getOwnPropertyDescriptors()

    • ES5 的Object.getOwnPropertyDescriptor():返回某个对象属性的描述对象(descriptor)。所谓属性的描述就是指这个属性是否可写,是否可以数之类。
    • ES8 的Object.getOwnPropertyDescriptors():返回指定对象所有自身属性(非继承属性)的描述对象集合。如果没有任何自身属性,则返回空对象。
    const obj = {[Symbol('foo')]: 123, get bar() { return 'abc' },};
    console.log(Object.getOwnPropertyDescriptors(obj));
    /*
    {
        [Symbol('foo')]:{ 
          value: 123,
          writable: true,
          enumerable: true,
          configurable: true
        },
        bar:{
          get: [Function: bar],
          et: undefined,
          enumerable: true,
          configurable: true 
        } 
    }
    */
    

    虽然在 ES6 中,Obj 已经引入了一个Object.assign()方法用来拷贝 properties,但只能拷贝具有默认属性值的属性。对于那些具有非默认属性值的属性 getters, setters, non-writable properties来说,Object.assign()是不能拷贝的。这个时候就需要使用Object.getOwnPropertyDescriptors()方法。

    const target2 = {};
    //属性copy
    Object.defineProperties(target2, Object.getOwnPropertyDescriptors(source));
    console.log(Object.getOwnPropertyDescriptor(target2, 'foo'));
    /*
    { 
        get: undefined,
        set: [Function: foo],
        enumerable: true,
        configurable: true
    }
    */
    


    SharedArrayBuffer、Atomics

    SharedArrayBuffer对象用来表示一个通用的,固定长度的原始二进制数据缓冲区。

    // 语法:new SharedArrayBuffer(length)
    // 参数:length指所创建的数组缓冲区的大小,以字节(byte)为单位。
    // 返回值:一个大小指定的新 SharedArrayBuffer 对象。其内容被初始化为 0。
    // 注意:需要new运算符构造
    // 创建一个1024字节的缓冲
    
    let sab = new SharedArrayBuffer(1024);
    
    
    /**
     * 
     * @param {*} length 所创建的数组缓冲区的大小,以字节(byte)为单位。  
     * @returns {SharedArrayBuffer} 一个大小指定的新 SharedArrayBuffer 对象。其内容被初始化为 0。
     */
    
    new SharedArrayBuffer(10)
    


    Atomics对象提供了一组静态方法用来对SharedArrayBuffer对象进行原子操作。

    这些原子操作属于Atomics模块。与一般的全局对象不同,Atomics不是构造函数,因此不能使用new操作符调用,也不能将其当作函数直接调用。Atomics的所有属性和方法都是静态的(与 Math 对象一样)。多个共享内存的线程能够同时读写同一位置上的数据。原子操作会确保正在读或写的数据的值是符合预期的,即下一个原子操作一定会在上一个原子操作结束后才会开始,其操作过程不会中断。