Notes on ES7 and ES8

Keywords: React angular Vue axios

ES7 has two more features than ES6
1.Array.prototype.includes
2. Exponent operator
ES8 new proposal:
1.Object.values / Object.entries
2. String padding
3.Object.getOwnPropertyDescriptors
4. Trailing commas in function parameter list and call
5. Asynchronous functions

Detailed explanation:
1.Array.prototype.includes
Array.prototype.includes replaces indexOf method to detect whether the value exists in the array,
Using indexOf to determine whether an array has a value is based on the position of an element in the array or
-When such an element cannot be found, it returns a number instead of a Boolean value.
let arr = ['react', 'angular', 'vue']

// WRONG
if (arr.indexOf('react')) { // 0 -> evaluates to false, definitely as we expected
  console.log('Can use React') // this line would never be executed
}

// Correct
if (arr.indexOf('react') !== -1) {
  console.log('Can use React')
}

//Or use a little hack bit operator ~ to make the code more compact, because ~ (bit exclusive or) is equivalent to - (a + 1) for any number:

let arr = ['react', 'angular', 'vue']

// Correct
if (~arr.indexOf('react')) {
  console.log('Can use React')
}

//Equivalent to using include code in ES7
let arr = ['react', 'angular', 'vue']

// Correct
if (arr.includes('react')) {
  console.log('Can use React')
}

includes It can also be applied to strings
eg: 
   let str = 'React Quickly'

    // Correct
    if (str.toLowerCase().includes('react')) {  // true
      console.log('Found "react"')  
    }

includes directly returns a Boolean value, not a value
Extension: includes can have two parameters
includes(a,fromIndex)// a: check whether there is a value, fromIndex:
Match from a specific index value
console.log(['a', 'b', 'c'].includes('a', 1)) // === false)

2.Exponentiation Operator(Power operation)
Es6 Medium, Math.pow You can create a short recursive arrow function
calculateExponent = (base, exponent) => base*((--exponent>1)?calculateExponent(base, exponent):base)
console.log(calculateExponent(7,12) === Math.pow(7,12)) // true
console.log(calculateExponent(2,7) === Math.pow(2,7)) // true

es7 In, developers with digital wizards can use shorter syntax
let a = 7 ** 12
let b = 2 ** 7
console.log(a === Math.pow(7,12)) // true
console.log(b === Math.pow(2,7)) // true

2.String padding(String fill)
  console.log('react'.padStart(10).length)         // "       react" is 10
  console.log('backbone'.padStart(10).length)         // "  backbone" is 10

  //The default fill character is the space bar
  console.log('react'.padStart(10, '_'))         // "_____react"
  console.log('backbone'.padStart(10, '*'))         // "**backbone"

3.Asynchronous function (or async/await)Feature operation is Promise Most important function
 axios.get(`/q?query=${query}`)
  .then(response => response.data)
  .then(data => {
    this.props.processfetchedData(data) // Defined somewhere else
  })
  .catch(error => console.log(error))

Reference website: https://www.jianshu.com/p/a138a525c287

Posted by usawh on Mon, 04 May 2020 01:05:12 -0700