谈谈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了，甚是开心😄

function Person() {}
Person.prototype.sayHello = function(){
    console.log('Hi');
};

class Person{
    sayHello(){
        console.log('Hi!');
    }
}

constructor方法

constructor方法是类的默认方法，通过new命令生成对象实例时，自动调用该方法，一个类中必须有construtor方法，如果没有显式定义，一个空的constructor方法会默认添加。

class Person{}
// 等同于
class Person{
    constructor(){}
}

construtor方法也就类似构造函数，在执行new的时候，先跑构造函数，再跑到原型对象上。

取值函数(getter)和存值函数(setter)

与ES5一样，在类的内部可以使用get和set关键字，对某个属性设置存值函数和取值函数，拦截该属性的存取行为。

class MyClass {
    get prop() {
        return 'getter';
    }
    set prop(value) {
        console.log(`setter: ${ value }`)
    }
}

let inst = new MyClass();

inst.prop = 123;
// 'setter: 123'

console.log(inst.prop);
// 'getter'

this的指向

类的方法内部如果含有this，它默认是指向类的实例。但是，必须非常小心，一旦单独使用该方法，很可能报错。

class Person{
    constructor(job) {
        this.job = job;
    }
    printJob() {
        console.log(`My job is ${ this.job }`);
    }
  sayHi() {
    console.log(`I love my job -- ${ this.job }.`)
  }
}
const person = new Person('teacher');
person.printJob(); // 'My job is teacher'
const { sayHi } = person;
sayHi(); // 报错: Uncaught TypeError: Cannot read property 'job' of undefined

上面的代码中，sayHi方法单独使用，this会指向该方法运行时所在的环境（由于class内部是严格模式，所以this实际上指向undefined）。

修正上面的错误也很简单，也是我们在react开发中经常使用的一种手段：在调用构造函数实例化的时候直接绑定实例(this)，修改如下：

class Person{
    constructor(job) {
        this.job = job;
        this.sayHi = this.sayHi.bind(this);
    }
}

继承

ES5中继承的方式我之前有整理过--JavaScript 中的六种继承方式。

ES6中的继承通过extends关键字实现，比ES5的实现继承更加清晰和方便了。

class Point {
  constructor(x, y) {
    this.x = x;
    this.y = y;
  }
}

class ColorPoint extends Point {
  constructor(x, y, color) {
    this.color = color;
  }
}

let cp = new ColorPoint(25, 8, 'green'); // 报错： Must call super constructor in derived class before accessing 'this' or returning from derived constructor

上面这样写，不能继承构造函数里面的属性值和方法。需要在子类的构造函数中加上super关键字。改成下面这样即可：

class Point {
  constructor(x, y) {
    this.x = x;
    this.y = y;
  }
}

class ColorPoint extends Point {
  constructor(x, y, color) {
    super(x, y); // 调用父类的construtor(x, y)，相当于ES5中的call。注意的是，super要放在子类构造函数的第一行
    this.color = color;
  }
}

let cp = new ColorPoint(25, 8, 'green');

module模块

在ES6之前，社区制定了一些模块的加载的方案，最主要的有CommonJS和AMD两种。前者用于服务器，后者用于浏览器。

// CommonJS
let { stat, exists, readFile } = require('fs');

ES6在语言标准的层面上，实现了模块功能，而且实现得相当简单，完全可以取代 CommonJS和AMD规范，成为浏览器和服务器通用的模块解决方案。

// ES6模块
import { stat, exists, readFile } from 'fs';

各种好处详细见文档

export命令

export命令用于规定模块的对外接口 。

一个模块就是一个独立的文件。该文件内部的所有变量，外部无法获取。你可以理解为一个命名空间～

想要获取模块里面的变量，你就需要导出export：

// profile.js
const name = 'jia ming';
const sayHi = function() {
    console.log('Hi!');
}

export { name, sayHi };

还有一个export default命令，方便用户（开发者啦）不用阅读文档就能加载模块（实际上就是输出一个default变量，而这个变量在import的时候是可以更改的）：

// export-default.js
export default function () {
  console.log('foo');
}

其他模块加载该模块时，import命令可以为该匿名函数指定任意名字。

// import-default.js
import customName from './export-default';
customName(); // 'foo'

import命令

import命令用于输入其他模块提供的功能。使用export命令定义了模块的对外接口以后，其他JS文件就可以通过import命令加载这个模块。

// main.js
import { name, sayHi } from './profile.js';

function printName() {
    console.log('My name is ' + name);
}

至此，本系列文章谈谈ES6语法已经写完，希望文章对读者有点点帮助。本系列的内容是个人觉得在开发中比较重要的知识点，如果要详细内容的话，请上相关的文档查看～💨

参考和后话

本次的ES6语法的汇总总共分为上、中、下三篇，本篇文章为下篇。

系列文章至此已经完结！

文章首发在github上--谈谈ES6语法（汇总下篇）。更多的内容，请戳我的博客进行了解，能留个star就更好了💨

