阅读:4248回复:2
Javascript之ES7详解、ES8详解ES7+ES8 前言 本篇文章主要介绍ES7+ES8的一些新功能,并结合ES6的一些API做出了相应的比较。 ES7 1.Array.prototype.includes() includes()作用,是查找一个值在不在数组里,若是存在则返回true,不存在返回false. 1.基本用法: ['a', 'b', 'c'].includes('a') // true ['a', 'b', 'c'].includes('d') // false 2.接收俩个参数:要搜索的值和搜索的开始索引 ['a', 'b', 'c', 'd'].includes('b') // true ['a', 'b', 'c', 'd'].includes('b', 1) // true ['a', 'b', 'c', 'd'].includes('b', 2) // false 3.与ES6中的indexOf()比较 有些时候是等效的 ['a', 'b', 'c'].includes('a') //true ['a', 'b', 'c'].indexOf('a') > -1 //true var arr = [1, 2, 3] var a = 1; arr.includes(a) //true arr.indexOf(a) //0
[1, +0, 3, 4].includes(-0) //true [1, +0, 3, 4].indexOf(-0) //1
var arr = [1, [2, 3], 4] 错误用法:arr.includes([2, 3]) //false 错误用法:arr.indexOf([2, 3]) //-1 优缺点比较
let demo = [1, NaN, 2, 3] demo.indexOf(NaN) //-1 demo.includes(NaN) //true 总结: 由于它对NaN的处理方式与indexOf不同,假如你只想知道某个值是否在数组中而并不关心它的索引位置,建议使用includes()。作者:LinDaiDai_霖呆呆 链接:https://www.jianshu.com/p/13c5d002478b |
|
沙发#
发布于:2022-02-15 16:47
2.求幂运算符 基本用法: 3 ** 2 //9 效果同 Math.pow(3, 2) //9 由于是运算符,所以可以和 +=一样的用法 var b = 3; b **= 2; console.log(b); //9 ES8 1.async await 异步函数async function() 1.1作用 避免有更多的请求操作,出现多重嵌套,也就是俗称的“回调地狱” this.$http.jsonp('/login', (res) => { this.$http.jsonp('/getInfo', (info) => { // do something }) }) 因此提出了ES6的Promise,将回调函数的嵌套,改为了链式调用: var promise = new Promise((resolve, reject) => { this.login(resolve); }) .then(() => { this.getInfo() }) .catch(() => { console.log('Error') }) 1.2声明方式 异步函数存在以下四种使用形式:
1.3支持返回Promise和同步的值 async用于定义一个异步函数,该函数返回一个Promise。 如果async函数返回的是一个同步的值,这个值将被包装成一个理解resolve的Promise,等同于return Promise.resolve(value)。 await用于一个异步操作之前,表示要“等待”这个异步操作的返回值。await也可以用于一个同步的值。 //async await //返回Promise let timer = async function timer() { return new Promise((reslove, reject) => { setTimeout(() => { reslove('a'); }, 1000); }) } timer().then(result => { console.log(result); }).catch(err => { console.log(err.message); }) //返回同步的值 let sayHello = async function sayHello() { let hi = 'hello world'//等同于return Promise.resolve(hi); return hi } sayHello().then(res => { console.log(res) }).catch(err => { console.log(err.message); }) |
|
板凳#
发布于:2022-02-15 17:06
1.4对异常的处理 首先来看下Promise中对异常的处理 1.使用reject let promise = new Promise((reslove, reject) => { setTimeout(() => { reject('promise使用reject抛出异常') }, 1000) }) promise().then(res => { console.log(res) }) .catch(err => { console.log(err) //'promise使用reject抛出异常' }) 2.使用new Error() let promise = new Promise((reslove, reject) => { throw new Error('promise使用Error抛出异常') //使用throw异常不支持放在定时器中 }) promise().then(res => { console.log(res) }) .catch(err => { console.log(err.message) //'promise使用Error抛出异常' }) async对异常的处理也可以直接用.catch()捕捉到 //async抛出异常 let sayHi = async sayHi => { throw new Error('async抛出异常'); } sayHi().then(res => { console.log(res); }) .catch(err => { console.log(err.message); }) 和Promise链的对比: 我们的async函数中可以包含多个异步操作,其异常和Promise链有相同之处,如果有一个Promise被reject()那么后面的将不会再进行。 let count = () => { return new Promise((resolve, reject) => { setTimeout(() => { reject('promise故意抛出异常') }, 1000); }) } let list = () => { return new Promise((resolve, reject) => { setTimeout(() => { resolve([1, 2, 3]) }, 1000); }) } let getList = async () => { let c = await count() console.log('async') //此段代码并没有执行 let l = await list() return { count: c, list: l } } console.time('start'); getList().then(res => { console.log(res) }) .catch(err => { console.timeEnd('start') console.log(err) }) //start: 1000.81494140625ms //promise故意抛出异常 可以看到上面的案例,async捕获到了一个错误之后就会立马进入.catch()中,不执行之后的代码 |
|