ES8&＃xff08;ES2017&＃xff09;新功能
1.字符串填充。
padStart和padEnd&＃xff0c;可以通过这两个方法给字符串以padSting开始或结束&＃xff0c;在默认情况下用空 格填充。函数声明如下&＃xff1a;
str.padStart(targetLength[, padString])str.padEnd(targetLength[, padString])
参数说明&＃xff1a; 第一个参数是targetLength。是我们最终想要得到的字符串的长度。第二个参数是可选的padString,它用于填充源字符串的字符串。
使用示例&＃xff1a;
2.对象新增原型方法
Object,values方法和for...in循环所提供的顺序相同的顺序返回给定对象自己的枚举属性性的数组。
Object.values(obj)
返回的是含有对象的属性值的数组
Object.keys(obj) 返回得到的是包含对象的属性名的对象&＃xff08;非新增&＃xff09;
Object.entries(obj) 返回的是一个数组。示例如下&＃xff1a;
Object.getOwnPropertyDescriptors
该方法返回指定对象的所有属性描述符。
configurable: 可配置 enumerable:可枚举 writable:可写
3.异步函数
学习异步函数之前&＃xff0c;需要深入了解ES6中的promise
Promise对象可以理解为一次将要执行的操作&＃xff08;异步操作&＃xff09;&＃xff0c;使用了Promise对象之后可以用一种链式调用方式来组织代码。让代码更加直观&＃xff0c;Promise.all这样的方法存在&＃xff0c;可以让同时执行多个操作变得简单
promise异步的过程
eatSomething(order).then(res &＃61;>{ /*pay*/})
.then(res1 &＃61;> { /*wait*/ })
.then(res2 &＃61;> { /*eat*/ })
.catch(error &＃61;>{ /*error*/})
promise的主要优点就是可以将对列事件以一种直观的方式链接在一起&＃xff0c;回调显得简单也更直观。
promise中有两个重要的方法&＃xff1a;resolve和reject
function helloWorld (ready) {return new Promise(function (resolve, reject) {if (ready) {resolve("Hello World!");} else {reject("Good bye!");}});
}helloWorld(true).then(function (message) {alert(message);
}, function (error) {alert(error);
});
说明&＃xff1a; resolve 方法可以使Promise对象的状态改变成功&＃xff0c;同时传递一个参数用于后续成功的操作。
reject 方法将Promise对象的状态改变为识别&＃xff0c;同时将错误的信息传递到后续错误处理的操作。
promise有三种状态&＃xff1a;
Fulfilld: 成功的状态
Rejected: 失败的状态
Pending:既不是Fulfilld也不是Rejected的状态&＃xff0c;可以理解为Promise对象实例创建时的初始状态。
helloWorld的例子中then方法就是根据Promise对象的状态来确定执行的操作&＃xff0c;resolve时执行第一个函数&＃xff08;onFulfilld&＃xff09;,reject时执行第二个函数&＃xff08;onReject&＃xff09;。
【Promise.all】和【Promise.race】
Promise.all可以接收一个元素为Promise对象的数组作为参数&＃xff0c;当这个数组里所有的Promise对象都变为resolve时&＃xff0c;该方法才会返回。
var p1 &＃61; new Promise( reslove &＃61;> {setTimeout( () &＃61;> {reslove(&＃39;hello&＃39;)}, 3000)
})var p2 &＃61; new Promise(reslove &＃61;> {setTimeout( () &＃61; > {resolve(&＃39;world&＃39;)},1000)
}) Promise.all([p1,p2]).then(result &＃61;> {console.log(result) // [&＃39;hello&＃39;,&＃39;world&＃39;]
})
promise.race同样接收一个数组。不同的是只要该数组中的Promise对象的状态发生变化&＃xff08;无论是resolve还是reject都会返回&＃xff09;
我们对promise有了一定的认识&＃xff0c;现在来看看es8中新增的关键字async和await
async函数形式
函数声明&＃xff1a;
async function foo () {}
函数表达式&＃xff1a;
const foo &＃61; async function() {}
方法定义&＃xff1a;
const obj &＃61; {async foo () {} }
箭头函数
async () &＃61;> {}
async函数总是返回Promise&＃xff0c;async通过return自动将返回值包装成一个prommise对象返回
正常&＃xff08;Fulfill&＃xff09;
// async函数
async function foo () {return &＃39;a&＃39;
}// Promise函数
function foo () {return Promise.reslove(&＃39;a&＃39;)
}
异常&＃xff08;Reject&＃xff09;
// async函数
async function foo () {throw new Error(&＃39;error&＃39;)
}
// Promise
function foo () {return Promise.reject(new Error(&＃39;error&＃39;))
}
注&＃xff1a; 当返回值本身就是一个Promise对象时&＃xff0c;async函数的return并不会对返回值进行二次包装
await总是按顺序执行
使用await之前&＃xff0c;需要搞清楚运行机制尤其是在执行顺序上&＃xff0c;完全同步的思维也许并不适用于async函数
1.asyn函数和普通函数一样按顺序执行&＃xff0c;同时执行在执行await语句时&＃xff0c;返回一个Promise对象
2.await可以理解为将async函数挂起&＃xff0c;直到等待的Promise被fulfill或者reject&＃xff0c;再继续执行之后的代码
3.async函数的返回值和普通的Promise没有区别
await只能影响直接包裹它的async函数。因此在callback函数的await并不会挂起真个async函数执行
参考文献
ECMAScript规范第8版(ES2017)已发布&＃xff0c;新功能一览 ES8&＃xff08;ECMAScript 2017&＃xff09; 语言规范发布&＃xff0c;附ES6&＃xff0c;ES7&＃xff0c;ES8规范
使用ES2017 async/await函数的注意点
使用 ES2017 中的 Async(异步) 函数 和 Await(等待)
京公网安备 11010802041100号