ES7 ES8 新特性

es7

includes()
指数操作符

1：Array.prototype.includes

includes()的作用，是查找一个值在不在数组里，若在，则返回true，反之返回false。基本用法：

['a', 'b', 'c'].includes('a')     // true
['a', 'b', 'c'].includes('d')     // false复制代码

Array.prototype.includes()方法接收两个参数：要搜索的值和搜索的开始索引。当第二个参数被传入时，该方法会从索引处开始往后搜索（默认索引值为0）。若搜索值在数组中存在则返回true，否则返回false。且看下面示例：

['a', 'b', 'c', 'd'].includes('b')         // true
['a', 'b', 'c', 'd'].includes('b', 1)      // true
['a', 'b', 'c', 'd'].includes('b', 2)      // false复制代码

那么，我们会联想到ES6里数组的另一个方法indexOf，下面的示例代码是等效的：

['a', 'b', 'c'].includes('a')          //true
['a', 'b', 'c'].indexOf('a') > -1      //true复制代码

此时，就有必要来比较下两者的优缺点和使用场景了。

简便性

从这一点上来说，includes略胜一筹。熟悉indexOf的同学都知道，indexOf返回的是某个元素在数组中的下标值，若想判断某个元素是否在数组里，我们还需要做额外的处理，即判断该返回值是否>-1。而includes则不用，它直接返回的便是Boolean型的结果。

精确性

两者使用的都是 === 操作符来做值的比较。但是includes()方法有一点不同，两个NaN被认为是相等的，即使在NaN === NaN结果是false的情况下。这一点和indexOf()的行为不同，indexOf()严格使用===判断。请看下面示例代码：

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

demo.indexOf(NaN)        //-1
demo.includes(NaN)       //true复制代码

上述代码中，indexOf()方法返回-1，即使NaN存在于数组中，而includes()则返回了true。

提示：由于它对NaN的处理方式与indexOf不同，假如你只想知道某个值是否在数组中而并不关心它的索引位置，建议使用includes()。如果你想获取一个值在数组中的位置，那么你只能使用indexOf方法。

includes()还有一个怪异的点需要指出，在判断 +0 与 -0 时，被认为是相同的。

[1, +0, 3, 4].includes(-0)    //true
[1, +0, 3, 4].indexOf(-0)     //1复制代码

在这一点上，indexOf()与includes()的处理结果是一样的，前者同样会返回 +0 的索引值。

注意：在这里，需要注意一点，includes()只能判断简单类型的数据，对于复杂类型的数据，比如对象类型的数组，二维数组，这些，是无法判断的

2:求幂运算符（**）

基本用法

3 ** 2           // 9
复制代码

效果同：

Math.pow(3, 2)   // 9
复制代码

** 是一个用于求幂的中缀算子，比较可知，中缀符号比函数符号更简洁，这也使得它更为可取。下面让我们扩展下思路，既然说**是一个运算符，那么它就应该能满足类似加等的操作，我们姑且称之为幂等，例如下面的例子，a的值依然是9：

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

复制代码

ES8

Object.values()
Object.entries()
padStart()
padEnd()
Object.getOwnPropertyDescriptors()
函数参数列表结尾允许逗号
Async/Await

1:Object.values()

使用Object.values()遍历对象的属性值，无需使用使用属性名：

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

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

2:Object.entries()

使用Object.entries()遍历对象的属性名和属性值：

let obj = {a: 1, b: 2, c: 3}; 
Object.entries(obj).forEach(([key, value]) =>{   
 console.log(key + ": " + value); // 输出a: 1, b: 2, c: 3
})
复制代码

3:padStart()

使用padStart()可以在字符串前面填充指定的字符串：

console.log('0.00'.padStart(20))
console.log('10,000.00'.padStart(20))   
console.log('250,000.00'.padStart(20))复制代码

输出结果如下：

      0.00 
 10,000.00
250,000.00
复制代码

4:padEnd()

使用padEnd()可以在字符串后面填充指定的字符串：

console.log('0.00'.padEnd(20) + '0.00' ) 
console.log('10,000.00'.padEnd(20) + '10,000.00' )    
console.log('250,000.00'.padEnd(20) + '250,000.00')复制代码

输出如下：

0.00                0.00
10,000.00           10,000.00
250,000.00          250,000.00
复制代码

5:Object.getOwnPropertyDescriptors()

Object.getOwnPropertyDescriptors()相当于Object.getOwnPropertyDescriptor()的复数形式，可以获取对象的所有自身属性的描述符：

azatsBooks对象的定义如下：

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

 console.log(Object.getOwnPropertyDescriptors(azatsBooks)) 
/** 输出azatsBooks对象所有自身属性的属性描述[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  }}**复制代码

6: 函数参数列表结尾允许逗号

var f = function(a, 
 b, 
 c, 
 d, // d之后允许带逗号
) { 
  console.log(d)}
复制代码

7: Async/Await

Async/Await使得异步代码看起来像同步代码，这正是它的魔力所在：

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)})
复制代码

2:求幂运算符（**）

猜你喜欢