ES6都有哪些牛逼哄哄可以用来炫技的亮点-唐霜

因为工作的原因，实际上读书的时间很少，读【本文首发于唐霜的博客】【原创不易，请尊重版权】小说散文就已经够折腾了，静下心读技术方面【转载请注明来源】【转载请注明来源】的书就更困难。不过公司有学习经费，自己的未经授权，禁止复制转载。【关注微信公众号：wwwtangshuangnet】今年还有一半没有花出去，眼看已经第四季度【原创不易，请尊重版权】【原创内容，转载请注明出处】了，不花就便宜了公司，所以赶紧买了一些书未经授权，禁止复制转载。【本文受版权保护】，买回来不读又浪费，就先把阮一峰《ES6【本文受版权保护】未经授权，禁止复制转载。标准入门（第2版）》先读完。

【原创不易，请尊重版权】【本文首发于唐霜的博客】

【本文受版权保护】【原创不易，请尊重版权】

阮一峰写的东西就是为了通俗易懂，不去纠结原创内容，盗版必究。【转载请注明来源】于字眼。这本书也主要把ES6和ES5不同转载请注明出处：www.tangshuang.net【访问 www.tangshuang.net 获取更多精彩内容】的地方列出来进行阐述，不是Javascr【转载请注明来源】【未经授权禁止转载】ipt的入门书籍。虽然大部分我都有所接触本文作者：唐霜，转载请注明出处。【本文受版权保护】，但是系统的学习还是有必要的，这样才能有未经授权，禁止复制转载。本文版权归作者所有，未经授权不得转载。全局观。平时下班回家就看几十页，周末的时【原创不易，请尊重版权】【原创不易，请尊重版权】候啃完了。接下来，就结合自己的一些开发经本文作者：唐霜，转载请注明出处。【原创内容，转载请注明出处】验，谈谈自己觉得ES6带给我的最吸引人的【关注微信公众号：wwwtangshuangnet】【原创内容，转载请注明出处】地方。

著作权归作者所有，禁止商业用途转载。著作权归作者所有，禁止商业用途转载。

废掉老版作用域的节奏

Javascript里function是本文作者：唐霜，转载请注明出处。【转载请注明来源】一级成员，ES5的时候，要么是全局作用域未经授权，禁止复制转载。本文版权归作者所有，未经授权不得转载。，要么是函数级作用域，都用关键字var进【未经授权禁止转载】【原创不易，请尊重版权】行作用域里面的变量声明。但是到了ES6，本文版权归作者所有，未经授权不得转载。【原创不易，请尊重版权】除了全局变量在局部作用域仍然有效这点，其【关注微信公众号：wwwtangshuangnet】著作权归作者所有，禁止商业用途转载。他方面的理解全给废了，不升级知识，根本没【本文首发于唐霜的博客】【版权所有，侵权必究】法装逼下去。

全局变量

首先，解释一下全局作用域对我来说很重要。

【关注微信公众号：wwwtangshuangnet】【本文受版权保护】【访问 www.tangshuang.net 获取更多精彩内容】【作者：唐霜】

【关注微信公众号：wwwtangshuangnet】著作权归作者所有，禁止商业用途转载。【转载请注明来源】本文版权归作者所有，未经授权不得转载。

var a = 1;function autoinc() {
  a ++;
}
autoinc();
console.log(a);

在函数autoinc()中a这个全局变量转载请注明出处：www.tangshuang.net【关注微信公众号：wwwtangshuangnet】是有效的，但在php中，函数里面必须用g【转载请注明来源】著作权归作者所有，禁止商业用途转载。lobal去找到全局变量：

未经授权，禁止复制转载。【原创内容，转载请注明出处】

global $a;
$a = 1;
function autoinc() {
  global $a;
  $a ++;
}
autoinc();
echo $a;

你可以看到，在函数外面的区域，也要用gl【转载请注明来源】【未经授权禁止转载】obal去声明$a这个全局变量，func【未经授权禁止转载】【作者：唐霜】tion外跟function内并没有全局【版权所有】唐霜 www.tangshuang.net【原创不易，请尊重版权】与局部的概念，大家都是局部，并不共享变量著作权归作者所有，禁止商业用途转载。未经授权，禁止复制转载。，只有用global声明之后才能在其他作未经授权，禁止复制转载。【访问 www.tangshuang.net 获取更多精彩内容】用域内共享这个变量。

未经授权，禁止复制转载。【未经授权禁止转载】【访问 www.tangshuang.net 获取更多精彩内容】著作权归作者所有，禁止商业用途转载。

著作权归作者所有，禁止商业用途转载。【原创不易，请尊重版权】【原创不易，请尊重版权】

