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有三个属性(对象,要操作的元素,描述符) 这个描述符包括几个属性:
* value [属性的值] 
* writable [属性的值是否可被改变]
* enumerable [属性的值是否可被枚举]
* configurable [描述符本身是否可被修改,属性是否可被删除]

你可能感兴趣的:(javascript,html,html5,es8,es6)