©著作权归作者所有,转载或内容合作请联系作者
  • 人面猴
    序言：七十年代末，一起剥皮案震惊了整个滨河市，随后出现的几起案子，更是在滨河造成了极大的恐慌，老刑警刘岩，带你破解...
    沈念sama阅读 204,445评论 6赞 478
  • 死咒
    序言：滨河连续发生了三起死亡事件，死亡现场离奇诡异，居然都是意外死亡，警方通过查阅死者的电脑和手机，发现死者居然都...
    沈念sama阅读 85,889评论 2赞 381
  • 救了他两次的神仙让他今天三更去死
    文/潘晓璐 我一进店门，熙熙楼的掌柜王于贵愁眉苦脸地迎上来，“玉大人，你说我怎么就摊上这事。” “怎么了？”我有些...
    开封第一讲书人阅读 151,047评论 0赞 337
  • 道士缉凶录：失踪的卖姜人
    文/不坏的土叔 我叫张陵，是天一观的道长。 经常有香客问我，道长，这世上最难降的妖魔是什么？ 我笑而不...
    开封第一讲书人阅读 54,760评论 1赞 276
  • 港岛之恋（遗憾婚礼）
    正文 为了忘掉前任，我火速办了婚礼，结果婚礼上，老公的妹妹穿的比我还像新娘。我一直安慰自己，他们只是感情好，可当我...
    茶点故事阅读 63,745评论 5赞 367
  • 恶毒庶女顶嫁案：这布局不是一般人想出来的
    文/花漫 我一把揭开白布。 她就那样静静地躺着，像睡着了一般。 火红的嫁衣衬着肌肤如雪。 梳的纹丝不乱的头发上，一...
    开封第一讲书人阅读 48,638评论 1赞 281
  • 城市分裂传说
    那天，我揣着相机与录音，去河边找鬼。 笑死，一个胖子当着我的面吹牛，可吹牛的内容都是我干的。 我是一名探鬼主播，决...
    沈念sama阅读 38,011评论 3赞 398
  • 双鸳鸯连环套：你想象不到人心有多黑
    文/苍兰香墨 我猛地睁开眼，长吁一口气：“原来是场噩梦啊……” “哼！你这毒妇竟也来了？” 一声冷哼从身侧响起，我...
    开封第一讲书人阅读 36,669评论 0赞 258
  • 万荣杀人案实录
    序言：老挝万荣一对情侣失踪，失踪者是张志新（化名）和其女友刘颖，没想到半个月后，有当地人在树林里发现了一具尸体，经...
    沈念sama阅读 40,923评论 1赞 299
  • 护林员之死
    正文 独居荒郊野岭守林人离奇死亡，尸身上长有42处带血的脓包…… 初始之章·张勋 以下内容为张勋视角 年9月15日...
    茶点故事阅读 35,655评论 2赞 321
  • 白月光启示录
    正文 我和宋清朗相恋三年，在试婚纱的时候发现自己被绿了。 大学时的朋友给我发了我未婚夫和他白月光在一起吃饭的照片。...
    茶点故事阅读 37,740评论 1赞 330
  • 活死人
    序言：一个原本活蹦乱跳的男人离奇死亡，死状恐怖，灵堂内的尸体忽然破棺而出，到底是诈尸还是另有隐情，我是刑警宁泽，带...
    沈念sama阅读 33,406评论 4赞 320
  • 日本核电站爆炸内幕
    正文 年R本政府宣布，位于F岛的核电站，受9级特大地震影响，放射性物质发生泄漏。R本人自食恶果不足惜，却给世界环境...
    茶点故事阅读 38,995评论 3赞 307
  • 男人毒药：我在死后第九天来索命
    文/蒙蒙 一、第九天 我趴在偏房一处隐蔽的房顶上张望。 院中可真热闹，春花似锦、人声如沸。这庄子的主人今日做“春日...
    开封第一讲书人阅读 29,961评论 0赞 19
  • 一桩弑父案，背后竟有这般阴谋
    文/苍兰香墨 我抬头看了看天上的太阳。三九已至，却和暖如春，着一层夹袄步出监牢的瞬间，已是汗流浃背。 一阵脚步声响...
    开封第一讲书人阅读 31,197评论 1赞 260
  • 情欲美人皮
    我被黑心中介骗来泰国打工， 没想到刚下飞机就差点儿被人妖公主榨干…… 1. 我叫王不留，地道东北人。 一个月前我还...
    沈念sama阅读 45,023评论 2赞 350
  • 代替公主和亲
    正文 我出身青楼，却偏偏与公主长得像，于是被迫代替她去往敌国和亲。 传闻我的和亲对象是个残疾皇子，可洞房花烛夜当晚...
    茶点故事阅读 42,483评论 2赞 342

推荐阅读更多精彩内容

  • ES6学习☞async函数
    含义 async函数是Generator函数的语法糖，它使得异步操作变得更加方便。 写成async函数，就是下面这...
    oWSQo阅读 1,987评论 0赞 2
  • 你不可不知的ES6
    本文为阮一峰大神的《ECMAScript 6 入门》的个人版提纯！ babel babel负责将JS高级语法转义，...
    Devildi已被占用阅读 1,969评论 0赞 4
  • ES6语法特性精华
    以下内容是我在学习和研究ES6时，对ES6的特性、重点和注意事项的提取、精练和总结，可以做为ES6特性的字典；在本...
    科研者阅读 3,109评论 2赞 9
  • async 函数(转载)
    async 函数 含义 ES2017 标准引入了 async 函数，使得异步操作变得更加方便。 async 函数是...
    huilegezai阅读 1,256评论 0赞 6
  • ES6新纪元下
    七、Iterator 迭代器是一种接口、是一种机制。为各种不同的数据结构提供统一的访问机制。任何数据结构只要部署 ...
    追逐_e6cf阅读 406评论 0赞 5