但是到了ES6这个茬，大部分风格规范都推著作权归作者所有，禁止商业用途转载。本文版权归作者所有，未经授权不得转载。荐使用const来声明一个全局变量，意思未经授权，禁止复制转载。【版权所有，侵权必究】就是说，如果你在全局作用域去声明一个变量转载请注明出处：www.tangshuang.net【访问 www.tangshuang.net 获取更多精彩内容】，应该是想在所有作用域范围内共享它，那么著作权归作者所有，禁止商业用途转载。未经授权，禁止复制转载。它就应该保持不变，否则会导致在不同作用域【未经授权禁止转载】原创内容，盗版必究。得到非预期的结果。

这么一来，实际上有取消全局变量的意思，c【本文受版权保护】【本文首发于唐霜的博客】onst声明的是不可改变的常量，相当于只著作权归作者所有，禁止商业用途转载。【原创内容，转载请注明出处】是一个别名而已。当然，ES6标准并没有这著作权归作者所有，禁止商业用途转载。著作权归作者所有，禁止商业用途转载。么要求，var声明全局变量仍然是有效的。

著作权归作者所有，禁止商业用途转载。未经授权，禁止复制转载。【未经授权禁止转载】未经授权，禁止复制转载。

块级作用域与let声明

var i = 99;for(let i = 10;i --;) {
  console.log(i); // 循环内的i值}console.log(i); // 99

在这本书里面提到，Airbnb推荐，你就【关注微信公众号：wwwtangshuangnet】原创内容，盗版必究。不要用var声明变量，全部用const/著作权归作者所有，禁止商业用途转载。【本文受版权保护】let代替，const声明全局的不变的常原创内容，盗版必究。【原创不易，请尊重版权】量，let声明块级的变量……

看到这里的时候，我都有点崩溃了。它的意思【原创不易，请尊重版权】未经授权，禁止复制转载。是：

【转载请注明来源】【本文受版权保护】

把整个全局当做一个块级作用域，把整个全局【原创不易，请尊重版权】【未经授权禁止转载】想象为放在一个花括号中间的代码

【原创不易，请尊重版权】

【本文受版权保护】

本文版权归作者所有，未经授权不得转载。

【关注微信公众号：wwwtangshuangnet】

把函数也当做一个块级作用域，函数里面根本未经授权，禁止复制转载。【未经授权禁止转载】用不到var（不考虑变量声明提升）

转载请注明出处：www.tangshuang.net

【转载请注明来源】

如果是这样，相当于把var废掉，把fun未经授权，禁止复制转载。【未经授权禁止转载】ction作用域废掉，把全局变量废掉，所【本文首发于唐霜的博客】本文版权归作者所有，未经授权不得转载。有真正可以变的变量都是let，那搞个鸡毛著作权归作者所有，禁止商业用途转载。本文作者：唐霜，转载请注明出处。……

幸好，这只是Airbnb这家公司的风格，著作权归作者所有，禁止商业用途转载。未经授权，禁止复制转载。ES6甚至ES7并没有任何一点迹象打算对著作权归作者所有，禁止商业用途转载。【转载请注明来源】var开刀，相反，我仍然觉得全局变量的使本文版权归作者所有，未经授权不得转载。本文版权归作者所有，未经授权不得转载。用是Javascript的一大特色。

上面提到，“把函数也当做块级作用域”，这【访问 www.tangshuang.net 获取更多精彩内容】【访问 www.tangshuang.net 获取更多精彩内容】种想法把函数从一等公民中踢出，和其他块级著作权归作者所有，禁止商业用途转载。【原创内容，转载请注明出处】作用域地位平等，这也让我不能接受。Jav本文作者：唐霜，转载请注明出处。【版权所有】唐霜 www.tangshuang.netascript的一大特色是函数，它不仅拥【关注微信公众号：wwwtangshuangnet】【转载请注明来源】有对象的本质属性，而且拥有转化为实际“类【原创不易，请尊重版权】【版权所有，侵权必究】”的功能，而且把它作为回调函数也是实现J【作者：唐霜】本文作者：唐霜，转载请注明出处。avascript异步操作的主要方式。如原创内容，盗版必究。本文作者：唐霜，转载请注明出处。果把函数降级，从配备上讲，应该将它的实例【访问 www.tangshuang.net 获取更多精彩内容】【原创内容，转载请注明出处】化功能去除，虽然ES6直接提供了clas原创内容，盗版必究。【关注微信公众号：wwwtangshuangnet】s，但它本质上还是函数的语法糖，函数的角【访问 www.tangshuang.net 获取更多精彩内容】【转载请注明来源】色不仅未被弱化，反而强化。

所以，我认为在函数中，顶层变量仍然应该用转载请注明出处：www.tangshuang.net本文版权归作者所有，未经授权不得转载。var进行声明，以此区别于以let声明的【原创不易，请尊重版权】原创内容，盗版必究。变量。

原创内容，盗版必究。【本文首发于唐霜的博客】

字符串模板

这个先讲好了，字符串模板是什么意思？就是著作权归作者所有，禁止商业用途转载。转载请注明出处：www.tangshuang.net像PHP一样，可以在字符串里面用变量，只【关注微信公众号：wwwtangshuangnet】本文版权归作者所有，未经授权不得转载。不过使用方法是要用${变量或表达式}这种方法括起来。

【转载请注明来源】【原创内容，转载请注明出处】

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>
`;

可以看到，字符串模板采用“将转载请注明出处：www.tangshuang.net原创内容，盗版必究。字符串引起来，它和原来的Javascri【转载请注明来源】【原创不易，请尊重版权】pt字符串有两大区别：

未经授权，禁止复制转载。本文版权归作者所有，未经授权不得转载。

可以换行

本文版权归作者所有，未经授权不得转载。

可以引用变量/表达式

转载请注明出处：www.tangshuang.net

原创内容，盗版必究。

【原创内容，转载请注明出处】

未经授权，禁止复制转载。

换行就不说了，以前我们要么使用+连接字符本文版权归作者所有，未经授权不得转载。【原创内容，转载请注明出处】串，要么使用\换行，现在通通不用了。
【版权所有】唐霜 www.tangshuang.net 引用变量就非常牛逼，你第一次使用这个字转载请注明出处：www.tangshuang.net【原创内容，转载请注明出处】符串模板的时候，把它显示在界面上，然后修未经授权，禁止复制转载。【版权所有】唐霜 www.tangshuang.net改变量的值，再显示到界面上，感觉是不是有本文作者：唐霜，转载请注明出处。【原创内容，转载请注明出处】点hi~

解构赋值

我认为这是ES6最酷的地方，它不仅从某种原创内容，盗版必究。本文版权归作者所有，未经授权不得转载。意义上弥补了Javascript提取值的本文作者：唐霜，转载请注明出处。原创内容，盗版必究。时候变量名和属性名（键名）对应的操作，更转载请注明出处：www.tangshuang.net本文版权归作者所有，未经授权不得转载。牛逼的地方是，它用超级简单的语法糖超越了著作权归作者所有，禁止商业用途转载。【原创不易，请尊重版权】大部分语言的解构赋值。

数组解构赋值

我们来看下php中的一种写法：

本文版权归作者所有，未经授权不得转载。【原创不易，请尊重版权】本文版权归作者所有，未经授权不得转载。

list($a,$b) = explode(',',$str);

但在Javascript中更加方便：

var [a,b] = str.split(',');

如果a，b之前已经声明了，那么这里连va【原创不易，请尊重版权】【原创不易，请尊重版权】r都省了。你或许会觉得看上去好不到哪里去【转载请注明来源】转载请注明出处：www.tangshuang.net，但是我告诉你，在php里面，你必须去调【关注微信公众号：wwwtangshuangnet】原创内容，盗版必究。用list这个函数，而在Javascri未经授权，禁止复制转载。【未经授权禁止转载】pt呢？完全是赋值这个动作完成的。

转载请注明出处：www.tangshuang.net【本文受版权保护】【转载请注明来源】

对象解构赋值

原创内容，盗版必究。著作权归作者所有，禁止商业用途转载。【关注微信公众号：wwwtangshuangnet】【访问 www.tangshuang.net 获取更多精彩内容】

// badfunction getA() {
  return {
  
  name : 'Mico',
  
  age : 10
  }}var a = getA();var name = a.name;var age = a.age;
// goodvar {name, age} = getA();

【原创不易，请尊重版权】【转载请注明来源】

函数参数解构

更了不起的解构被用在函数的参数上。我们有【原创内容，转载请注明出处】【访问 www.tangshuang.net 获取更多精彩内容】时会传入多个参数给函数，但是可惜的是，有【版权所有】唐霜 www.tangshuang.net【转载请注明来源】的时候你并不知道那些参数是不一定需要的。【本文受版权保护】【版权所有，侵权必究】以往我们必须在复杂参数解构中，传入一个对本文作者：唐霜，转载请注明出处。【本文受版权保护】象，通过对象的属性去调用自己要的值，比如【转载请注明来源】未经授权，禁止复制转载。：

【原创内容，转载请注明出处】【未经授权禁止转载】

function curl(url,postData,headers) {} // 如果并不存在postData，我们不得不这样调用：curl('http://xxx',null,{cookies:'xxx'}); // 第二个参数其实是没有必要的

【关注微信公众号：wwwtangshuangnet】【关注微信公众号：wwwtangshuangnet】

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}的形式，那么在调用函数的时候，传入一个对著作权归作者所有，禁止商业用途转载。【关注微信公众号：wwwtangshuangnet】象作为参数，传入的参数会自动解构给声明时【版权所有】唐霜 www.tangshuang.net转载请注明出处：www.tangshuang.net候的那个对象。

【原创不易，请尊重版权】转载请注明出处：www.tangshuang.net

{url}这种对象形式也是ES6新增的，【版权所有，侵权必究】本文版权归作者所有，未经授权不得转载。它的意思是{url:url}，第一个url是属性名，第二个url是变【版权所有】唐霜 www.tangshuang.net【转载请注明来源】量。如果在这之前没有声明第二个url变量转载请注明出处：www.tangshuang.net【版权所有，侵权必究】，那么会报错。
【转载请注明来源】未经授权，禁止复制转载。

本文版权归作者所有，未经授权不得转载。【作者：唐霜】本文作者：唐霜，转载请注明出处。

当然，除了使用对象这种方法，我们回到最前原创内容，盗版必究。【转载请注明来源】面的function curl(url,postData,headers) {}。我们现在还可以这样调用：

curl(['xxx',,{cookies:'xxx'}]); // 注意，第二个元素为空

通过数组解构的方式把参数传过去，在不需要未经授权，禁止复制转载。本文版权归作者所有，未经授权不得转载。传入的位置留空就可以了。

未经授权，禁止复制转载。著作权归作者所有，禁止商业用途转载。【原创内容，转载请注明出处】

这种用法，简直了！我都有种感动的流鼻涕的【转载请注明来源】原创内容，盗版必究。兴奋感。只可惜目前浏览器还没有广泛支持，【转载请注明来源】【本文首发于唐霜的博客】我们需要babel的帮助……不好意思，又【本文受版权保护】本文作者：唐霜，转载请注明出处。扯到babel。

【作者：唐霜】【关注微信公众号：wwwtangshuangnet】未经授权，禁止复制转载。著作权归作者所有，禁止商业用途转载。

默认值

习惯了php函数的默认值，写Javasc【访问 www.tangshuang.net 获取更多精彩内容】【原创不易，请尊重版权】ript函数的时候，有种香菇的冲动。然而未经授权，禁止复制转载。【原创不易，请尊重版权】，当ES6来的时候，妈妈再也不用担心我的【版权所有，侵权必究】【原创内容，转载请注明出处】默认值，而且Javascript现在的默【作者：唐霜】未经授权，禁止复制转载。认值，比php牛逼哄哄多了好吗。

函数的参数

function plus(x = 0,origin = 5) {
  return origin + x;}var rs = plus(5);alert(rs);

这和php的用法一摸一样。

【未经授权禁止转载】转载请注明出处：www.tangshuang.net【本文首发于唐霜的博客】【本文首发于唐霜的博客】

function sum(x = 2,y = x) {
  return x + y;}var rs = sum(5);alert(rs);

这就不一样了……点解y可以等于x？也就是原创内容，盗版必究。【未经授权禁止转载】说，在Javascript里，函数的参数转载请注明出处：www.tangshuang.net【本文首发于唐霜的博客】默认值可以是声明过的变量，如果该默认值没有声明过，就报错，【未经授权禁止转载】【本文首发于唐霜的博客】因此，参数的变量名顺序也很重要。

function sum(x = 2,y = x + 3) {
  return x + y;}var rs = sum(6);alert(rs);

function curl(url,{postData,headers = {cookies : 'xxx'}} = {}) {
  return some_ajax({
  
  url: url,
  
  data: postData || {}
  
  headers: headers || {}
  });}curl('http://xxx');

这是什么鬼？给我一脸黑人头像……其实简单【作者：唐霜】【原创不易，请尊重版权】，这里面有默认值的知识，也有解构赋值的知【版权所有】唐霜 www.tangshuang.net【原创不易，请尊重版权】识，{postData,headers}著作权归作者所有，禁止商业用途转载。【本文首发于唐霜的博客】是解构赋值这一层，headers = {【转载请注明来源】本文版权归作者所有，未经授权不得转载。cookies: ‘xxx&本文版权归作者所有，未经授权不得转载。本文版权归作者所有，未经授权不得转载。#8217;}是解构赋值的时候如果传入的本文作者：唐霜，转载请注明出处。【版权所有，侵权必究】对象里没有headers这个属性，默认值【原创不易，请尊重版权】【关注微信公众号：wwwtangshuangnet】设为{cookies : ‘转载请注明出处：www.tangshuang.net【版权所有】唐霜 www.tangshuang.netxxx’}，{postDat原创内容，盗版必究。【访问 www.tangshuang.net 获取更多精彩内容】a,headers} = {}是默认值设著作权归作者所有，禁止商业用途转载。【原创不易，请尊重版权】置，也就是函数的第二个参数如果没有设置的【版权所有】唐霜 www.tangshuang.net【转载请注明来源】话，则设置为空对象。

它的整个默认值，解构赋值的过程大概是这样原创内容，盗版必究。【原创不易，请尊重版权】：

【本文首发于唐霜的博客】【原创内容，转载请注明出处】本文作者：唐霜，转载请注明出处。【未经授权禁止转载】

function curl(url,options = {}) {} // 第一层：不存在第二个实参的话，使用{}默认值function curl(url,{postData,headers}) {} // 第二层：如果存在第二个实参（默认值是{}也表示存在第二个实参），进行对象解构赋值function curl(url,postData,headers = {cookies: 'xxx'}) {} // 第三层：解构赋值的时候不存在headers，传入一个默认值

所以上面执行curl(‘xx【访问 www.tangshuang.net 获取更多精彩内容】【关注微信公众号：wwwtangshuangnet】x’)，因为没有第二个实参，【原创内容，转载请注明出处】转载请注明出处：www.tangshuang.net所以实际上第二个参数默认值传入了{}，所【本文受版权保护】原创内容，盗版必究。以函数体内postData是不存在的，是【作者：唐霜】【原创不易，请尊重版权】undefined。但是headers是【作者：唐霜】【作者：唐霜】存在的，因为第二个参数传入了默认值，第二未经授权，禁止复制转载。著作权归作者所有，禁止商业用途转载。层的解构赋值无论如何都会进行，这个时候h未经授权，禁止复制转载。未经授权，禁止复制转载。eaders的默认值就是{cookies著作权归作者所有，禁止商业用途转载。【原创内容，转载请注明出处】:’xxx’}了本文作者：唐霜，转载请注明出处。未经授权，禁止复制转载。。解构的时候也存在默认值，这个默认值不是【访问 www.tangshuang.net 获取更多精彩内容】【转载请注明来源】函数参数默认值，而是解构默认值，解构默认【原创不易，请尊重版权】【版权所有，侵权必究】值往下看。

未经授权，禁止复制转载。转载请注明出处：www.tangshuang.net著作权归作者所有，禁止商业用途转载。

解构默认值

解构的时候也可以设置默认值，按理应该在前本文作者：唐霜，转载请注明出处。转载请注明出处：www.tangshuang.net面讲，但是函数参数默认值更常见，有了上面原创内容，盗版必究。本文作者：唐霜，转载请注明出处。的引子，再来说解构默认值，简直直接说完就本文作者：唐霜，转载请注明出处。【转载请注明来源】可以了。

原创内容，盗版必究。【作者：唐霜】

var {x = 0,y = 1} = {x : 5};console.log(x,y);

而且解构默认值也遵循上面提到的默认值可以【访问 www.tangshuang.net 获取更多精彩内容】【原创不易，请尊重版权】是变量和表达式的规则，只要变量经过声明就原创内容，盗版必究。【未经授权禁止转载】可以。

转载请注明出处：www.tangshuang.net【访问 www.tangshuang.net 获取更多精彩内容】本文版权归作者所有，未经授权不得转载。转载请注明出处：www.tangshuang.net

【作者：唐霜】【转载请注明来源】未经授权，禁止复制转载。

…（扩展运算符）和for…of

在ES6里面，真的是活久见，如果10年前【本文受版权保护】【版权所有，侵权必究】开始写Javascript，谁曾想到，一【未经授权禁止转载】【版权所有】唐霜 www.tangshuang.net下子出来这么多新东西，完全接受不了。你要【本文受版权保护】【原创不易，请尊重版权】是一个小版本一个小版本的升级，每个版本出【原创不易，请尊重版权】本文版权归作者所有，未经授权不得转载。一个新东西，那也不至于一下子学这么多东西本文版权归作者所有，未经授权不得转载。著作权归作者所有，禁止商业用途转载。呀，在哪个语言里面，三个点（…本文版权归作者所有，未经授权不得转载。【关注微信公众号：wwwtangshuangnet】;）也能算运算符？

【作者：唐霜】本文版权归作者所有，未经授权不得转载。

for…of

为了方便，还是先说一下for…【作者：唐霜】未经授权，禁止复制转载。;of吧，它是ES6新的遍历方式（《javascript的几种常见遍历数据结未经授权，禁止复制转载。本文版权归作者所有，未经授权不得转载。构的语法》），目前来看，浏览器不支持，连babe【原创内容，转载请注明出处】著作权归作者所有，禁止商业用途转载。l也不支持，要安装babel的扩展才支持【未经授权禁止转载】【本文受版权保护】。

【访问 www.tangshuang.net 获取更多精彩内容】转载请注明出处：www.tangshuang.net

for(let value of [1,2,3]) {
  console.log(value);}

就是这么简单，可以遍历过程中获取valu【关注微信公众号：wwwtangshuangnet】【未经授权禁止转载】e值。

著作权归作者所有，禁止商业用途转载。【未经授权禁止转载】

…（扩展运算符）

…是我看到ES6里面，使用最转载请注明出处：www.tangshuang.net未经授权，禁止复制转载。灵活的运算符，与其叫“扩展运算符”还不如【作者：唐霜】本文版权归作者所有，未经授权不得转载。叫“展开运算符”来的更加形象，它的作用，【原创内容，转载请注明出处】【访问 www.tangshuang.net 获取更多精彩内容】说白了，就是展开一个数组，得到一组独立的【原创内容，转载请注明出处】本文作者：唐霜，转载请注明出处。值（顺序和数组元素顺序相同）。

【本文首发于唐霜的博客】本文作者：唐霜，转载请注明出处。【本文受版权保护】【转载请注明来源】

说实话，第一次使用还是有点难以理解的。

著作权归作者所有，禁止商业用途转载。原创内容，盗版必究。【作者：唐霜】

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

上面的代码等于：

【关注微信公众号：wwwtangshuangnet】未经授权，禁止复制转载。本文版权归作者所有，未经授权不得转载。著作权归作者所有，禁止商业用途转载。

console.log(1,2,3);

这种操作有点难以理解，为什么通过R【原创不易，请尊重版权】转载请注明出处：www.tangshuang.net30;之后，一个数组就变成三个用逗号分开本文作者：唐霜，转载请注明出处。【转载请注明来源】的值呢？你要问我，我也不知道，它就是这种著作权归作者所有，禁止商业用途转载。【未经授权禁止转载】作用。
转载请注明出处：www.tangshuang.net ...[1,2,3]的结果不是字符串，也不是数组，没有数据类【版权所有，侵权必究】本文版权归作者所有，未经授权不得转载。型可以定义它，只能称之为“一组用逗号分开【作者：唐霜】未经授权，禁止复制转载。的值”。这种神奇的操作，让合并数组变得异【访问 www.tangshuang.net 获取更多精彩内容】【本文受版权保护】常简单：

未经授权，禁止复制转载。本文版权归作者所有，未经授权不得转载。

var a = [...[1,2,3],...[4,5,6]]; // [1,2,3,4,5,6]

它经常被用在函数的传参上：

未经授权，禁止复制转载。转载请注明出处：www.tangshuang.net

function sum(...args) {
  return Math.sum(args);}sum(1,2,34,23,23,5); // 任意个数的参数

不过它不能用在对象上，而只能用在类似数组【未经授权禁止转载】【作者：唐霜】的数据结构上（包括类似数组的对象）。

箭头函数

活久见的还有箭头函数=>，它的用法几乎闻所未闻，这也可以表示一个【关注微信公众号：wwwtangshuangnet】本文作者：唐霜，转载请注明出处。函数吗？可以，在ES6里面，就是这样干的【原创内容，转载请注明出处】本文作者：唐霜，转载请注明出处。：

转载请注明出处：www.tangshuang.net【转载请注明来源】未经授权，禁止复制转载。

[1,2,3].map(v => v + 2);

这在以前要写成：

【本文受版权保护】原创内容，盗版必究。著作权归作者所有，禁止商业用途转载。未经授权，禁止复制转载。

[1,2,3].map(function(v){
  return v + 2;});

显然不是方便了一点点，而且从视觉上，完全本文作者：唐霜，转载请注明出处。未经授权，禁止复制转载。没有函数的影子，是非常完整且单一的一条执【未经授权禁止转载】未经授权，禁止复制转载。行语句。所有的普通函数都可以这样改写了：

function(params) {}// 改写为(params) => {}

那么什么函数是普通的呢？

不能在函数体内使用this

未经授权，禁止复制转载。

【原创不易，请尊重版权】

【访问 www.tangshuang.net 获取更多精彩内容】

【关注微信公众号：wwwtangshuangnet】

不允许作为构造函数，不能用new实例化

未经授权，禁止复制转载。

【关注微信公众号：wwwtangshuangnet】

本文作者：唐霜，转载请注明出处。

内部不存在arguments对象

原创内容，盗版必究。

【原创内容，转载请注明出处】

【访问 www.tangshuang.net 获取更多精彩内容】

【原创内容，转载请注明出处】

其实说白了，你只能把它当做函数用，然后让本文版权归作者所有，未经授权不得转载。【原创不易，请尊重版权】函数的其他功能见鬼去。

著作权归作者所有，禁止商业用途转载。【本文受版权保护】【作者：唐霜】【作者：唐霜】

Promise

Promise在之前的Javascrip本文作者：唐霜，转载请注明出处。【作者：唐霜】t里面就已经实现了，比如jQuery引入了Deferred，但是这次ES6把Promise写进了标转载请注明出处：www.tangshuang.net原创内容，盗版必究。准里。

转载请注明出处：www.tangshuang.net未经授权，禁止复制转载。【本文受版权保护】本文版权归作者所有，未经授权不得转载。

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 => {});

本文作者：唐霜，转载请注明出处。【本文首发于唐霜的博客】未经授权，禁止复制转载。【未经授权禁止转载】

Class 类及其继承

Javascript也开始支持类声明了，【版权所有，侵权必究】未经授权，禁止复制转载。不再需要function来声明，而且cl原创内容，盗版必究。【本文首发于唐霜的博客】ass类型就是class类型，不是fun【转载请注明来源】未经授权，禁止复制转载。ction类型，所以在console中，【关注微信公众号：wwwtangshuangnet】著作权归作者所有，禁止商业用途转载。看到的是class的数据结构，它和fun【转载请注明来源】【原创不易，请尊重版权】ction实例化出来的类还有区别。

【原创内容，转载请注明出处】转载请注明出处：www.tangshuang.net

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.`);

