ES8新特性

ES8

今天来学习下es8新增的一些API。

    1、 Async/Await 语法使用，与promise有那些关系？
    2、 Object.values()、Object.keys()、Object.entries(),三者有什么关联？
    3、 String padding？语法和使用场景有那些？
    4、 Object.getOwnPropertyDescriptors()是什么？描述符的使用场景有哪些？

一、Async/Await

 1、Async/Await是什么？为什么出现？与promise有那些关系？

    async 和 await 是 Promise 的拓展，也就是在函数内部new Promise了一个对象实例，不需要我们手动声明一个Promise实例，因为js是单线程的，使用promise之后可以让我们书写操作异步更方便，而 async 是让我们写起 Promise 像同步操作。

//首先回顾下promise：
1、首先在你的函数中实例化一个promise对象
2、最后在调用中通过函数拿到promise实例
3、通过实例调用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

2、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 、128、"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 、128、

tips:

1. async 函数显式返回的不是 Promise 的话，会自动包装成 Promise 对象

2. await 后面一定是 Promise 对象，如果不是会自动包装成 Promise 对象

3. await 只能在 async 标记的函数内部使用，单独使用会触发 Syntax error

二、Object.values()、Object.keys()、Object.entries(),三者有什么关联？

1、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"]

2、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 是在对象上找到可枚举的属性的值，所以只要这个对象是可枚举的就可以，不只是 {}；

3、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

三、String padding？

es8中增加了字符串补白的方法就是String.prototype.padStart 和 String.prototype.padEnd；接下来咱们就来用一下。

1、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了

2、String.prototype.padEnd

方法会用一个字符串填充当前字符串（如果需要的话则重复填充），返回填充后达到指定长度的字符串。从当前字符串的末尾（右侧）开始填充。

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

三、 Object.getOwnPropertyDescriptors()是什么？描述符的使用场景有哪些？

方法返回指定对象上一个自有属性对应的属性描述符。（自有属性指的是直接赋予该对象的属性，不需要从原型链上进行查找的属性）

 1、比如我们想让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)

2、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有三个属性（对象，要操作的元素，描述符） 这个描述符包括几个属性：

1. value [属性的值]
2. writable [属性的值是否可被改变]
3. enumerable [属性的值是否可被枚举]
4. configurable [描述符本身是否可被修改，属性是否可被删除]