es7-es8的新特性可參考: es7-es8

  1 function noRun(){
  2     // es6的Generator函數異步
  3     function* a(){
  4         yield console.log(1)
  5         yield console.log(2)
  6     }
  7     var aa = a()
  8     aa.next()
  9     aa.next()
 10 
 11     // es8的asyns/await異步
 12     const timeout = async ms => {
 
 13         await new Promise((resolve) => {
 14         setTimeout(resolve, ms);
 15         });
 16     }
 17 
 18     async function asyncP(value, ms, ms2) {
 19         // 順序執行
 20         await timeout(ms);
 21         console.log(value);
 22         await timeout(ms2);
 23         console.log(ms2);
 
 24 
 25         // 並行執行
 26         await Promise.all([
 27             timeout(ms),
 28             timeout(ms2)
 29         ]);
 30     }
 31     asyncP(‘hello world‘, 5000, 3000);
 32 
 33 
 34     /**
 35      * ES7 求冪運算符**
 36      * 在ES5中 == Math.pow(n,m)
 37      */
 38     console.log(3**2) // 9
 39 
 40
 
     /** 
 41      * ES7 Array.prototype.includes(n, idx)方法
 42      * n是要查找內容，idx是開始查找的下標
 43      * ( 類似indexOf()方法 )
 44     */
 45     let arr = [‘react‘, ‘angular‘, ‘vue‘];
 46     console.log(arr.includes(‘react‘))  // true
 47     console.log(arr.includes(‘react‘, 1))  // false
 48 
 49     /**
 50      * ES8 Object
 51      * ES8 Object.entries() 方法
 52      * 將某個對象的可枚舉屬性與值按照二維數組的方式返回
 53      * 如果對象的key值是數字，則返回值會對key值進行排序，返回的是排序後的結果
 54      */
 55     Object.entries({ one: 1, two: 2 })    //[[‘one‘, 1], [‘two‘, 2]]
 56     Object.entries([1, 2])                //[[‘0‘, 1], [‘1‘, 2]]
 57     // key為數字
 58     Object.entries({ 3: ‘a‘, 4: ‘b‘, 1: ‘c‘ })    //[[‘1‘, ‘c‘], [‘3‘, ‘a‘], [‘4‘, ‘b‘]]
 59     // ES6解構方式結合運用
 60     let obj = { one: 1, two: 2 };
 61     for (let [k,v] of Object.entries(obj)) {
 62         console.log(`${k}: ${v}`);
 63     }
 64 
 65     /**
 66      * ES8 Object
 67      * ES8 Object.values() 方法
 68      * 只返回自己的鍵值對中屬性的值
 69      * 順序規則與Object.entries()一致
 70      */
 71     Object.values({ one: 1, two: 2 })            //[1, 2]
 72     Object.values({ 3: ‘a‘, 4: ‘b‘, 1: ‘c‘ })    //[‘c‘, ‘a‘, ‘b‘]
 73 
 74     /**
 75      * ES8 Object
 76      * ES8 Object.getOwnPropertyDescriptors(‘參數‘, 可選-‘屬性‘) 方法
 77      * 返回目標對象中所有屬性的屬性描述符，該屬性必須是對象自己定義的，不能是從原型鏈繼承來的
 78      */
 79     let obj = {
 80         id: 1,
 81         name: ‘test‘,
 82         get gender() {
 83           console.log(‘gender‘)
 84         },
 85         set grade(g) {
 86           console.log(g)
 87         }
 88     }
 89     Object.getOwnPropertyDescriptors(obj, ‘id‘)
 90     //輸出結果為：
 91     // {
 92     //     id: {
 93     //     configurable: true,
 94     //     enumerable: true,
 95     //     value: 1,
 96     //     writable: true
 97     //     }
 98     // }
 99     
100 
101     /**
102      * ES8 String
103      * ES8 字符串填充：padStart(num, ‘‘)和padEnd(num, ‘‘)
104      * 函數通過填充字符串的首尾部來保證字符串達到固定的長度
105      */
106     ‘JavaScript‘.padStart(8, ‘Hi‘)     //‘JavaScript‘
107     ‘JavaScript‘.padStart(10, ‘Hi‘)    //‘JavaScript‘
108     ‘JavaScript‘.padStart(12, ‘Hi‘)    //‘HiJavaScript‘
109     ‘JavaScript‘.padStart(13, ‘Hi‘)    //‘HiHJavaScript‘
110     ‘JavaScript‘.padStart(12)          //‘  JavaScript‘
111 
112     /**
113      * ES8 Function
114      * ES8 函數參數列表與調用中的尾部逗號
115      * 該特性允許我們在定義或者調用函數時添加尾部逗號而不報錯。
116      */
117     let foo = function (a,b,c,) {
118         console.log(‘a:‘, a)
119         console.log(‘b:‘, b)
120         console.log(‘c:‘, c)
121     }
122     foo(1, 3, 4, )
123 }

ES7-Es8 js代碼片段