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