1. 程式人生 > >ECMAScript 2017 (ES8)新特性

ECMAScript 2017 (ES8)新特性

   最近得知Ecma國際釋出了第八版的ECMAScript語言規範,也就是我們通常喊的es6、es7後的es8了,官方叫法不用猜了肯定是ECMAScript 2017了。表示前端發展這麼快有點小小的心累啊,罷了不多說就是幹吧!

ECMAScript 2017 新特性如下:

  1. Object.values/Object.entries;
  2. 字串填充;
  3. Object.getOwnPropertyDescriptor;
  4. 尾隨逗號;
  5. 非同步函式;
  6. 共享記憶體和原子
    等。。。
    (ECMAScript 2018 已在制定中。)

一、Object.values/Object.entries

object.values

返回一個數組,成員為引數物件可遍歷的鍵值(不含繼承的)。
若屬性名為數值,則按照數值從小到大遍歷,否則預設排序遍歷;
若引數為字串,則返回由拆分後的每個字串組成的陣列;
若引數為數值,則返回空陣列;
若引數為布林值,則返回空陣列。

let obj = { 33:3 , 11:1 , 22:2 },
   obj2 = { "三":3 , "一":1 , "二":2 },
   obj3 = "Angelababy",
   obj4 = 123,
   obj5 = true;
console.log( Object.values(obj) );      //
[1,2,3] console.log( Object.values(obj2) ); // [3,1,2] console.log( Object.values(obj3) ); // ["A", "n", "g", "e", "l", "a", "b", "a", "b", "y"] console.log( Object.values(obj4) ); // [] console.log( Object.values(obj5) ); // []

object.entries

返回一個數組,成員為引數物件可遍歷的鍵值對陣列(不含繼承的),除返回值不同外,其方法與objest.values基本一樣。

let obj = { 33:3 , 11:1 , 22:2 },
   obj2 = { "三":3 , "一":1 , "二":2 },
   obj3 = "Angelababy",
   obj4 = 123,
   obj5 = true;
console.log( Object.entries(obj) );     
//  [ ["11",1] , ["22",2] , ["33",3] ]

console.log( Object.entries(obj2) );    
//  [ ["三",3] , ["一",1] , ["二",2] ]

console.log( Object.entries(obj3) );    
//  [ ["0","A"] , ["1","n"] , ["2","g"] , ["3","e"] , ["4","l"] , ["5","a"] , ["6","b"] , ["7","a"] , ["8",b"] , ["9","y"] ] 

console.log( Object.entries(obj4) );    //  []
console.log( Object.entries(obj5) );    //  []

二、字串填充

為了使開發人員更好的控制字串,提供了以下方法:

string.padStart(maxLength,fillString/可不填)

"abc".padStart(6) // "    abc"  未填寫填充字元時候以空格填充
"abc".padStart(6,"3") // "333abc"
"abc".padStart(6,"3").length // 6
"abc".padStart(6,"123456") // "123abc" 自動忽略句尾多餘的填充字元
"abc".padStart(2,"123456") // "abc" 原字串大於要求的資料時候則不發生變化返回原字串

string.padEnd(maxLength,fillString/可不填)

padEnd()方法與padStart()方法類似,只不過填充字串插在字串尾部

"123".padEnd(8)             // "123     "   
"123".padEnd(8,"c")         // "123ccccc"
"123".padEnd(8,"c").length  // 8
"123".padEnd(8,"123456")    // "12312345"  
"123".padEnd(2,"123456")    // "123"

三、Object.getOwnPropertyDescriptor(obj, prop)

    獲取指定物件的自身屬性描述符。自身屬性描述符是指直接在物件上定義(而非從物件的原型繼承)的描述符。
var obj = {};
obj.newDataProperty = "abc";
var descriptor = Object.getOwnPropertyDescriptor(obj, "newDataProperty");
//outputs:
//configurable:true
//enumerable:true
//value:"abc"
//writable:true

descriptor.writable = false;
//outputs:
//writable:false

四、函式引數列表與呼叫中的尾部逗號

此特性使我們在定義或者呼叫函式時新增尾部逗號而不報錯

var arr = [1,2,3] , arr2 = [1,2,3,4,];
console.log(arr);       // [1,2,3]
console.log(arr2);      // [1,2,3,4] (句尾逗號不會報錯)

function fun(x,y,z,){
    return x+y+z
}
fun(1,2,3,)             // 6 (句尾逗號不會報錯)

五、非同步函式

    ES8 中允許使用 async/await 語法來定義與執行非同步函式,async 關鍵字會返回某個 AsyncFunction 物件;在內部實現中雖然非同步函式與迭代器的實現原理類似,但是其並不會被轉化為迭代器函式:

非同步函式宣告: async function foo() {};
非同步函式表示式: const foo = async function () {};
非同步函式定義:let obj = { async foo() {} };
非同步箭頭函式: const foo = async () => {};

function fetchTextByPromise() {
  return new Promise(resolve => { 
    setTimeout(() => { 
      resolve("es8");
    }, 2000);
  });
}
async function sayHello() { 
  const externalFetchedText = await fetchTextByPromise();
  console.log(`Hello, ${externalFetchedText}`); // Hello, es8
}

sayHello();
console.log(1);
sayHello();
console.log(2);

//  結果: 
//  1               (直接輸出)
//  2               (直接輸出)
//  Hello, es8      (2秒後輸出)

六、共享記憶體和原子

Lars Hansen提出了ES2017中 共享記憶體和Atomics的建議,截至2017年2月,它已在第4階段中被批准,幷包含到規範中。

此功能引入了一個新的低級別Atomics名稱空間物件和一個SharedArrayBuffer建構函式,來作為更高級別併發抽象的原始構建塊。這使開發人員能夠共享多個service worker和核心執行緒之間的SharedArrayBuffer物件的資料。這種引入帶來了巨大的益處,因為可以更輕鬆地在worker之間共享資料,從而可以改善worker之間的協調。

有關新的Atomics物件和SharedArrayBuffer建構函式的資訊,請閱讀深入分析或閱讀Lars Hansen的簡短教程。