本文作者：唐霜，转载请注明出处。【本文受版权保护】【原创内容，转载请注明出处】【作者：唐霜】

class Person {
  //...
  static walk() { // 不要使用this
  
  console.log('I am walking');
  }}Person.walk();

当然，它一如既往的支持getter/se【原创内容，转载请注明出处】转载请注明出处：www.tangshuang.nettter：

class Person {
  get age() {
  
  return this.age;
  }
  set age(x) {
  
  this.age = x;
  }}

可惜的是，Javascript的类还不支本文版权归作者所有，未经授权不得转载。【版权所有】唐霜 www.tangshuang.net持像php一样的public, prot著作权归作者所有，禁止商业用途转载。【版权所有】唐霜 www.tangshuang.netected, private类型的属性或本文作者：唐霜，转载请注明出处。【关注微信公众号：wwwtangshuangnet】方法，其实我比较期待的是私有属性，因为我著作权归作者所有，禁止商业用途转载。转载请注明出处：www.tangshuang.net们在类里面定义的所有属性，都不得不暴露给【未经授权禁止转载】原创内容，盗版必究。外部，虽然可以使用修饰符@（修饰符用的少【本文首发于唐霜的博客】著作权归作者所有，禁止商业用途转载。，不在本文介绍范围内）实现隐藏，但是还是未经授权，禁止复制转载。原创内容，盗版必究。很麻烦。我希望得到的效果如下：

