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: truetips:
这里我们可以看到成功看不到age这个属性和值了。但我又想看下它们属性并不改变它怎么办呢。这里我们就可以使用Object.getOwnPropertyDescriptors()看到obj里所有的属性了。
在这里拓展下：defineProperty有三个属性（对象，要操作的元素，描述符） 这个描述符包括几个属性：
* value [属性的值]
* writable [属性的值是否可被改变]
* enumerable [属性的值是否可被枚举]
* configurable [描述符本身是否可被修改，属性是否可被删除]