javaScript中ES6 ES7、ES8、ES9、ES10实用的新特性

为了让浏览器兼容更强，记得babel一下

ES7 新特性

1.Array.prototype.includes() 方法

在 ES6 中我们有 String.prototype.includes()可以查询给定字符串是否包含一个字符

在 ES7 中，我们在数组中也可以用 Array.prototype.includes方法来判断一个数组是否包含一个指定的值，根据情况，如果包含则返回 true，否则返回 false。

const arr = [1,3,5,2,'8',NaN,-0]

arr.includes(1)// true

arr.includes(1,2)// false 该方法的第二个参数表示搜索的起始位置，默认为 0

arr.includes('1')// false

arr.includes(NaN)// true

arr.includes(+0)// true

2.求幂运算符 **

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

console.log(2**10);// 输出 1024zhicc

console.log(Math.pow(2,10))// 输出 1024

ES8 新特性

1.1.Async/Await

我们都知道使用 Promise 能很好地解决回调地狱的问题，但如果处理流程比较复杂的话，那么整段代码将充斥着 then，语义化不明显，代码不能很好地表示执行流程，那有没有比 Promise 更优雅的异步方式呢？

假如有这样一个使用场景：需要先请求 a 链接，等返回信息之后，再请求 b 链接的另外一个资源。下面代码展示的是使用 fetch 来实现这样的需求，fetch 被定义在 window 对象中，它返回的是一个 Promise 对象。

axios({

url: 'xxxx'

}).then(response => {

console.log(response)

return fetch('https://juejin.im/')

}).then(response => {

}).catch(error => {

console.log(error)

})

虽然上述代码可以实现这个需求，但语义化不明显，代码不能很好地表示执行流程。基于这个原因，ES8 引入了 async/await，这是 JavaScript 异步编程的一个重大改进，提供了在不阻塞主线程的情况下使用同步代码实现异步访问资源的能力，并且使得代码逻辑更加清晰

async function fun (){

try {

let res =await axios({url:'xxxx'})

console.log(res)

let res2 =await axios({url:'xxxx'})

console.log(res2)

}catch (err) {

console.error(err)

}

}

fun()

ES9 新特性

1.for await of

for of 方法能够遍历具有 Symbol.iterator 接口的同步迭代器数据，但是不能遍历异步迭代器。ES9 新增的 for await of 可以用来遍历具有 Symbol.asyncIterator 方法的数据结构，也就是异步迭代器，且会等待前一个成员的状态改变后才会遍历到下一个成员，相当于 async 函数内部的 await。现在我们有三个异步任务，想要实现依次输出结果，该如何实现呢？

function Gen (time){

return new Promise(function (resolve, reject){

setTimeout(function (){

resolve(time)

}, time)

})

}

async function test (){

let arr = [Gen(2000), Gen(100), Gen(3000)]

for await (let itemof arr) {

console.log(Date.now(), item)

}

}

test()

// 1575536194608 2000

// 1575536194608 100

// 1575536195608 3000

2.Promise.prototype.finally()

Promise.prototype.finally() 方法返回一个 Promise，在 promise 执行结束时，无论结果是 fulfilled 或者是 rejected，在执行 then() 和 catch() 后，都会执行 finally 指定的回调函数。

axios({url: 'xxxx'})

.then((response) => {

console.log(response.status);

}).catch((error) => {

console.log(error);

}).finally(() => {

document.querySelector('#spinner').style.display ='none';

});

ES10 新特性

Array.prototype.flat()

多维数组是一种常见的数据格式，特别是在进行数据检索的时候。将多维数组打平是个常见的需求。通常我们能够实现，但是不够优雅。

flat() 方法会按照一个可指定的深度递归遍历数组，并将所有元素与遍历到的子数组中的元素合并为一个新数组返回。

const numbers1 = [1,2, [3,4, [5,6]]]

console.log(numbers1.flat()) // [1, 2, 3, 4, [5, 6]]

const numbers2 = [1,2, [3,4, [5,6]]]

console.log(numbers2.flat(2)) // [1, 2, 3, 4, 5, 6]

2.Array.prototype.flatMap()

有了 flat 方法，那自然而然就有 Array.prototype.flatMap 方法，flatMap() 方法首先使用映射函数映射每个元素，然后将结果压缩成一个新数组。从方法的名字上也可以看出来它包含两部分功能一个是 map，一个是 flat（深度为 1）。

let arr = [1,2,3]

console.log(arr.map(item => [item *2]).flat())// [2, 4, 6]

console.log(arr.flatMap(item => [item *2]))// [2, 4, 6]

3.Object.fromEntries()

Object.entries()

ES2017 引入了 Object.entries, 这个方法可以将对象转换为数组

Object.fromEntries 这个新的 API 实现了与 Object.entries 相反的操作。这使得根据对象的 entries 很容易得到 object。

const object = { x:23, y:24 };

const entries = Object.entries(object);// [['x', 23], ['y', 24]]

const result = Object.fromEntries(entries);// { x: 23, y: 24 }

4.try…catch

在 ES10 中，try-catch 语句中的参数变为了一个可选项。以前我们写 catch 语句时，必须传递一个异常参数。这就意味着，即便我们在 catch 里面根本不需要用到这个异常参数也必须将其传递进去

// ES10 之前

try {

// tryCode

}catch (err) {

// catchCode

}

这里 err 是必须的参数，在 ES10 可以省略这个参数：

// ES10

try {

console.log('Foobar')

}catch {

console.error('Bar')

}

7.BigInt

JavaScript 所有数字都保存成 64 位浮点数，这给数值的表示带来了两大限制。一是数值的精度只能到 53 个二进制位（相当于 16 个十进制位），大于这个范围的整数，JavaScript 是无法精确表示的，这使得 JavaScript 不适合进行科学和金融方面的精确计算。二是大于或等于 2 的 1024 次方的数值，JavaScript 无法表示，会返回 Infinity。

现在 ES10 引入了一种新的数据类型 BigInt（大整数），来解决这个问题。BigInt 只用来表示整数，没有位数的限制，任何位数的整数都可以精确表示。

创建 BigInt 类型的值也非常简单，只需要在数字后面加上 n 即可。例如，123 变为 123n。也可以使用全局方法 BigInt(value) 转化，入参 value 为数字或数字字符串。

const aNumber =111;

const aBigInt = BigInt(aNumber);

aBigInt ===111n// true

typeof aBigInt ==='bigint' // true

typeof 111 // "number"

typeof 111n// "bigint"