【作者：唐霜】【访问 www.tangshuang.net 获取更多精彩内容】未经授权，禁止复制转载。

// 注意，下面这种写法会报错，我只是用来阐述自己的想法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进【访问 www.tangshuang.net 获取更多精彩内容】【原创不易，请尊重版权】行声明，这显得很尴尬，因为在php里面用转载请注明出处：www.tangshuang.net本文作者：唐霜，转载请注明出处。var声明表示public，而如果用le【作者：唐霜】转载请注明出处：www.tangshuang.nett声明，表示仅在class这个{}花括号本文版权归作者所有，未经授权不得转载。【转载请注明来源】的块级作用域有效，所以很自然的：

【访问 www.tangshuang.net 获取更多精彩内容】本文版权归作者所有，未经授权不得转载。

使用var声明表示外部可见，可以在外部进本文作者：唐霜，转载请注明出处。【原创内容，转载请注明出处】行修改

【转载请注明来源】

著作权归作者所有，禁止商业用途转载。

【原创内容，转载请注明出处】

而使用let声明，对外部不可见，但内部可未经授权，禁止复制转载。【转载请注明来源】以用this.father获取和修改

著作权归作者所有，禁止商业用途转载。

【访问 www.tangshuang.net 获取更多精彩内容】

【转载请注明来源】

