ES8新特性

ES8

今天來學習下es8新增的一些API。

一、 Async/Await 語法使用，與promise有那些關係？
二、 Object.values()、Object.keys()、Object.entries(),三者有什麼關聯？
三、 String padding？語法和使用場景有那些？
四、 Object.getOwnPropertyDescriptors()是什麼？描述符的使用場景有哪些？

1、Async/Await

一、Async/Await是什麼？爲何出現？與promise有那些關係？

async 和 await 是 Promise 的拓展，也就是在函數內部new Promise了一個對象實例，不須要咱們手動聲明一個Promise實例，由於js是單線程的，使用promise以後可讓咱們書寫操做異步更方便，而 async 是讓咱們寫起 Promise 像同步操做。

//首先回顧下promise：
一、首先在你的函數中實例化一個promise對象
二、最後在調用中經過函數拿到promise實例
三、經過實例調用then方法進行異步處理

    
async function fn () {
  return 128;
}
fn().then(val => window.console.log(val)) //128

//這裏其實能夠取到128其實return 返回就是一個promise對象。雖然咱們寫的是128.這是由於內部將128包裝成Promise.resolve(128)

async function fn () {
  return Promise.resolve(128)
}
fn().then(val => window.console.log(val)) //128

二、await的用法和注意事項

以下，咱們但願代碼按照從上到下，按順序執行。這裏其實咱們就用到了await，讓他按照同步的方式去執行讓咱們得想要的結果。

async function fn () {
      let promise = new Promise((resolve, reject) => {
        setTimeout(() => resolve("hahahah!"), 1000)
      })
      promise.then(val => window.console.log(val))
      window.console.log(999)
      return Promise.resolve(128)
    }
    fn().then(val => window.console.log(val))
//打印以下： 999 、12八、"hahahah!"

那若是咱們想讓他順序執行，怎麼辦呢？請看下面代碼,其實這裏的代碼咱們也知道

async function fn () {
      let promise = new Promise((resolve, reject) => {
        setTimeout(() => resolve("hahahah!"), 1000)
      })
      let result = await promise;
      window.console.log(result)
      window.console.log(999)
      return Promise.resolve(128)
    }
    fn().then(val => window.console.log(val))
// "hahahah!"、999 、12八、

tips：

一、async 函數顯式返回的不是 Promise 的話，會自動包裝成 Promise 對象

二、await 後面必定是 Promise 對象，若是不是會自動包裝成 Promise 對象

三、await 只能在 async 標記的函數內部使用，單獨使用會觸發 Syntax error。

2、Object.values()、Object.keys()、Object.entries(),三者有什麼關聯？

一、Object.values() ？

Object.values()方法返回一個給定對象自身的全部可枚舉屬性值的數組，值的順序與使用for...in循環的順序相同 ( 區別在於 for-in 循環枚舉原型鏈中的屬性 )。

//以前咱們若是想要獲取對象的key,value值，常常用for in,如今出現了的Object.values()可讓咱們直接獲取對象的value值；
let  obj={name:'miya',age:18,job:'FE'};
Object.values(obj) //["miya", 18, "FE"]

二、set、map數據格式使用values()

不難看出。其實不管是使用map仍是set格式，它們都具有Iterator（可迭代協議）。

let s = new Set([1, 2, 3, 4]);
s.values(); //SetIterator {1, 2, 3, 4}
let  obj={name:'miya',age:18,job:'FE'};
var map = new Map(Object.entries(obj));
map.values(); //{"miya", 18, "FE"}

tips：

Object.values 是在對象上找到可枚舉的屬性的值，因此只要這個對象是可枚舉的就能夠，不僅是 {}；

三、Object.entries()

Object.entries()返回一個數組，其元素是與直接在object上找到的可枚舉屬性鍵值對相對應的數組。屬性的順序與經過手動循環對象的屬性值所給出的順序相同。

下面咱們使用for of 去遍歷下這個這個對象；

let  obj={name:'miya',age:18,job:'FE'};
for(let [k,v] of obj){
    console.log(k,v)
} // Uncaught TypeError: obj is not iterable

結果報錯了，看下報錯緣由，是由於obj不具有可迭代屬性，這裏咱們就須要用到Object.entries()了，將obj進行轉化下。

let  obj={name:'miya',age:18,job:'FE'};
for(let [k,v] of Object.entries(obj)){
    console.log(k,v)
} 
//name miya
//age 18
//job FE

3、String padding？

es8中增長了字符串補白的方法就是String.prototype.padStart 和 String.prototype.padEnd；接下來我們就來用一下。

一、String.prototype.padStart

padStart() 方法用另外一個字符串填充當前字符串(重複，若是須要的話)，以便產生的字符串達到給定的長度。填充從當前字符串的開始(左側)應用的。

for(let i=1;i<20;i++){
    console.log(i.toString().padStart(2,0))
}
'12'.padStart(10,'YYYY-MM-DD')
'2019-11-23'.padStart(10,'YYYY-MM-DD')
// 能夠看出不知足10的。已經作到補0了

二、String.prototype.padEnd

方法會用一個字符串填充當前字符串（若是須要的話則重複填充），返回填充後達到指定長度的字符串。從當前字符串的末尾（右側）開始填充。

'abc'.padEnd(6, "123456");  //

3、 Object.getOwnPropertyDescriptors()是什麼？描述符的使用場景有哪些？

方法返回指定對象上一個自有屬性對應的屬性描述符。（自有屬性指的是直接賦予該對象的屬性，不須要從原型鏈上進行查找的屬性）

一、好比咱們想讓Object中的某個屬性和值被不枚舉怎麼辦？es5和es6是怎麼作的？

let  obj={name:'miya',age:18,job:'FE'};
Object.defineProperty(obj,'age',{enumerable: false})
Object.keys(obj) //["name", "job"]
Object.values(obj) //["miya", "FE"]
Object.getOwnPropertyDescriptors(obj)

二、Reflect，.getOwnPropertyDescriptor(obj,'age')，擴展下，這個是es6中的Reflect，也能夠查看，對象某個元素上的描述符。接受2個參數（對象。屬性）；

Reflect.getOwnPropertyDescriptor(obj,'age')//
configurable: true
enumerable: false
value: 18
writable: true

tips:

這裏咱們能夠看到成功看不到age這個屬性和值了。但我又想看下它們屬性並不改變它怎麼辦呢。這裏咱們就可使用Object.getOwnPropertyDescriptors()看到obj裏全部的屬性了。

在這裏拓展下：defineProperty有三個屬性（對象，要操做的元素，描述符） 這個描述符包括幾個屬性：
* value [屬性的值] 
* writable [屬性的值是否可被改變]
* enumerable [屬性的值是否可被枚舉]
* configurable [描述符自己是否可被修改，屬性是否可被刪除]