es7

  • includes()
  • Exponential operator

1: Array. Prototype. Includes

Includes () checks if a value is in an array and returns true or false. Basic usage:

['a'.'b'.'c'].includes('a') / /true
['a'.'b'.'c'].includes('d') / /falseCopy the code

The array.prototype.includes () method takes two parameters: the value to be searched and the starting index of the search. When the second argument is passed in, the method searches backwards from the index (the default index value is 0). Return true if the search value exists in the array, false otherwise. Consider the following example:

['a'.'b'.'c'.'d'].includes('b') / /true
['a'.'b'.'c'.'d'].includes('b'1) / /true
['a'.'b'.'c'.'d'].includes('b', 2) / /falseCopy the code

The following example code is equivalent to indexOf, another ES6 array method:

['a'.'b'.'c'].includes('a') / /true
['a'.'b'.'c'].indexOf('a') > -1      //trueCopy the code

At this point, it is necessary to compare the advantages and disadvantages and use scenarios of the two.

  • ease

In this respect, includes is superior. If you are familiar with indexOf, indexOf returns the subscript value of an element in an array. If you want to determine whether an element is in an array, you need to do additional processing: the return value is >-1. Includes does not. It returns a Boolean result.

  • accuracy

Both use the === operator to compare values. But the includes() method is a bit different, and two Nans are considered equal, even if the NaN === NaN result is false. This differs from the behavior of indexOf(), which strictly uses === judgment. Take a look at the following sample code:

let demo = [1, NaN, 2, 3]

demo.indexOf(NaN)        //-1
demo.includes(NaN)       //trueCopy the code

In the code above, the indexOf() method returns -1, even if NaN is in the array, and includes() returns true.

Tip: Since it handles NaN differently than indexOf, use includes() if you just want to know if a value is in an array and don’t care about its index position. If you want to get the position of a value in an array, you can only use indexOf.

Includes () also has an odd point to point out that +0 is considered the same as -0 when judging.

[1, +0, 3, 4].includes(-0)    //true
[1, +0, 3, 4].indexOf(-0)     //1Copy the code

In this respect, indexOf() is treated the same as includes(), which also returns an index value of +0.

Note: it is important to note that includes() can only determine simple types of data, not complex types of data, such as arrays of object types, two-dimensional arrays, etc

2: Exponentiation operator (**)

Basic usage

3 ** 2           // 9
Copy the code

The effect with:

Math.pow(3, 2)   // 9
Copy the code

** is an infix operator used for exponentiation, and by comparison, the infix symbol is more concise than the function symbol, which also makes it preferable. If ** is an operator, it should be able to do something like add and equal. Let’s call it idempotent. For example, a is still 9:

let a = 3
a **= 2
// 9

Copy the code

ES8

  • Object.values()
  • Object.entries()
  • padStart()
  • padEnd()
  • Object.getOwnPropertyDescriptors()
  • A comma is allowed at the end of a function argument list
  • Async/Await

1:Object.values()

Use object.values () to iterate over the attribute values of an Object without using the attribute name:

let obj = {a: 1, b: 2, c: 3}

Object.values(obj).forEach(value =>{ console.log(value); // output 1, 2, 3})

2:Object.entries()

Use object.entries () to traverse the property name and value of an Object:

let obj = {a: 1, b: 2, c: 3}; 
Object.entries(obj).forEach(([key, value]) =>{   
 console.log(key + ":"+ value); A: 1, b: 2, c: 3})Copy the code

3:padStart()

Use padStart() to populate the specified string before the string:

console.log('0.00'.padStart(20))
console.log('10000.00'.padStart(20))   
console.log('250000.00'.padStart(20))Copy the code

The following output is displayed:

0.00 10000.00 250000.00Copy the code

4:padEnd()

Use padEnd() to populate the specified string after the string:

console.log('0.00'.padEnd(20) + '0.00' ) 
console.log('10000.00'.padEnd(20) + '10000.00' )    
console.log('250000.00'.padEnd(20) + '250000.00')Copy the code

The output is as follows:

0.00                0.00
10,000.00           10,000.00
250,000.00          250,000.00
Copy the code

5:Object.getOwnPropertyDescriptors()

Object. GetOwnPropertyDescriptors () is equivalent to the Object. GetOwnPropertyDescriptor (plural), you can get all their property descriptor Object:

The azatsBooks object is defined as follows:

let azatsBooks = {    
books: ['React Quickly'],    
get latest()    {  
      let numberOfBooks = this.books.length;       
      if (numberOfBooks == 0) return undefined;      
      return this.books[numberOfBooks - 1];   
}};Copy the code


The console. The log (Object. GetOwnPropertyDescriptors (azatsBooks)) / * * output azatsBooks all its own attributes of the Object description [Object Object] {books: [object Object] { configurable:true,  
  enumerable: true,   
 value: ["React Quickly"], 
   writable: true 
 }, 
 latest: [object Object] {  
  configurable: true,   
 enumerable: true,  
  get: function get latest() {  
    let numberOfBooks = this.books.length  
    if (numberOfBooks == 0) return undefined   
   return this.books[numberOfBooks - 1]    },   
 set: undefined  }}**Copy the code

6: Allows commas at the end of function argument lists

var f = function(a, b, c, d, // d allows commas) {console.log(d)}Copy the code

7: Async/Await

Async/Await makes asynchronous code look like synchronous code, which is where its magic lies:

async fetchData(query) =>{ try { const response = await axios.get(`/q? query=${query}`); 
       const data = response.data;     
   return data;    }    
catch (error)    {      
  console.log(error)   
 }} 
fetchData(query).then(data =>{    this.props.processfetchedData(data)})
Copy the code