ES6通关之路

javascript

---

前言

ES6规范年内发布，更多新特性，更多新功能，提前学习使用不可或缺。文中提及代码在iojs-v1.4.3下测试，务必加上"use strict"声明。

变量声明

let var1 [= value1] [, var2 [= value2]] [, ..., varN [= valueN]];

javascript没有块的概念，变量作用域主要以函数作用域[1]形成作用域链。如下示例：

function block() {
  for (var i = 0; i < 5; i++) {
    console.log(i);
  }
  console.log(i);
}

在for...loop....使用var定义局部变量i，因为作用域是整个函数，所以在循环体外部也是可以访问，在循环内部做的修改都会反映到外部，并不会抛未定义错误。

function block() {
  for (let i = 0; i < 5; i++) {
    console.log(i);
  }
  console.log(i);
}

在for...loop....使用let定义局部变量i，只在循环体内部可访问，所以循环体外的引用会报错i is not defined。

const name1 = value1 [, name2 = value2 [, ... [, nameN = valueN]]]];

const定义一个常量，且不可被重新赋值。赋值时，会抛出Assignment to constant variable错误。

const title = "love is color blind";
function assignTitle(_title_) {
  title = _title_;
}

Collections

新变量类型，阅读相关API文档即可，没有难度。

var object = {}
  , array = []
  , regexp = new RegExp('\\\/love');
var data = new Map([
  ["title", "love is color blind"],
  ["content", "reference MDN website for details"]
]);
data.set(undefined, true);
data.set(null, true);
var weakData = new WeakMap();
weakData.set(object, 'story');
var list = new Set(["title", "content"]);
list.add(null);
list.add(undefined);
var weakList = new WeakSet();
weakList.add(object);
weakList.add(array);

Map与Object相似，差异大概有三点：

• Map没有原型，Object有原型，占用内存空间不同；
• Map键可以为任意类型，包括Null, undefined, Object需为String
• Map长度可跟踪，Object不可跟踪。

Promise

javascript异步操作无处不在，将异步操作串行之前是个大麻烦，很容易造成恶魔金字塔。而是用Promise[2]，可以有效规避这个问题。

Promise.all(iterable)
Promise.race(iterable)
Promise.reject(reason)
Promise.resolve(value)
Promise.prototype.catch(onRejected)
Promise.prototype.then(onFulfilled, onRejected)

提供了四个静态方法和两个原型方法。简单应用如下：

var title = Promise.resolve("why so serious");
var content = new Promise(function(resolve) {
  setTimeout(function() {
    resolve("love is color blind");
  }, 300);
});
Promise
  .race([title, content])
  .then(function(value) {
    console.log(value);
  });
Promise
  .all([title, content])
  .then(function(value) {
    return Promise.reject("explicit reject the next promise");
  })
  .catch(function(reason) {
    console.log(reason);
  });
Promise
  .all([title, content])
  .then(function(value) {
    throw new Error("explicit reject the next promise")
  })
  .catch(function(error) {
    console.log(error.message);
  });

文档说明很清楚，调用即可。唯一需要注意的是，在then内部的调用函数，如果显式抛出错误，或者return rejected promise，返回的promise状态都未rejected，其他情况下则为resolved。

Numeric literal

数值类型支持二进制，八进制，十进制，十六进制数据，示例如下：

let numericArray = [0b1011, 0o11, 12, 0x2F];
numericArray.forEach(function(value) {
  console.log(value);
});

输出结果为：11，9，12，47

String Method

新定义字符串操作方法。

String.prototype.startsWith()
String.prototype.endsWith()
String.prototype.includes() 
String.prototype.repeat() 
String.prototype.normalize() 

var title = "love is color blind";
var repeater = "one";
console.log(title.startsWith("love"));
console.log(title.endsWith("blind"));
console.log(title.includes("color"));
console.log(repeater.repeat(3));
console.log(title.normalize());

normalize方法感觉有点诡异，暂时不清楚使用场景。

Template String

Template strings 允许内嵌表达式.
可以分为两种，tag template string, template string。后者使用默认的变量替换行为，如果在变量替换过程中需要进行其他操作，则定义tag function即可。

var title = "love is color blind";
var content = "why so serious";
console.log(`the book talk about ${title}, and mainly content takes ${content}`);
function tagFunction(pieces) {
  var result = pieces[0];
  var substitutions = Array.prototype.slice.call(arguments, 1);
  for (var i = 0; i < substitutions.length; i++) {
    result += substitutions[i] + pieces[i+1];
  }
  return result;
}
console.log(tagFunction `the book talk about ${title}, and mainly content takes ${content}`);

注意两种使用方式的差异。

Class

目前的class实现貌似跟规范相差较远，基本功能已出，如下所示：

"use strict";
class Animal {
  constructor(type) {
    this.type = type;
  }
  speak() {
    console.log('I belong to animal %s', this.type);
  }
}
class Pet extends Animal {
  constructor(type, sound, size) {
    super(type);
    this.sound = sound;
    this.size = size;
    this.speakTimes = 0;
  }
  speak() {
    this.speakTimes += 1;
    super.speak();
  }
  getSpeakTimes() {
    return this.speakTimes;
  }
}