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 [描述符自己是否可被修改，属性是否可被删除]