作者：阮一峰
出版社：电子工业出版社
格式: AZW3, DOCX, EPUB, MOBI, PDF, TXT
ECMAScript6入门试读：
前言
2012年年底，我开始动手做一个开源项目《JavaScript标准参考教程》（https://github.com/ruanyf/jstutorial）。原来的设想是将自己的学习笔记整理成一本书，哪里料到，这个项目不断膨胀，最后变成了关于ECMAScript 5及其外围API的全面解读和参考手册，写了一年多还没写完。
那个项目的最后一章就是ECMAScript 6的语法简介。那一章也是越写越长，最后我不得不决定，把它独立出来，作为一个新项目，也就是您现在看到的这本书。
JavaScript已经是互联网开发的第一大语言，而且正在变成一种全领域的语言。著名程序员Jeff Atwood甚至提出了一条“Atwood定律”：“所有可以用JavaScript编写的程序，最终都会出现JavaScript的版本。”（Any application that can be written in JavaScript will eventually be written in JavaScript.）
ECMAScript正是JavaScript的国际标准，这就决定了该标准的重要性。而ECMAScript 6是ECMAScript历史上最大的一次版本升级，在语言的各个方面都有极大的变化，即使是熟练的JavaScript程序员，也需要重新学习。由于ES6的设计目标是企业级开发和大型项目，所以可以预料，除了互联网开发者，将来还会有大量应用程序开发者（甚至操作系统开发者）成为ES6的学习者。
我写作这本书的目标，就是想为上面这些学习者，提供一本篇幅较短、简明易懂、符合中文表达习惯的ES6教程。它由浅入深、循序渐进，既有重要概念的讲解，又有API接口的罗列，便于日后当作参考手册查阅，还提供大量示例代码，让读者不仅一看就懂，还能举一反三，直接复制用于实际项目之中。
需要声明的是，为了突出重点，本书只涉及ES6与ES5的不同之处，不对JavaScript已有的语法做全面讲解，毕竟市场上这样的教程已有很多了。因此，本书不是JavaScript入门教材，不适合初学者。阅读本书之前，需要对JavaScript的基本语法有所了解。
我本人也是一个ES6的学习者，不敢说自己有多高的水平，只是较早地接触了这个主题，持续地读了许多资料，追踪标准的进展，做了详细的笔记而已。虽然我尽了最大努力，并且原稿在GitHub上公开后，已经得到了大量的勘误，但是本书的不如人意之处恐怕还是有不少。
欢迎大家访问本书的项目主页（https://github.com/ruanyf/es6tutorial），提出意见，以及提交pull request。这些都会包括在本书的下一个版本中。阮一峰2014年6月4日，写于上海第1章 ECMAScript 6简介
ECMAScript6（以下简称ES6）是JavaScript语言的下一代标准，正处在快速开发中，大部分已经完成，预计将于2014年底正式发布。Mozilla将在这个标准的基础上，推出JavaScript2.0。
ES6的目标，是使得JavaScript语言可以用来编写大型的复杂应用程序，成为企业级开发语言。ECMAScript和JavaScript的关系
ECMAScript是JavaScript语言的国际标准，JavaScript是ECMAScript的实现。
1996年11月，JavaScript的创造者Netscape公司，决定将JavaScript提交给国际标准化组织ECMA，希望这种语言能够成为国际标准。次年，ECMA发布262号标准文件（ECMA-262）的第一版，规定了浏览器脚本语言的标准，并将这种语言称为ECMAScript。这个版本就是ECMAScript1.0版。
之所以不叫JavaScript，有两个原因。一是商标，Java是Sun公司的商标，根据授权协议，只有Netscape公司可以合法地使用JavaScript这个名字，且JavaScript本身也已被Netscape公司注册为商标。二是想体现这门语言的制定者是ECMA，而不是Netscape，这样有利于保证这门语言的开放性和中立性。因此，ECMAScript和JavaScript的关系是，前者是后者的规格，后者是前者的一种实现。不过，在日常场合，这两个词是可以互换的。ECMAScript的历史
1998年6月，ECMAScript2.0版发布。
1999年12月，ECMAScript3.0版发布，成为JavaScript的通行标准，得到了广泛支持。
2007年10月，ECMAScript4.0版草案发布，对3.0版做了大幅升级，原计划次年8月发布正式版本。然而在草案发布后，由于4.0版的目标过于激进，各方对于是否通过这个标准，产生了严重分歧。以Yahoo、Microsoft、Google为首的大公司，反对JavaScript的大幅升级，主张小幅改动；而以JavaScript创造者Brendan Eich为首的Mozilla公司，则坚持当前的草案。
2008年7月，由于对于下一个版本应该包括哪些功能，各方分歧太大，争论过于激进，ECMA开会决定，中止ECMAScript4.0的开发，将其中涉及现有功能改善的一小部分，发布为ECMAScript3.1，而将其他激进的设想扩大范围，放入以后的版本，鉴于会议的气氛，该版本的项目代号取名为Harmony（和谐）。会后不久，ECMAScript3.1就改名为ECMAScript5。
2009年12月，ECMAScript5.0版正式发布。Harmony项目则一分为二，一些较为可行的设想定名为JavaScript.next继续开发，后来演变成ECMAScript6；一些不是很成熟的设想，则被视为JavaScript.next.next，在更远的将来再考虑推出。
2011年6月，ECMAScript5.1版发布，并且成为ISO国际标准（ISO/IEC 16262:2011）。
2013年3月，ECMAScript6草案冻结，不再添加新功能。新的功能设想将被放到ECMAScript7。
2013年12月，ECMAScript6草案发布。此后是12个月的讨论期，以听取各方反馈意见。
2015年6月，ECMAScript6预计将发布正式版本。
ECMA的第39号技术专家委员会（Technical Committee 39，简称TC39）负责制订ECMAScript标准，成员包括Microsoft、Mozilla、Google等大公司。TC39的总体考虑是，ES5与ES3基本保持兼容，较大的语法修正和新功能加入，将由JavaScript.next完成。当前，JavaScript.next指的是ES6，而当第六版发布以后，将指ES7。TC39估计，ES5会在2013年的年中成为JavaScript开发的主流标准，并在今后五年中一直保持这个位置。部署进度
由于ES6还没有定案，有些语法规则还会变动，目前支持ES6的软件和开发环境还不多。关于各大浏览器的最新版本对ES6的支持，可以查看http://kangax.github.io/es5-compat-table/es6/。
Google公司的V8引擎已经部署了ES6的部分特性。使用Node.js0.11版，就可以体验这些特性。
Node.js的0.11版还不是稳定版本，需要使用版本管理工具nvm（https://github.com/creationix/nvm）切换。操作如下，下载nvm以后，进入项目目录，运行下面的命令：
source nvm.sh
nvm use 0.11
node --harmony
启动命令中的--harmony选项可以打开所有已经部署的ES6功能。使用下面的命令，可以查看所有与ES6有关的单个选项。
$ node --v8-options | grep harmony
--harmony_typeof
--harmony_scoping
--harmony_modules
--harmony_symbols
--harmony_proxies
--harmony_collections
--harmony_observation
--harmony_generators
--harmony_iteration
--harmony_numeric_literals
--harmony_strings
--harmony_arrays
--harmony_maths
--harmonyTraceur编译器
Google公司的Traceur（https://github.com/google/traceur-compiler）编译器，可以将ES6代码编译为ES5代码。
它有多种使用方式。直接插入网页
Traceur允许将ES6代码直接插入网页。
首先，必须在网页头部加载Traceur库文件。
＜!-- 加载Traceur 编译器 --＞
＜script src="http://google.github.io/traceur-compiler/bin/traceur.js" type="text/javascript"＞＜/script＞
＜!-- 将Traceur 编译器用于网页 --＞
＜script src="http://google.github.io/traceur-compiler/src/bootstrap.js" type="text/javascript"＞＜/script＞
＜!-- 打开实验选项，否则有些特性可能编译不成功 --＞
＜script＞
traceur.options.experimental = true;
＜/script＞
接下来，就可以把ES6 代码放入上面这些代码的下方。
＜script type="module"＞
class Calc {
constructor(){
console.log('Calc constructor');
}
add(a, b){
return a + b;
}
}
var c = new Calc();
console.log(c.add(4,5));
＜/script＞
正常情况下，上面的代码会在控制台打印出“9”。
注意，script标签的type属性的值是module，而不是text/-javascript。这是Traceur编译器用来识别ES6代码的标识，编译器会自动将所有标记了type=module的代码编译为ES5代码，然后交给浏览器执行。
如果ES6代码是一个外部文件，那么可以用script标签插入网页。
＜script type="module" src="calc.js" ＞
＜/script＞在线转换
Traceur提供一个在线编译器（http://google.github.io/traceur-compiler/demo/repl.html），可以在线将ES6代码转为ES5代码。转换后的代码，可以直接作为ES5代码插入网页运行。
上面的例子转为ES5代码运行，就是下面这个样子。
＜script src="http://google.github.io/traceur-compiler/bin/traceur.js" type="text/javascript"＞＜/script＞
＜script src="http://google.github.io/traceur-compiler/src/bootstrap.js" type="text/javascript"＞＜/script＞
＜script＞
traceur.options.experimental = true;
＜/script＞
＜script＞
$traceurRuntime.ModuleStore.getAnonymousModule(function() {
"use strict";
var Calc = function Calc() {
console.log('Calc constructor');
};
($traceurRuntime.createClass)(Calc, {add: function(a, b) {
return a + b;
}}, {});
var c = new Calc();
console.log(c.add(4, 5));
return{};
});
＜/script＞命令行转换
作为命令行工具使用时，Traceur是一个Node.js的模块，首先需要用npm安装。
npm install -g traceur
安装成功后，就可以在命令行下使用traceur了。
traceur直接运行ES6脚本文件，会在标准输出中显示运行结果，以前面的calc.js为例。
$ traceur calc.js
Calc constructor
9
如果要将ES6脚本转为ES5代码，要采用下面的写法：
traceur --script calc.es6.js --out calc.es5.js
上面代码的--script选项用于指定输入文件，--out选项用于指定输出文件。
为了防止有些特性编译不成功，最好加上--experimental选项。
traceur --script calc.es6.js --out calc.es5.js --experimental
命令行下转换得到的文件，可以放到浏览器中运行。Node.js环境的用法
Traceur的Node.js用法如下（假定已安装traceur模块）。
var traceur = require('traceur');
var fs = require('fs');
// 将ES6脚本转为字符串
var contents = fs.readFileSync('es6-file.js').toString();
var result = traceur.compile(contents, {
filename: 'es6-file.js',
sourceMap: true,
// 其他设置
modules: 'commonjs'
});
if (result.error)
throw result.error;
// result 对象的js 属性就是转换后的ES5 代码
fs.writeFileSync('out.js', result.js);
// sourceMap 属性对应map 文件
fs.writeFileSync('out.js.map', result.sourceMap);ECMAScript 7
2013年3月，ES6的草案封闭，不再接受新功能，新的功能将被加入ES7。
ES7可能包括的功能有：1. Object.observe：对象与网页元素的双向绑定，只要其中之一发
生变化，就会自动反映在另一方上。2. Multi-Threading：多线程支持。目前，Intel和Mozilla有一个共同
的研究项目RiverTrail，致力于让JavaScript多线程运行。预计这
个项目的研究成果会被纳入ECMAScript标准。3. Traits：它将是“类”功能（class）的一个替代。通过它，不同
的对象可以分享同样的特性。
其他可能包括的功能还有：更精确的数值计算、改善的内存回收、增强的跨站点安全、类型化的更贴近硬件的低级别操作、国际化支持（Internationalization Support）、更多的数据结构，等等。第2章 let和const命令let命令
ES6新增了let命令，用于声明变量。它的用法类似于var，但是所声明的变量，只在let命令所在的代码块内有效。
{
let a = 10;
var b = 1;
}
a // ReferenceError: a is not defined.
b //1
上面的代码在代码块之中，分别用let和var声明了两个变量。然后在代码块之外调用这两个变量，结果let声明的变量报错，var声明的变量返回正确的值。这表明，let声明的变量只在它所在的代码块内有效。
下面的代码如果使用var，则最后输出的是“9”。
var a = [];
for (var i = 0; i ＜ 10; i++) {
var c = i;
a[i] = function () {
console.log(c);
};
}
a[6](); // 9
而如果使用let，声明的变量仅在块级作用域内有效，于是最后输出的是“6”。
var a = [];
for (vari = 0; i ＜ 10; i++) {
let c = i;
a[i] = function () {
console.log(c);
};
}
a[6](); // 6
let 不像var 那样，会发生“变量提升”现象。
function do_something() {
console.log(foo); // ReferenceError
let foo = 2;
}
上面的代码在声明foo之前，就使用了这个变量，结果会抛出一个错误。
注意，let不允许在相同作用域内，重复声明同一个变量。
// 报错
{
let a = 10;
var a = 1;
}
// 报错
{
let a = 10;
let a = 1;
}块级作用域
let实际上为JavaScript新增了块级作用域。
function f1() {
let n = 5;
if (true) {
let n = 10;
}
console.log(n); // 5
}
上面的函数有两个代码块，都声明了变量n，运行后输出5。这表示外层代码块不受内层代码块的影响。如果使用var定义变量n，最后输出的值就是10。
块级作用域的出现，实际上使得广为应用的立即执行匿名函数（IIFE）不再必要了。
// IIFE 写法
(function () {
var tmp = ...;
...
}());
// 块级作用域写法
{
let tmp = ...;
...
}
另外，ES6也规定，函数本身的作用域，在其所在的块级作用域之内。
function f() { console.log('I am outside!'); }
(function () {
if(false) {
// 重复声明一次函数f
function f() { console.log('I am inside!'); }
}
f();
}());
上面的代码在ES5中运行，会得到“I am inside!”，但是在ES6中运行，则会得到“I am outside!”。const命令
const用来声明常量。一旦声明，其值就不能改变。
const PI = 3.1415;
PI // 3.1415
PI = 3;
PI // 3.1415
const PI = 3.1;
PI // 3.1415
上面的代码表明改变常量的值是不起作用的。需要注意的是，对常量重新赋值不会报错，只会默默地失败。
const 的作用域与let 命令相同：只在声明所在的块级作用域内有效。
if (condition) {
const MAX = 5;
}
// 常量MAX在此处不可得
const 声明的常量，也与let一样不可重复声明。
var message = "Hello!";
let age = 25;
// 以下两行都会报错
const message = "Goodbye!";
const age = 30;第3章 变量的解构赋值数组的解构赋值
ES6允许按照一定模式，从数组和对象中提取值，对变量进行赋值，这被称为解构（Destructuring）。
以前，为变量赋值，只能直接指定值。
var a = 1;
var b = 2;
var c = 3;
而ES6允许写成下面这样。
var[a, b, c] = [1, 2, 3];
上面的代码表示，可以从数组中提取值，按照位置的对应关系，对变量赋值。
本质上，这种写法属于“模式匹配”，只要等号两边的模式相同，左边的变量就会被赋予对应的值。下面是一些使用嵌套数组进行解构的例子。
var [foo, [[bar], baz]] = [1, [[2], 3]];
foo // 1
bar // 2
baz // 3
var [,,third] = ["foo", "bar", "baz"];
third // "baz"
var [head, ...tail] = [1, 2, 3, 4];
head // 1
tail // [2, 3, 4]
如果解构不成功，变量的值就等于undefined。
var [foo] = [];
var [foo] = 1;
var [foo] = 'Hello';
var [foo] = false;
var [foo] = NaN;
以上几种情况都属于解构不成功，foo 的值都会等于undefined。但是，如果对undefined 或null 进行解构，就会报错。
// 报错
var [foo] = undefined;
var [foo] = null;
这是因为解构只能用于数组或对象。其他原始类型的值都可以转为相应的对象，但是，undefined和null不能转为对象，因此报错。
解构赋值允许指定默认值。
var [foo = true] = [];
foo // true
解构赋值不仅适用于var 命令，也适用于let和const命令。
var [v1, v2, ..., vN ] = array;
let [v1, v2, ..., vN ] = array;
const [v1, v2, ..., vN ] = array;对象的解构赋值
解构不仅可以用于数组，还可以用于对象。
var { foo, bar } = { foo: "aaa", bar: "bbb" };
foo // "aaa"
bar // "bbb"
对象的解构与数组有一个重要的不同。数组的元素是按次序排列的，变量的取值由它的位置决定；而对象的属性没有次序，变量必须与属性同名，才能取到正确的值。
var { bar, foo } = { foo: "aaa", bar: "bbb" };
foo // "aaa"
bar // "bbb"
var { baz } = { foo: "aaa", bar: "bbb" };
baz // undefined
上面代码中的第一个例子，等号左边的两个变量的次序，与等号右边两个同名属性的次序不一致，但是对取值完全没有影响。第二个例子的变量没有对应的同名属性，导致取不到值，最后等于undefined。
如果变量名与属性名不一致，必须写成下面这样。
var { foo: baz } = { foo: "aaa", bar: "bbb" };
baz // "aaa"
和数组一样，解构也可以用于嵌套结构的对象。
var o = {
p: [
"Hello",
{ y: "World" }
]
};
var { p: [x, { y }] } = o;
x // "Hello"
y // "World"
对象的解构也可以指定默认值。
var { x = 3 } = {};
x // 3
如果要将一个已经声明的变量用于解构赋值，必须非常小心。
// 错误的写法
var x;
{x} = {x:1};
// SyntaxError: syntax error
上面代码中的写法会报错，因为JavaScript引擎会将{x}理解成一个代码块，从而发生语法错误。只有不将大括号写在行首，避免JavaScript将其解释为代码块，才能解决这个问题。
// 正确的写法
({x}) = {x:1};
// 或者
({x} = {x:1});用途
变量的解构赋值用途很多。交换变量的值
[x, y] = [y, x];从函数返回多个值
函数只能返回一个值，如果要返回多个值，只能将它们放在数组或对象里返回。有了解构赋值，取出这些值就非常方便。
// 返回一个数组
function example() {
return [1, 2, 3];
}
var [a, b, c] = example();
// 返回一个对象
function example() {
return {
foo: 1,
bar: 2
};
}
var { foo, bar } = example();函数参数的定义
function f({x, y, z}) {
// ...
}
f({x:1, y:2, z:3})
这种写法对提取JSON对象中的数据，尤其有用。函数参数的默认值
jQuery.ajax = function (url, {
async = true,
beforeSend = function () {},
cache = true,
complete = function () {},
crossDomain = false,
global = true,
// ... more config
}) {
// ... do stuff
};
指定参数的默认值，就避免了在函数体内部再写var foo = config.foo || 'default foo'; 这样的语句。遍历Map结构
任何部署了Iterator接口的对象，都可以用for...of循环遍历。Map结构原生支持Iterator接口，配合变量的结构赋值，获取键名和键值就非常方便。
var map = new Map();
map.set('first', 'hello');
map.set('second', 'world');
for (let [key, value] of map) {
console.log(key + " is " + value);
}
// first is hello
// second is world
如果只想获取键名，或者只想获取键值，可以写成下面这样。
// 获取键名
for (let [key] of map) {
// ...
}
// 获取键值
for (let [,value] of map) {
// ...
}输入模块的指定方法
加载模块时，往往需要指定输入哪些方法。解构赋值使得输入语句非常清晰。
const { SourceMapConsumer, SourceNode } = require("source-map");第4章 字符串的扩展
ES6加强了对Unicode的支持，并且扩展了字符串对象。codePointAt方法
在JavaScript内部，字符以UTF-16的格式储存，每个字符固定为2个字节。对于那些需要4个字节储存的字符（Unicode编号大于0xFFFF的字符），JavaScript会认为它们是两个字符。
var s = "";
s.length // 2
s.charAt(0) // ''
s.charAt(1) // ''
s.charCodeAt(0) // 55362
s.charCodeAt(1) // 57271
上面的代码说明，对于4个字节储存的字符，JavaScript不能正确处理。字符串长度会被误判为2，而且charAt方法无法读取到字符，charCodeAt方法只能分别返回前两个字节和后两个字节的值。
ES6提供了codePointAt方法，能够正确处理4个字节储存的字符，返回一个字符的Unicode编号。
var s = "a";
s.codePointAt(0) // 134071
s.codePointAt(1) // 97
s.charCodeAt(2) // 97
codePointAt 方法的参数，是字符在字符串中的位置（从0开始）。上面的代码表明，它会正确返回四字节UTF-16字符的Unicode编号。对于那些两个字节储存的常规字符，它的返回结果与charCodeAt方法相同。
codePointAt方法是测试一个字符由两个字节还是四个字节组成的最简单方法。
function is32Bit(c) {
return c.codePointAt(0) ＞ 0xFFFF;
}
is32Bit("") // true
is32Bit("a") // falseString.fromCodePoint方法
该方法用于从Unicode编号返回对应的字符串，作用与codePointAt正好相反。
String.fromCodePoint(134071) // ""
注意，fromCodePoint方法定义在String对象上，而codePointAt方法定义在字符串的实例对象上。字符的Unicode表示法
JavaScript允许采用“\uxxxx”形式表示一个字符，其中“xxxx”表示字符的Unicode编号。
"\u0061"
// "a"
但是，这种表示法只限于\u0000—\uFFFF之间的字符。超出这个范围的字符，必须用两个双字节的形式表达。
"\uD842\uDFB7"
// ""
"\u20BB7"
// " 7"
上面的代码表示，如果直接在“\u”后面跟上超过0xFFFF的数值（比如\u20BB7），JavaScript会理解成“\u20BB+7”。由于\u20BB是一个不可打印字符，所以只会显示一个空格，后面跟着一个7。
ES6对这一点做出了改进，只要将超过0xFFFF的编号放入大括号，就能得到正确解读。
"\u{20BB7}"
// ""正则表达式的u修饰符
ES6对正则表达式添加了u修饰符，用来正确处理大于\uFFFF的Unicode字符。
var s = "";
/^.$/.test(s) // false
/^.$/u.test(s) // true
上面的代码表示，如果不添加u修饰符，正则表达式就会认为字符串s为两个字符，从而匹配失败。
利用这一点，可以写出一个正确返回字符串长度的函数。
function codePointLength(text) {
var result = text.match(/[\s\S]/gu);
return result ? result.length : 0;
}
var s = "";
s.length // 4
codePointLength(s) // 2contains(), startsWith(), endsWith()
传统上，JavaScript中只有indexOf方法，可用来确定一个字符串是否包含在另一个字符串中。ES6又提供了三种新方法。● contains()：返回布尔值，表示是否找到了参数字符串。● startsWith()：返回布尔值，表示参数字符串是否在源字符串的头
部。● endsWith()：返回布尔值，表示参数字符串是否在源字符串的尾
部。
var s = "Hello world!";
s.startsWith("Hello") // true
s.endsWith("!") // true
s.contains("o") // true
这三个方法都支持第二个参数，表示开始搜索的位置。
var s = "Hello world!";
s.startsWith("o", 4) // true
s.endsWith("o", 8) // true
s.contains("o", 8) // false
上面的代码表示，使用第二个参数n时，endsWith的行为与其他两个方法有所不同。它针对前n个字符，而其他两个方法则针对从第
试读结束[说明：试读内容隐藏了图片]