因为工作的原因，实际上读书的时间很少，读小说散文就已经够折腾了，静下心读技术方面的书就更困难。不过公司有学习经费，自己的今年还有一半没有花出去，眼看已经第四季度了，不花就便宜了公司，所以赶紧买了一些书，买回来不读又浪费，就先把阮一峰《ES6标准入门（第2版）》先读完。
阮一峰写的东西就是为了通俗易懂，不去纠结于字眼。这本书也主要把ES6和ES5不同的地方列出来进行阐述，不是Javascript的入门书籍。虽然大部分我都有所接触，但是系统的学习还是有必要的，这样才能有全局观。平时下班回家就看几十页，周末的时候啃完了。接下来，就结合自己的一些开发经验，谈谈自己觉得ES6带给我的最吸引人的地方。
废掉老版作用域的节奏
Javascript里function是一级成员，ES5的时候，要么是全局作用域，要么是函数级作用域，都用关键字var进行作用域里面的变量声明。但是到了ES6，除了全局变量在局部作用域仍然有效这点，其他方面的理解全给废了，不升级知识，根本没法装逼下去。
全局变量
首先，解释一下全局作用域对我来说很重要。
在开发php的时候，就没有这个概念，在Javascript里面，我们这样做：
var a = 1;function autoinc() {
a ++;
}
autoinc();
console.log(a);
在函数autoinc()中a这个全局变量是有效的，但在php中，函数里面必须用global去找到全局变量：
global $a;
$a = 1;
function autoinc() {
global $a;
$a ++;
}
autoinc();
echo $a;
你可以看到，在函数外面的区域，也要用global去声明$a这个全局变量，function外跟function内并没有全局与局部的概念，大家都是局部，并不共享变量，只有用global声明之后才能在其他作用域内共享这个变量。
基于这一点，我认为Javascript在全局与局部的安排上更加符合普通人思维。
但是到了ES6这个茬，大部分风格规范都推荐使用const来声明一个全局变量，意思就是说，如果你在全局作用域去声明一个变量，应该是想在所有作用域范围内共享它，那么它就应该保持不变，否则会导致在不同作用域得到非预期的结果。
这么一来，实际上有取消全局变量的意思，const声明的是不可改变的常量，相当于只是一个别名而已。当然，ES6标准并没有这么要求，var声明全局变量仍然是有效的。
块级作用域与let声明
用花括号处理的作用域就是块级作用域，比如for/while循环语句，if判断语句，甚至莫名其妙写一个{}，在这个作用域内，用let声明变量，出了作用域就被销毁。
var i = 99;for(let i = 10;i --;) {
console.log(i); // 循环内的i值}console.log(i); // 99
在这本书里面提到，Airbnb推荐，你就不要用var声明变量，全部用const/let代替，const声明全局的不变的常量，let声明块级的变量……
看到这里的时候，我都有点崩溃了。它的意思是：
- 把整个全局当做一个块级作用域，把整个全局想象为放在一个花括号中间的代码
- 把函数也当做一个块级作用域，函数里面根本用不到var（不考虑变量声明提升）
如果是这样，相当于把var废掉，把function作用域废掉，把全局变量废掉，所有真正可以变的变量都是let，那搞个鸡毛……
幸好，这只是Airbnb这家公司的风格，ES6甚至ES7并没有任何一点迹象打算对var开刀，相反，我仍然觉得全局变量的使用是Javascript的一大特色。
上面提到，“把函数也当做块级作用域”，这种想法把函数从一等公民中踢出，和其他块级作用域地位平等，这也让我不能接受。Javascript的一大特色是函数，它不仅拥有对象的本质属性，而且拥有转化为实际“类”的功能，而且把它作为回调函数也是实现Javascript异步操作的主要方式。如果把函数降级，从配备上讲，应该将它的实例化功能去除，虽然ES6直接提供了class，但它本质上还是函数的语法糖，函数的角色不仅未被弱化，反而强化。
所以，我认为在函数中，顶层变量仍然应该用var进行声明，以此区别于以let声明的变量。
字符串模板
这个先讲好了，字符串模板是什么意思？就是像PHP一样，可以在字符串里面用变量，只不过使用方法是要用${变量或表达式}这种方法括起来。
var a = `
<p>I am ${sex.man}, and not like ${sex.woman}</p>
<p>I want to know if 1+2 equals ${a + 2}</p>
`;
可以看到，字符串模板采用``将字符串引起来，它和原来的Javascript字符串有两大区别：
- 可以换行
- 可以引用变量/表达式
换行就不说了，以前我们要么使用+连接字符串，要么使用\换行，现在通通不用了。
引用变量就非常牛逼，你第一次使用这个字符串模板的时候，把它显示在界面上，然后修改变量的值，再显示到界面上，感觉是不是有点hi~
解构赋值
我认为这是ES6最酷的地方，它不仅从某种意义上弥补了Javascript提取值的时候变量名和属性名（键名）对应的操作，更牛逼的地方是，它用超级简单的语法糖超越了大部分语言的解构赋值。
数组解构赋值
我们来看下php中的一种写法：
list($a,$b) = explode(',',$str);
但在Javascript中更加方便：
var [a,b] = str.split(',');
如果a，b之前已经声明了，那么这里连var都省了。你或许会觉得看上去好不到哪里去，但是我告诉你，在php里面，你必须去调用list这个函数，而在Javascript呢？完全是赋值这个动作完成的。
对象解构赋值
更有用的，是对象的解构赋值，因为我们经常会使自己的函数返回对象：
// badfunction getA() {
return {
name : 'Mico',
age : 10
}}var a = getA();var name = a.name;var age = a.age;
// goodvar {name, age} = getA();
关于解构赋值的深层的东西，还需要你自己去读书，我只想说的是，看到这样的语法糖，我TM真的忍不住想尖叫有没有，太爽了。
函数参数解构
更了不起的解构被用在函数的参数上。我们有时会传入多个参数给函数，但是可惜的是，有的时候你并不知道那些参数是不一定需要的。以往我们必须在复杂参数解构中，传入一个对象，通过对象的属性去调用自己要的值，比如：
function curl(url,postData,headers) {} // 如果并不存在postData，我们不得不这样调用：curl('http://xxx',null,{cookies:'xxx'}); // 第二个参数其实是没有必要的
上面是我们最早的一种方式，为了实现我们的想法，我们决定修改参数：
function curl(url,options) {
// ...
if(options.postData) {}
if(options.headers) {}
// ...}curl('http://xxx',{
headers:{cookies:'xxx'}});
通过上面这种传入对象参数的方式，可以实现防止参数不必须传入的情况。
但是，来到ES6的时代，我们可以这样做：
function curl({url,postData,headers}) {
return some_ajax({
url : url,
data : postData,
headers : headers
});}curl({
url : 'xxx',
headers : {
cookies: 'xxx'
}});
从上面可以看到，直接在定义函数的时候，利用函数参数也可以解构的特性，把参数写成{url,postData,headers}的形式，那么在调用函数的时候，传入一个对象作为参数，传入的参数会自动解构给声明时候的那个对象。
{url}这种对象形式也是ES6新增的，它的意思是
{url:url}，第一个url是属性名，第二个url是变量。如果在这之前没有声明第二个url变量，那么会报错。
当然，除了使用对象这种方法，我们回到最前面的function curl(url,postData,headers) {}。我们现在还可以这样调用：
curl(['xxx',,{cookies:'xxx'}]); // 注意，第二个元素为空
通过数组解构的方式把参数传过去，在不需要传入的位置留空就可以了。
这种用法，简直了！我都有种感动的流鼻涕的兴奋感。只可惜目前浏览器还没有广泛支持，我们需要babel的帮助……不好意思，又扯到babel。
默认值
习惯了php函数的默认值，写Javascript函数的时候，有种香菇的冲动。然而，当ES6来的时候，妈妈再也不用担心我的默认值，而且Javascript现在的默认值，比php牛逼哄哄多了好吗。
函数的参数
function plus(x = 0,origin = 5) {
return origin + x;}var rs = plus(5);alert(rs);
这和php的用法一摸一样。
function sum(x = 2,y = x) {
return x + y;}var rs = sum(5);alert(rs);
这就不一样了……点解y可以等于x？也就是说，在Javascript里，函数的参数默认值可以是声明过的变量，如果该默认值没有声明过，就报错，因此，参数的变量名顺序也很重要。
function sum(x = 2,y = x + 3) {
return x + y;}var rs = sum(6);alert(rs);
什么鬼？连表达式都可以作为默认值？是的，你没有瞎，只要在默认值运算的时候变量都是经过声明的就OK。
放个大招：
function curl(url,{postData,headers = {cookies : 'xxx'}} = {}) {
return some_ajax({
url: url,
data: postData || {}
headers: headers || {}
});}curl('http://xxx');
这是什么鬼？给我一脸黑人头像……其实简单，这里面有默认值的知识，也有解构赋值的知识，{postData,headers}是解构赋值这一层，headers = {cookies: 'xxx'}是解构赋值的时候如果传入的对象里没有headers这个属性，默认值设为{cookies : 'xxx'}，{postData,headers} = {}是默认值设置，也就是函数的第二个参数如果没有设置的话，则设置为空对象。
它的整个默认值，解构赋值的过程大概是这样：
function curl(url,options = {}) {} // 第一层：不存在第二个实参的话，使用{}默认值function curl(url,{postData,headers}) {} // 第二层：如果存在第二个实参（默认值是{}也表示存在第二个实参），进行对象解构赋值function curl(url,postData,headers = {cookies: 'xxx'}) {} // 第三层：解构赋值的时候不存在headers，传入一个默认值
所以上面执行curl('xxx')，因为没有第二个实参，所以实际上第二个参数默认值传入了{}，所以函数体内postData是不存在的，是undefined。但是headers是存在的，因为第二个参数传入了默认值，第二层的解构赋值无论如何都会进行，这个时候headers的默认值就是{cookies:'xxx'}了。解构的时候也存在默认值，这个默认值不是函数参数默认值，而是解构默认值，解构默认值往下看。
解构默认值
解构的时候也可以设置默认值，按理应该在前面讲，但是函数参数默认值更常见，有了上面的引子，再来说解构默认值，简直直接说完就可以了。
var {x = 0,y = 1} = {x : 5};console.log(x,y);
而且解构默认值也遵循上面提到的默认值可以是变量和表达式的规则，只要变量经过声明就可以。
这种东西，在我见过的语言里，就Javascript里面有，只能说我孤陋寡闻，第一次看到，下巴都掉了。
...（扩展运算符）和for...of
在ES6里面，真的是活久见，如果10年前开始写Javascript，谁曾想到，一下子出来这么多新东西，完全接受不了。你要是一个小版本一个小版本的升级，每个版本出一个新东西，那也不至于一下子学这么多东西呀，在哪个语言里面，三个点（...）也能算运算符？
for...of
为了方便，还是先说一下for...of吧，它是ES6新的遍历方式（《javascript的几种常见遍历数据结构的语法》），目前来看，浏览器不支持，连babel也不支持，要安装babel的扩展才支持。
for(let value of [1,2,3]) {
console.log(value);}
就是这么简单，可以遍历过程中获取value值。
...（扩展运算符）
...是我看到ES6里面，使用最灵活的运算符，与其叫“扩展运算符”还不如叫“展开运算符”来的更加形象，它的作用，说白了，就是展开一个数组，得到一组独立的值（顺序和数组元素顺序相同）。
说实话，第一次使用还是有点难以理解的。
console.log(...[1,2,3]);
上面的代码等于：
console.log(1,2,3);
这种操作有点难以理解，为什么通过...之后，一个数组就变成三个用逗号分开的值呢？你要问我，我也不知道，它就是这种作用。
...[1,2,3]的结果不是字符串，也不是数组，没有数据类型可以定义它，只能称之为“一组用逗号分开的值”。这种神奇的操作，让合并数组变得异常简单：
var a = [...[1,2,3],...[4,5,6]]; // [1,2,3,4,5,6]
它经常被用在函数的传参上：
function sum(...args) {
return Math.sum(args);}sum(1,2,34,23,23,5); // 任意个数的参数
不过它不能用在对象上，而只能用在类似数组的数据结构上（包括类似数组的对象）。
箭头函数
活久见的还有箭头函数=>，它的用法几乎闻所未闻，这也可以表示一个函数吗？可以，在ES6里面，就是这样干的：
[1,2,3].map(v => v + 2);
这在以前要写成：
[1,2,3].map(function(v){
return v + 2;});
显然不是方便了一点点，而且从视觉上，完全没有函数的影子，是非常完整且单一的一条执行语句。所有的普通函数都可以这样改写了：
function(params) {}// 改写为(params) => {}
那么什么函数是普通的呢？
- 不能在函数体内使用this
- 不允许作为构造函数，不能用new实例化
- 内部不存在arguments对象
其实说白了，你只能把它当做函数用，然后让函数的其他功能见鬼去。
Promise
Promise在之前的Javascript里面就已经实现了，比如jQuery引入了Deferred，但是这次ES6把Promise写进了标准里。
function ajax(url) {
return new Promise((resolve, reject) => {
var xhr = new XMLHttpRequest();
xhr.open("GET", url);
xhr.onreadystatechange = handler;
xhr.responseType = 'json';
xhr.setRequestHeader('Accept', 'application/json');
xhr.send();
function handler() {
if(this.readyState !== 4) return;
if(this.status === 200) resolve(this.response);
else reject(new Error(this.statusText));
}
});}ajax('http://xxx').then(data => {}).catch(error => {});
过多就不多说了，自己和jQuery的Promise对照感受。
Class 类及其继承
Javascript也开始支持类声明了，不再需要function来声明，而且class类型就是class类型，不是function类型，所以在console中，看到的是class的数据结构，它和function实例化出来的类还有区别。
Class的基本语法
class Person {
constructor(name,age) {
this.name = name;
this.age = age;
}
say(msg) {
alert(msg)
}}var mico = new Person('Mico',10);mico.say(`Hello, my name is ${mico.name}, and ${mico.age} years old.`);
而且Javascript的类也支持静态方法：
class Person {
//...
static walk() { // 不要使用this
console.log('I am walking');
}}Person.walk();
当然，它一如既往的支持getter/setter：
class Person {
get age() {
return this.age;
}
set age(x) {
this.age = x;
}}
可惜的是，Javascript的类还不支持像php一样的public, protected, private类型的属性或方法，其实我比较期待的是私有属性，因为我们在类里面定义的所有属性，都不得不暴露给外部，虽然可以使用修饰符@（修饰符用的少，不在本文介绍范围内）实现隐藏，但是还是很麻烦。我希望得到的效果如下：
// 注意，下面这种写法会报错，我只是用来阐述自己的想法class Person {
var name; // public
var age;
var sex;
let mother; // private
let father;
let telphone;
// ...}var sony = new Person('Sony',12);console.log(sony.name); // Sonyconsole.log(sony.father); // undefined
在类的作用域范围内，使用var或let进行声明，这显得很尴尬，因为在php里面用var声明表示public，而如果用let声明，表示仅在class这个{}花括号的块级作用域有效，所以很自然的：
- 使用var声明表示外部可见，可以在外部进行修改
- 而使用let声明，对外部不可见，但内部可以用this.father获取和修改
这只是我的一种想法，人微言轻，根本不可能被别人接受。都是前端，差距咋就那么大？？
继承
ES6里面，类的继承变得超级简单，几乎和php语法一摸一样：
class Man extends Person {}var ken = new Man('Ken',22);
Mixin，继承于多个类
在Javascript里面比在Java里面方便的多，Java里面只允许继承于一个父类，当然，在Javascript里面，默认是只能继承一个类，但是由于Javascript里面property的便捷性，继承于多个类其实只需要套路一下就可以了：先通过某种方法构造，从多个类里面挑出需要的方法，把这些方法集中到某一个临时类身上，再让你需要的类去继承这个临时类。
总结
上面这些提到的点，是我自己觉得牛逼闪闪的地方，是我经常用到的，当然，还有Generator，Symbol，async，set/map等都非常重要，是ES6里面的更牛逼闪闪的地方，但是因为使用到的频率于我而言，主要是这些，所以我把它们拎出来。
总体感觉上，ES6对Javascript的升级，是为了适应新的编程环境而来的大动作，主要包括：
- node的大行其道
- 以Javascript作为开发语言的大型项目的爆发
- 浏览器的混乱（谷歌这家霸道的公司）
而且还有一点感受就是，各个语言之间的语法糖趋于统一，比如数组：
// php$a = [];// javascriptvar a = [];
在php5.3之前，并不支持这种写法，就像Javascript在ES6之前不支持类的写法一样。语言之间的语法糖趋于统一，从某种角度讲是编程世界里面一种默认甚至公认的原则。我想，如果让每一门语言的创始人重新开发这门语言，他们写出的语法糖可能会非常接近，甚至连语法也会接近，只不过由于历史的原因，你不可能让php里面的对象采用.点操作符来调用方法，也不可能让Javascript中的遍历临时变量前加一个&来表示地址引用。
但是，如果世界上只有一门语言，这个世界将黯淡无光。