【关注微信公众号：wwwtangshuangnet】

这只是我的一种想法，人微言轻，根本不可能本文作者：唐霜，转载请注明出处。著作权归作者所有，禁止商业用途转载。被别人接受。都是前端，差距咋就那么大？？

【原创不易，请尊重版权】【原创内容，转载请注明出处】未经授权，禁止复制转载。

目前解决这种私有属性的方法主要是通过Sy【未经授权禁止转载】本文版权归作者所有，未经授权不得转载。mbol（Symbol也是ES6新增的特【作者：唐霜】【原创内容，转载请注明出处】性），具体请参考这里和这里。
原创内容，盗版必究。【本文首发于唐霜的博客】转载请注明出处：www.tangshuang.net本文作者：唐霜，转载请注明出处。

【转载请注明来源】原创内容，盗版必究。【关注微信公众号：wwwtangshuangnet】原创内容，盗版必究。

继承

class Man extends Person {}var ken = new Man('Ken',22);

Mixin，继承于多个类

在Javascript里面比在Java里【本文首发于唐霜的博客】转载请注明出处：www.tangshuang.net面方便的多，Java里面只允许继承于一个本文版权归作者所有，未经授权不得转载。【转载请注明来源】父类，当然，在Javascript里面，未经授权，禁止复制转载。本文版权归作者所有，未经授权不得转载。默认是只能继承一个类，但是由于Javas【未经授权禁止转载】著作权归作者所有，禁止商业用途转载。cript里面property的便捷性，【未经授权禁止转载】【版权所有，侵权必究】继承于多个类其实只需要套路一下就可以了：未经授权，禁止复制转载。原创内容，盗版必究。先通过某种方法构造，从多个类里面挑出需要【作者：唐霜】【关注微信公众号：wwwtangshuangnet】的方法，把这些方法集中到某一个临时类身上【作者：唐霜】未经授权，禁止复制转载。，再让你需要的类去继承这个临时类。

