ES7/ES8新特性总结

es7新特性

ES2016添加了两个小的特性来说明标准化过程：

数组includes()方法，用来判断一个数组是否包含一个指定的值，根据情况，如果包含则返回true，否则返回false。
a ** b指数运算符，它与 Math.pow(a, b)相同。

1.Array.prototype.includes()

includes() 函数用来判断一个数组是否包含一个指定的值，如果包含则返回 true，否则返回 false。

includes 函数与 indexOf 函数很相似，下面两个表达式是等价的：

arr.includes(x)
arr.indexOf(x) >= 0

接下来我们在ES7之前的做法来判断数字中是否包含某个元素：

在ES7之前的做法
- 使用 indexOf()验证数组中是否存在某个元素，这时需要根据返回值是否为-1来判断：

let arr = ['react', 'angular', 'vue']
if (arr.indexOf('react') !== -1) console.log('react')

使用ES7的includes()
- 使用includes()验证数组中是否存在某个元素，这样更加直观简单

let arr = ['react', 'angular', 'vue']
if (arr.includes('react') console.log('react')

他们的区别在于，includes可以查找NaN，而indexOf不能：

扫描二维码关注公众号，回复： 14766697 查看本文章

[NaN].includes(NaN) // true
[NaN].indexOf(NaN)  // -1

另外include是不区分+0和-0的：

[-0].includes(+0)  // true

2.指数操作符

在ES7中引入了指数运算符 `**`， `**`具有与 `Math.pow(..)`等效的计算结果。

使用指数运算符**，就像+、-等操作符一样：

console.log(2 ** 10)

另外幂操作符的优先级是非常高的，** > * > +

2**2 * 2  // 8
2 ** (2*2)  // 16

es8新特性

- async/await
- `Object.values()`
- `Object.entries()`
- String padding: `padStart()`和 `padEnd()`，填充字符串达到当前长度
- 函数参数列表结尾允许逗号
- `Object.getOwnPropertyDescriptors()`
- `ShareArrayBuffer`和 `Atomics`对象，用于从共享内存位置读取和写

1.async/await

ES2018引入异步迭代器（asynchronous iterators），这就像常规迭代器，除了 `next()`方法返回一个Promise。 async/await也可以说是co模块和生成器函数的语法糖。用更加清晰的语义解决js异步代码，使得异步代码看起来像同步代码。因此 `await`可以和 `for...of`循环一起使用，以串行的方式运行异步操作。例如：

async function process(array) {
    for await(let i of array) {
        doSomething(i)
    }
}

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

2.Object.values()

Object.values()是一个与 Object.keys()类似的新函数，但返回的是Object自身属性的所有值，不包括继承的值。

假设我们要遍历如下对象 obj的所有值：

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

使用Object.values() :ES8

const value = Object.values(obj1)
console.log(values)   // [1, 2, 3]

3.Object.entries()

Object.entries()函数返回一个给定对象自身可枚举属性的键值对的数组。

接下来我们来遍历上文中的 obj对象的所有属性的key和value：

不使用Object.entries() :ES7

Object.keys(obj).forEach( key => {
    conosle.log('key:' + key + 'value:' + obj[key])
})
// key: b value: 2

使用Object.entries() :ES8

for(let [key, value] of Object.entries(obj1)) {
    console.log(`key: ${key} value:${value}` )
}

4.String padding

在ES8中String新增了两个实例函数 String.prototype.padStart和 String.prototype.padEnd，允许将空字符串或其他字符串添加到原始字符串的开头或结尾。

String.padStart(targetLength,[padString])

targetLength:当前字符串需要填充到的目标长度。如果这个数值小于当前字符串的长度，则返回当前字符串本身。
padString:(可选)填充字符串。如果字符串太长，使填充后的字符串长度超过了目标长度，则只保留最左侧的部分，其他部分会被截断，此参数的缺省值为 " "。

String.padEnd(targetLength,padString])

targetLength:当前字符串需要填充到的目标长度。如果这个数值小于当前字符串的长度，则返回当前字符串本身。
padString:(可选) 填充字符串。如果字符串太长，使填充后的字符串长度超过了目标长度，则只保留最左侧的部分，其他部分会被截断，此参数的缺省值为 " "；

使用实例：

当我们格式化时间的时候，如果时间需要处理成：2022-06-19这种格式的时候，为了显示当前日期，并且当月份和日期小于10的时候在前面补0，那我就可以这样做:

const date = new Date()
let year = date.getFullYear();  //获取年份
let month = date.getMonth().toString().padStart(2,'0');  //获取月份
let day = date.getDate().toString().padStart(2,'0');  //获取日期
const dataStr = year + '-' + month + '-' + day

5.Object.getOwnPropertyDescriptors()

Object.getOwnPropertyDescriptors()函数用来获取一个对象的所有自身属性的描述符,如果没有任何自身属性，则返回空对象