ES8

Today, let's learn some new API of es8.

1. What is the relationship between the use of Async/Await syntax and promise?
2. What is the relationship between Object.values(), Object.keys(), and Object.entries()?
3, String padding？ What are the syntax and usage scenarios?
4. What is Object.getOwnPropertyDescriptors()? What are the usage scenarios of descriptors?

I. Async/Await

1. What is Async/Await? Why does it appear? What is the relationship with promise?

Async and await are extensions of Promise, that is to say, there is an object instance of new Promise in the function. We don't need to declare a Promise instance manually. Because js is single thread, it is more convenient for us to write asynchronously after using Promise, and async lets us write Promise like synchronous operation.

//First, we review promise:
1,First instantiate a promise object
2,Finally, in the call, get the promise Example
3,Call through instance then Method for asynchronous processing

    
async function fn () {
  return 128;
}
fn().then(val => window.console.log(val)) //128

//In fact, you can get 128 here. In fact, the return is a promise object. Although we write 128, this is because 128 is internally packaged as Promise.resolve(128)

async function fn () {
  return Promise.resolve(128)
}
fn().then(val => window.console.log(val)) //128

2. Usage and precautions of await

As follows, we want the code to execute in order from top to bottom. In fact, we use await to perform the desired results in a synchronous way.

    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))
//Print as follows: 999, 128, "hahahah!"

So what if we want him to do it in sequence? Look at the code below. Actually, we know the code here

  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. If the async function does not explicitly return Promise, it will be automatically wrapped as Promise object

2. Promise object must be behind await. If not, it will be automatically wrapped as promise object

3. await can only be used inside the async marked function. If it is used alone, Syntax error will be triggered.

2. What is the relationship between Object.values(), Object.keys(), and Object.entries()?

1,Object.values() ？

The Object.values() method returns an array of all the enumerable property values of a given object. The order of the values is the same as that of the for...in loop (the difference is that the for in loop enumerates the properties in the prototype chain).

//Before, if we wanted to get the key and value values of an object, we often used for in. Now, the Object.values() can let us get the value values of an object directly;
let  obj={name:'miya',age:18,job:'FE'};
Object.values(obj) //["miya", 18, "FE"]

2. set and map data formats use values()

It's not hard to see. In fact, whether using map or set format, they all have Iterator (iterative protocol).

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 is to find the value of the enumerable property on the object, so as long as the object is enumerable, it is not only {};

3,Object.entries()

Object.entries() returns an array whose elements correspond to the key value pairs of enumerable attributes found directly on the object. The order of the attributes is the same as that given by manually cycling the attribute values of an object.

Next, we use for of to traverse this object;

let  obj={name:'miya',age:18,job:'FE'};
for(let [k,v] of obj){
    console.log(k,v)
} // Uncaught TypeError: obj is not iterable

The result is wrong. Look at the reason for the error. Obj does not have an iterative property. Here we need to use Object.entries() to convert 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?

String.prototype.padStart and String.prototype.padEnd have been added to es8. Let's use them next.

1,String.prototype.padStart

The padStart() method fills the current string with another string (repeated, if necessary), so that the resulting string reaches the given length. Padding applied from the beginning (left side) of the current string.

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')
// It can be seen that 10 is not satisfied. We have made up for 0

2,String.prototype.padEnd

Method will fill the current string with a string (repeat if necessary), and return a string of the specified length after filling. Fills from the end (right) of the current string.

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

3. What is Object.getOwnPropertyDescriptors()? What are the usage scenarios of descriptors?

Method returns the property descriptor corresponding to a self owned property on the specified object. (self owned attribute refers to the attribute directly assigned to the object, which does not need to be searched from the prototype chain.)

1. For example, what should we do if we want some properties and values in the Object not to be enumerated? What do es5 and es6 do?

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'). Under the extension, this is the reflection in es6. You can also view the descriptor on an element of an object. Accepts 2 parameters (object. Attribute);

Reflect.getOwnPropertyDescriptor(obj,'age')//
configurable: true
enumerable: false
value: 18
writable: true

tips:

Here we can see that success can't see the property and value of age. But I want to see what they do without changing their properties. Here we can use Object.getOwnPropertyDescriptors() to see all the properties in obj.

In this extension: defineProperty has three properties (object, element to operate, descriptor). This descriptor includes several properties:
*Value [value of attribute] 
*writable [whether the value of the property can be changed]
*enumerable [whether the value of the property can be enumerated]
*Configured [whether the descriptor itself can be modified and whether the attribute can be deleted]