本文作者：唐霜，转载请注明出处。【原创不易，请尊重版权】本文作者：唐霜，转载请注明出处。

总结

上面这些提到的点，是我自己觉得牛逼闪闪的转载请注明出处：www.tangshuang.net【原创内容，转载请注明出处】地方，是我经常用到的，当然，还有Gene【版权所有】唐霜 www.tangshuang.net【未经授权禁止转载】rator，Symbol，async，s【版权所有】唐霜 www.tangshuang.net未经授权，禁止复制转载。et/map等都非常重要，是ES6里面的原创内容，盗版必究。【关注微信公众号：wwwtangshuangnet】更牛逼闪闪的地方，但是因为使用到的频率于本文版权归作者所有，未经授权不得转载。未经授权，禁止复制转载。我而言，主要是这些，所以我把它们拎出来。

总体感觉上，ES6对Javascript原创内容，盗版必究。本文版权归作者所有，未经授权不得转载。的升级，是为了适应新的编程环境而来的大动【本文首发于唐霜的博客】【本文受版权保护】作，主要包括：

【访问 www.tangshuang.net 获取更多精彩内容】【关注微信公众号：wwwtangshuangnet】【原创内容，转载请注明出处】

node的大行其道

【转载请注明来源】

【作者：唐霜】

以Javascript作为开发语言的大型【本文受版权保护】转载请注明出处：www.tangshuang.net项目的爆发

