谈谈ES6语法(汇总下篇)
本次的ES6语法的汇总总共分为上、中、下三篇,本篇文章为下篇。
往期系列文章:
客套话不多说了,直奔下篇的内容~
async函数
ES2017标准引入了async
函数,使得异步操作更加方便。async
函数是Generator
函数的语法糖。不打算写Generator函数,感兴趣的话可以看文档。与Generator
返回值(Iterator对象)不同,async
返回的是一个Promise
对象。
用法
async
函数返回一个Promise对象,可以使用then
方法添加回调函数。当函数执行的时候,一旦遇到await
就会先返回,等到异步操作完成,再接着执行函数体内后面的语句。
async function getStockPriceByName(name) {
const symbol = await getStockSymbol(name);
const stockPrice = await getStockPrice(symbol);
return stockPrice;
}
getStockPriceByName('goog').then(function(result) {
console.log(result);
})
复制代码
再来看几种情况加深下印象:
function fun1() {
console.log('fun1');
return 'fun1 result';
}
async function test() {
const result1 = await fun1();
console.log(result1);
console.log('end');
}
test();
// 输出
// 'fun1'
// 'fun1 result'
// 'end'
复制代码
async function fun2() {
console.log('fun2');
return 'fun2 result';
}
async function test() {
const result2 = await fun2();
console.log(result2);
console.log('end');
}
test();
// 输出
// 'fun2'
// 'fun2 result'
// 'end'
复制代码
正常情况下,await
命令后面是一个Promise
对象,返回该对象的结果。如果不是Promise
对象,就直接返回对应的值。
async function fun3() {
console.log('fun3');
setTimeout(function() {
console.log('fun3 async');
return 'fun3 result';
}, 1000)
}
async function test() {
const result3 = await fun3();
console.log(result3);
console.log('end');
}
test();
// 输出
// 'fun3'
// undefined
// 'end'
// 'fun3 async'
复制代码
async function fun4() {
console.log('fun4');
return new Promise((resolve, reject) => {
setTimeout(() => {
console.log('fun4 async');
resolve('fun4 result');
}, 1000);
})
}
async function test() {
console.log(result4);
console.log('fun4 sync');
console.log('end');
}
test();
// 输出
// 'fun4'
// 'fun4 async'
// 'fun4 result'
// 'fun4 sync'
// 'end'
复制代码
模拟sleep
JavaScript
一直没有休眠的语法,但是借助await
命令就可以让程序停顿指定的时间。【await要配合async来实现】
function sleep(interval) {
return new Promise(resolve => {
setTimeout(resolve, interval);
})
}
// use
async function one2FiveInAsync() {
for(let i = 1; i <= 5; i++) {
console.log(i);
await sleep(1000);
}
}
one2FiveInAsync();
// 1, 2, 3, 4, 5 每隔一秒输出数字
复制代码
一道题
需求:使用async await
改写下面的代码,使得输出的期望结果是每隔一秒输出0, 1, 2, 3, 4, 5
,其中i < 5
条件不能变。
for(var i = 0 ; i < 5; i++){
setTimeout(function(){
console.log(i);
},1000)
}
console.log(i);
复制代码
之前我们讲过了用promise的方式实现,这次我们用async await
方式来实现:
const sleep = (time) => new Promise((resolve) => {
setTimeout(resolve, time);
});
(async () => {
for(var i = 0; i < 5; i++){
console.log(i);
await sleep(1000);
}
console.log(i);
})();
// 符合条件的输出 0, 1, 2, 3, 4, 5
复制代码
比较promise和async
为什么只比较promise
和async
呢?因为这两个用得频繁,实在的才是需要的,而且async语法
是generator
的语法糖,generator
的说法直接戳async与其他异步处理方法的比较。
两者上,async语法
写法上代码量少,错误处理能力佳,而且更有逻辑语义化。
假定某个 DOM 元素上面,部署了一系列的动画,前一个动画结束,才能开始后一个。如果当中有一个动画出错,就不再往下执行,返回上一个成功执行的动画的返回值。
// promise
function chainAnimationsPromise(elem, animations) {
// 变量ret用来保存上一个动画的返回值
let ret = null;
// 新建一个空的Promise
let p = Promise.resolve();
// 使用then方法,添加所有动画
for(let anim of animations) {
p = p.then(function(val) {
ret = val;
return anim(elem);
});
}
// 返回一个部署了错误捕捉机制的Promise
return p.catch(function(e) {
/* 忽略错误,继续执行 */
}).then(function() {
return ret;
});
}
复制代码
// async await
async function chainAnimationsAsync(elem, animations) {
let ret = null;
try {
for(let anim of animations) {
ret = await anim(elem);
}
} catch(e) {
/* 忽略错误,继续执行 */
}
return ret;
}
复制代码
类class
在ES6
之前,是使用构造函数来模拟类的,现在有了关键字class
了,甚是开心
- 浅谈 maxMemory , totalMemory , freeMemory 和 OOM 与 native Heap
- 100个Numpy练习【1】
- XGoServer 一个基础性、模块完整且安全可靠的服务端框架
- Bing 每日一图 & 随机图片 API
- 可视化数据库MapD安装——GPU模式
- 12步轻松搞定Python装饰器
- 使用shell脚本检测数据库连接访问情况(r10笔记第98天)
- 贝叶斯分类器及Python实现
- Docker 简介与安装
- 三种决策树算法(ID3, CART, C4.5)及Python实现
- Logistic 回归算法及Python实现
- MySQL主从不一致的修复过程(r10笔记第96天)
- ML中相似性度量和距离的计算&Python实现
- Oracle中的ROWID实现(r10笔记第95天)
- JavaScript 教程
- JavaScript 编辑工具
- JavaScript 与HTML
- JavaScript 与Java
- JavaScript 数据结构
- JavaScript 基本数据类型
- JavaScript 特殊数据类型
- JavaScript 运算符
- JavaScript typeof 运算符
- JavaScript 表达式
- JavaScript 类型转换
- JavaScript 基本语法
- JavaScript 注释
- Javascript 基本处理流程
- Javascript 选择结构
- Javascript if 语句
- Javascript if 语句的嵌套
- Javascript switch 语句
- Javascript 循环结构
- Javascript 循环结构实例
- Javascript 跳转语句
- Javascript 控制语句总结
- Javascript 函数介绍
- Javascript 函数的定义
- Javascript 函数调用
- Javascript 几种特殊的函数
- JavaScript 内置函数简介
- Javascript eval() 函数
- Javascript isFinite() 函数
- Javascript isNaN() 函数
- parseInt() 与 parseFloat()
- escape() 与 unescape()
- Javascript 字符串介绍
- Javascript length属性
- javascript 字符串函数
- Javascript 日期对象简介
- Javascript 日期对象用途
- Date 对象属性和方法
- Javascript 数组是什么
- Javascript 创建数组
- Javascript 数组赋值与取值
- Javascript 数组属性和方法