你需要了解的 ES6 语法

ES6 是下一代 JavaScript 语法标准,比起 ES5 有很大的变化。标准委员会每年发布一次当年度的新标准,目前最新的标准是《ES2018 标准》,因此 ES6 是一个动态的标准,每年都会发生一些变化。

React 大量使用 ES6 语法,本文介绍其中一些最重要的语法点。完整的 ES6 介绍请参考 http://es6.ruanyifeng.com/

let 和 const

letconst命令用于声明变量。

let声明的变量是可变的,const声明的变量是不可变的。

let foo = 1;
foo = 2;

const bar = 1;
bar = 2; // 报错

上面代码中,let声明的变量foo是可以重新赋值,但是如果对bar声明的变量重新赋值,就会报错。

注意,如果const声明的变量指向一个对象,那么该对象的属性是可变的。

const foo = {
  bar: 1
};

foo.bar = 2;

上面代码中,变量foo本身是不可变的,即foo不能指向另一个对象。但是,对象内部的属性是可变的,这是因为这时foo保存的是一个指针,这个指针本身不可变,但它指向的对象本身是可变的。

解构赋值

ES6 允许按照一定模式,从数组和对象中提取值,对变量进行赋值,这被称为解构(Destructuring)。

let [a, b, c] = [1, 2, 3];

上面代码表示,可以从数组中提取值,按照对应位置,对变量赋值。

解构赋值不仅可以用于数组,还可以用于对象。

let { foo, bar } = { foo: "aaa", bar: "bbb" };
foo // "aaa"
bar // "bbb"

解构赋值时,还可以设置默认值。

let [x, y = 'b'] = ['a']; // x='a', y='b'

上面代码中,变量y解构赋值时没有取到值,所以默认值就生效了。

对象的简洁表示法

ES6 允许直接写入变量和函数,作为对象的属性和方法。这样的书写更加简洁。

const foo = 'bar';
const baz = { foo };
baz // {foo: "bar"}

除了属性简写,方法也可以简写。

const o = {
  method() {
    return "Hello!";
  }
};

// 等同于

const o = {
  method: function() {
    return "Hello!";
  }
};

箭头函数

ES6 允许使用“箭头”(=>)定义函数。

var f = v => v;

// 等同于
var f = function (v) {
  return v;
};

如果箭头函数不需要参数或需要多个参数,就使用一个圆括号代表参数部分。

var f = () => 5;
// 等同于
var f = function () { return 5 };

var sum = (num1, num2) => num1 + num2;
// 等同于
var sum = function(num1, num2) {
  return num1 + num2;
};

如果箭头函数的代码块部分多于一条语句,就要使用大括号将它们括起来,并且使用return语句返回。

var sum = (num1, num2) => { return num1 + num2; }

rest 参数

ES6 引入 rest 参数(形式为...变量名),用于获取函数的多余参数,这样就不需要使用arguments对象了。rest 参数搭配的变量是一个数组,该变量将多余的参数放入数组中。

function add(...values) {
  let sum = 0;

  for (var val of values) {
    sum += val;
  }

  return sum;
}

add(2, 5, 3) // 10

上面代码的add函数是一个求和函数,利用 rest 参数,可以向该函数传入任意数目的参数。

扩展运算符

扩展运算符(spread)是三个点(...)。它好比 rest 参数的逆运算,将一个数组转为用逗号分隔的参数序列。

console.log(...[1, 2, 3])
// 1 2 3

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

[...document.querySelectorAll('div')]
// [<div>, <div>, <div>]

对象也可以使用扩展运算符。

let { x, y, ...z } = { x: 1, y: 2, a: 3, b: 4 };
x // 1
y // 2
z // { a: 3, b: 4 }

class

ES6 允许新建“类”(class)。

class SkinnedMesh extends THREE.Mesh {
  constructor(geometry, materials) {
    super(geometry, materials);

    this.idMatrix = SkinnedMesh.defaultMatrix();
    this.bones = [];
    this.boneMatrices = [];
    //...
  }
  update(camera) {
    //...
    super.update();
  }
  get boneCount() {
    return this.bones.length;
  }
  set matrixType(matrixType) {
    this.idMatrix = SkinnedMesh[matrixType]();
  }
  static defaultMatrix() {
    return new THREE.Matrix4();
  }
}

上面是一个类的定义。

  • constructor():构造函数,新建实例的时候,自动调用这个方法。
  • extends:第一行的extends关键字表示继承某个父类。
  • super:子类方法里面的super指代父类。
  • get():get是取值器,读取该方法定义的属性时,会自动执行指定的代码。
  • set():set是赋值器,赋值该方法定义的属性时,会自动执行指定的代码。
  • static:方法前面加上static关键字,表示该方法是静态方法,定义在类上面,而不是定义在实例对象上面,以上面为例,就是SkinnedMesh.defaultMatrix()这样调用。

定义了类以后,就可以新建实例了。

const instance = new SkinnedMesh();

Promise 对象

Promise 是 ES6 引入的封装异步操作的统一接口。它返回一个对象,包含了异步操作的信息。

Promise 本身是一个构造函数,提供了resolvereject两个方法。一旦异步操作成功结束,就调用resolve方法,将 Promise 实例对象的状态改为resolved,一旦异步操作失败,就调用reject方法,将 Promise 实例的状态改成rejected

function timeout(duration = 0) {
  return new Promise((resolve, reject) => {
    setTimeout(resolve, duration);
  })
}

上面代码中,timeout函数返回一个 Promise 实例,在指定时间以后,将状态改为resolved

var p = timeout(1000).then(() => {
  return timeout(2000);
}).then(() => {
  throw new Error("hmm");
}).catch(err => {
  return Promise.all([timeout(100), timeout(200)]);
})

一旦 Promise 实例的状态改变以后,就可以使用then()方法指定下面将要执行的函数,catch()方法用来处理rejected状态的情况。

module

ES6 意义最重大的语法变化,就是引入了模块(module)。

一个模块内部,使用export命令输出对外的接口。

// lib/math.js
export function sum(x, y) {
  return x + y;
}
export var pi = 3.141593;

上面的模块输出了sumpi两个接口。

import命令用于引入该模块。

// app.js
import * as math from "lib/math";
alert("2π = " + math.sum(math.pi, math.pi));

上面代码中,*表示引入所有接口,也可以只引入指定的接口。

// otherApp.js
import {sum, pi} from "lib/math";
alert("2π = " + sum(pi, pi));