ES7-Es8 js代码片段

Posted 2020-12-31 csxairou

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 }