【本文首发于唐霜的博客】

浏览器的混乱（谷歌这家霸道的公司）

【本文受版权保护】

而且还有一点感受就是，各个语言之间的语法【作者：唐霜】【关注微信公众号：wwwtangshuangnet】糖趋于统一，比如数组：

本文作者：唐霜，转载请注明出处。【转载请注明来源】原创内容，盗版必究。【本文首发于唐霜的博客】

// php$a = [];// javascriptvar a = [];

在php5.3之前，并不支持这种写法，就【转载请注明来源】转载请注明出处：www.tangshuang.net像Javascript在ES6之前不支持【访问 www.tangshuang.net 获取更多精彩内容】本文版权归作者所有，未经授权不得转载。类的写法一样。语言之间的语法糖趋于统一，【访问 www.tangshuang.net 获取更多精彩内容】原创内容，盗版必究。从某种角度讲是编程世界里面一种默认甚至公【原创不易，请尊重版权】原创内容，盗版必究。认的原则。我想，如果让每一门语言的创始人【本文首发于唐霜的博客】【原创内容，转载请注明出处】重新开发这门语言，他们写出的语法糖可能会转载请注明出处：www.tangshuang.net【未经授权禁止转载】非常接近，甚至连语法也会接近，只不过由于【原创内容，转载请注明出处】【访问 www.tangshuang.net 获取更多精彩内容】历史的原因，你不可能让php里面的对象采【未经授权禁止转载】转载请注明出处：www.tangshuang.net用.点操作符来调用方法，也不可能让Jav【本文受版权保护】原创内容，盗版必究。ascript中的遍历临时变量前加一个&【本文受版权保护】原创内容，盗版必究。amp;来表示地址引用。

