ECMAScript2015 速查手册

[zhnoah]

变量

• 变量

// es5
var index = 0;

// es6
let index = 0;

• 局部作用域

// es5
for (var i = 0; i < 5; i++) {
  (function(i) {
    setTimeout(function() {
      console.log(i);
    }, i * 1000);
  })(i);
}

// es6
for (let i = 0; i < 5; i++) {
  setTimeout(() => {
    console.log(i);
  }, i * 1000);
}

• 常量

// es5
var MAX_COUNT = 100;

// es6
const maxCount = 100;

模板

• 变量注入

// es5
var title = 'Hello World';
var html = '<h1>' + title + '</h1>';

// es6
const title = 'Hello World';
const html = `<h1>${title}</h1>`;

• 换行

// es5
var title = 'Hello World';
var subtitle = 'Hello ECMAScript2015';

var html = '<div>' +
  '<h1>' + title + '</h1>' +
  '<h2>' + subtitle + '</h2>' +
  '</div>';

// es6
const title = 'Hello World';
const subtitle = 'Hello ECMAScript2015';

const html = `<div>
  <h1>${title}</h1>
  <h2>${subtitle}</h2>
  </div>`;

数组

• 遍历

// es5
var names = ['jack', 'lily', 'lilei'];

for (var i = 0; i < names.length; i++) {
  console.log(names[i]);
}

// es6
const names = ['jack', 'lily', 'lilei'];

for (name of names) {
  console.log(name);
}

• 去重

// es5
function uniq(arr) {
  var hash = {}, len = arr.length, result = [];

  for(var i = 0; i < len; i++) {
    if (!hash[arr[i]]) {
      hash[arr[i]] = true;
      result.push(arr[i]);
    }
  }

  return result;
}

uniq([1, 2, 2, 3, 3, 4]); // [1, 2, 3, 4]

// es6
function uniq(arr) {
  return Array.from(new Set(arr));
  // or
  // return [...new Set(arr)]
}

uniq([1, 2, 2, 3, 3, 4]); // [1, 2, 3, 4]

函数

• 匿名函数

// es5
var names = ['jack', 'lily', 'lilei'];

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

// es6
const names = ['jack', 'lily', 'lilei'];

names.forEach(name => {
  console.log(`My name is ${name}.`);
});

• 参数默认值

// es5
function say(name) {
  name = name || 'jack';
  console.log('My name is ' + name + '.');
}

// es6
function say(name = 'jack') {
  console.log(`My name is ${name}.`);
}

• this

// es5
var Person = {};

Person.say = function() {
  console.log('Hello World');
};

Person.bind = function() {
  var self = this;

  setTimeout(function() {
    self.say();
  }, 1000);
};

Person.bind();

// es6
const Person = {};

Person.say = function() {
  console.log('Hello World');
};

Person.bind = function() {
  setTimeout(() => {
    this.say();
  }, 1000);
};

Person.bind();

• 调用传参

// es5
function fun(x, y, z) {
  console.log(x, y, z);
}

var args = [88, 78, 23];

fun.apply(null, args);

// es6
function fun(x, y, z) {
  console.log(x, y, z);
}

const args = [88, 78, 23];

fun(...args);

对象字面量

• 属性和方法

// es5
var name = 'jack';

var person = {
  name: name,
  getName: function() {
    return this.name;
  }
};

// es6
const name = 'jack';

const person = {
  name,
  getName() {
    return this.name;
  }
};

解构赋值

• 对象

// es5
var person = {
  name: 'jack',
  age: 28
};

var name = person.name; // 'jack'
var age = person.age; // 28

// es6
const person = {
  name: 'jack',
  age: 28
};

const {name, age} = person;

• 数组

// es5
var title = 'Hello World';

var hello = title.split(' ')[0];  // 'Hello'
var world = title.split(' ')[1];  // 'World'

// es6
const title = 'Hello World';

const [hello, world] = title.split(' ');

// es5
var nums = [1, 2, 3, 4, 5];

var first = nums[0];  // 1
var lave = nums.slice(1); // [2, 3, 4, 5]

// es6
const nums = [1, 2, 3, 4, 5];

const [first, ...lave] = nums;

• 函数传参

// es5
function sayHello(person) {
  console.log('My name is ' + person.name + ', ' + person.age + ' years old.');
}

sayHello({name: 'jack', age: 28});

// es6
function sayHello({name, age}) {
  console.log( `My name is ${name}, ${age} years old.`);
}

sayHello({name: 'lily', age: 23});

类

• 定义

// es5
var Person = (function() {
  function P(name, age) {
    this.name = name;
    this.age = age;
  }

  P.prototype.getName = function() {
    return this.name;
  };

  return P;
})();

// es6
class Person {
  constructor(name, age) {
    this.name = name;
    this.age = age;
  }

  getName() {
    return this.name;
  }
}

模块

• export

// es5(amd)
define([], function() {
  return ...
});

// es6
export default ...

• import

// es5(amd)
require(['fileName'], function(moduleName) {
  // ...
});

// es6
import moduleName from 'fileName';
import { moduleA, moduleB } from 'fileName';