【作者：唐霜】转载请注明出处：www.tangshuang.net转载请注明出处：www.tangshuang.net【本文首发于唐霜的博客】

但是，如果世界上只有一门语言，这个世界将【关注微信公众号：wwwtangshuangnet】本文作者：唐霜，转载请注明出处。黯淡无光。

【转载请注明来源】【版权所有，侵权必究】【版权所有】唐霜 www.tangshuang.net本文作者：唐霜，转载请注明出处。本文版权归作者所有，未经授权不得转载。本文版权归作者所有，未经授权不得转载。本文版权归作者所有，未经授权不得转载。未经授权，禁止复制转载。【本文受版权保护】【本文首发于唐霜的博客】本文版权归作者所有，未经授权不得转载。本文作者：唐霜，转载请注明出处。本文版权归作者所有，未经授权不得转载。【本文首发于唐霜的博客】转载请注明出处：www.tangshuang.net【转载请注明来源】【本文受版权保护】【关注微信公众号：wwwtangshuangnet】【作者：唐霜】未经授权，禁止复制转载。【作者：唐霜】【版权所有】唐霜 www.tangshuang.net【作者：唐霜】【转载请注明来源】原创内容，盗版必究。本文作者：唐霜，转载请注明出处。【关注微信公众号：wwwtangshuangnet】

2016-10-30 7852 ES6, for...of, 作用域

唐霜

ES6都有哪些牛逼哄哄可以用来炫技的亮点

废掉老版作用域的节奏

全局变量

块级作用域与let声明

字符串模板

解构赋值

数组解构赋值

对象解构赋值

函数参数解构

默认值

函数的参数

解构默认值

…（扩展运算符）和for…of

for…of

…（扩展运算符）

箭头函数

Promise

Class 类及其继承

Class的基本语法

继承

Mixin，继承于多个类

总结

为价值买单，打赏一杯咖啡

声明

关于

生态