糖语法首先，语法糖是一种语法，使得语言更容易理解和更具有可读性，它使语言相对我们来说变得更"甜"。这也意味着ES6的一些"新"的特点并不是真的新，只是试图简化语法而已，让我们编程更容易。这样就无需使用老式的取巧的方法编写你的代码，而是可以一种更简单的方式来编写代码，那就是使用糖语法。javascript并不像其他面向对象语言一样支持类这个概念，相反js使用function和prototype模拟类的概念。下面是创建类的新语法，如果你有来自Java或其他OO语言的背景你会很熟悉：class Project {constructor(name) {this.name = name;}start() {return "Project " + this.name + " starting";}
}var project = new Project("Journal");
project.start(); // "Project Journal starting"
你在这个类中定义的所有方法都被加入这个类的原型prototype中。既然JS不支持类，那么它支持继承吗？是的，JS中继承是通过prototype实现。下面是WebProject子类继承Project类的代码：class WebProject extends Project {constructor(name, technologies) {super(name);this.technologies = technologies;}info() {return this.name + " uses " + arrayToString(this.technology);}
}function arrayToString(param) {// ... some implementation
}var webJournal = new WebProject("FrontEnd Journal", "javascript");
webJournal.start(); // "FrontEnd Journal starting"
webJournal.info(); // "FrontEnd Journal uses javascript"
注意到在WebProject 构造器中，调用了Project的构造器，这样可以使用它的属性和方法。模块Module如果你想将所有js放在一个文件中，或者你要在应用的不同地方使用相同的功能，你就要使用模块，记住魔术的关键词是export，在你的函数之前使用export。假设Project 和 WebProject 都储存在application.js文件中，如下源码结构：myproject (folder)|-- modules (folder)|   ||   -- helpers.js|-- application.js
如果我们从application.js中分离arrayToString()，然后放入modules/helpers.js，这样我们在其他地方可以重用它：// modules/helper.js
export function arrayToString(param) {// some implementation
}
这样我们只需要导入我们的模块即可：// application.js
import { arrayToString } from 'modules/helpers';class WebProject extends Project {constructor(name, technologies) {super(name);this.technologies = technology;}info() {return this.name + " uses " + arrayToString(this.technology);}
}// ...
let和constES6中有两个新特性：let和 const，为了理解let，我们需要记住var是创建函数生存期内的变量：function printName() {if(true) {var name = "Rafael";}console.log(name); // Rafael
}
不像Java或其他语言，任何变量在JS中是在一个函数内创建，它会升级到哦函数之外部，不管你在哪里定义变量，都和你在函数顶部定义一样，这个行为称为hoisting。上面代码用下面方式容易理解些：function printName() {var name; // variable declaration is hoisted to the topif(true) {name = "Rafael";}console.log(name); // Rafael
}
那么let是如何工作呢，和hoisting有什么关系，我们导入let的代码如下：function printName() {if(true) {let name = "Rafael";}console.log(name); // ReferenceError: name is not defined
}
let是在一个代码块内，变量名只能在代码块中可见。function printName() {var name = "Hey";if(true) {let name = "Rafael";console.log(name); // Rafael
  }console.log(name); // Hey
}
总结：var是function-scoped，而let是 block-scoped.const是创建常量使用，一旦创建就一直不会被概念，如下：const SERVER_URL = "http://www.jdon.com"ES6还有其他新功能：Map, WeakMap, generators 和Proxies那么什么时候可以使用ES6这些特性呢？可见下面这个网址：http://kangax.github.com/es5-compat-table/es6/

Node.JS的ES6特性可见：ES6 for Node1. Function参数默认值
曾几何时，你编写了很多次如下代码：function beginTeleportation (who, options) {options = options || {}
}现在检查函数参数是否存在再也没有必要了， Default function parameters 默认函数参数能够让定义函数的默认参数。function sayCosmicGreeting (greeting = 'Greetings', name = 'Earthling') {console.log(`${greeting}, ${name}`)
}sayCosmicGreeting() // Greetings, Earthling
sayCosmicGreeting('Salutations', 'Martian') // Salutations, Martian

这里函数参数greeting和name都有自己默认值，所以，如果你没有赋值空参数调用，就会输出默认值Greetings和 Earthling。2.Rest参数
传递许多参数到函数中需要使用arguments 关键词：function sayCosmicGreetingTo (greeting) {const beings = arguments.slice(1)beings.forEach(being => {console.log(`${greeting}, ${being}`)})
}sayCosmicGreetingTo('Hello', 'Earthling', 'Martian', 'Neptunian')上述代码问题会报错：TypeError: arguments.slice is not a function，因为arguments 不是实际数组，只是类似，为了能正常工作，你需要使用数组原型的call函数：
Array.prototype.slice.call(arguments, 1)但是这些处理手法对于初学者很费解，而Rest parameters解决这个问题，给你一个真正实际的Array数组实例：function sayCosmicGreetingTo (greeting, ...beings) {beings.forEach(being => {console.log(`${greeting}, ${being}`)})
}sayCosmicGreetingTo('Hello', 'Earthling', 'Martian', 'Neptunian')注意到函数参数beings之前有“...”前缀，这个前缀表示这是一个数组，从0到数组最大长度之间的元素值是由实际传入参数决定的。
3.解构
在Javascript中普遍模式是将一个对象作为配置可选项，以前，这些选项得手工从对象中分解出来然后分配给相应变量。function beginDepartureSequence (options) {const captain = options.captainconst ship = options.shipconst destination = options.destinationconsole.log(`Blast off sequence initiated for Captain ${captain} on ship ${ship} flying to ${destination}`)
}beginDepartureSequence({captain: 'Rey',ship: 'Millennium Falcon',destination: 'Jakku'
})现在使用 destructure 可以直接将对象解构到变量，无论顺序：function beginDepartureSequence (options) {const { destination, captain, ship } = optionsconsole.log(`Blast off sequence initiated for Captain ${captain} on ship ${ship} flying to ${destination}`)
}beginDepartureSequence({captain: 'Rey',ship: 'Millennium Falcon',destination: 'Jakku'
})上面options对象被直接解构分配给了变量destination, captain, ship三个，我们可以做得更好，可以直接在函数参数中声明这些变量名：function beginDepartureSequence ({ destination, ship, captain }) {console.log(`Blast off sequence initiated for Captain ${captain} on ship ${ship} flying to ${destination}`)
}beginDepartureSequence({captain: 'Rey',ship: 'Millennium Falcon',destination: 'Jakku'
})以上只是简单几个新特点，更多支持Javascript6 或Javascript7的特性可以参考：http://node.green/

什么是表现与数据分离
我一来就看了一篇文章，点进去一看结果说的是表现与结构分离，其大意是：表现应该由CSS来控制，结构应该由html来控制，比如我们伟大的禅意花园。于是我觉得，我简历是不是应该改成，表现与结构分离呢。。。。但是我感觉表现与数据分离还是有点道理呢，所以我们还是回到我们的表现与数据分离吧。----------华丽的分割线----------半个小时过去了，我去查询了资料也去请教了前辈，最后得出了两个东西：MVCMVVM很显然，他们说的这个也许是我找寻的答案，但是我心里面视乎并不买账，于是我找寻了以后截了一个图：这是一个搞后端的大哥写的博客，我们看到采用MVC开发的主要目的就是表现与数据分离。看来真的就是MVC啦。。。好了，这个地方暂时打住，我们来看看当时的原话模拟面试
面试官问我，说简历上写的对表现与数据分离有一定理解，可以描述一下么我很淡定的说了句让我思考下，然后开始搜索着我的大脑硬盘，好像压根就没有这个词呢，于是胡乱蒙了个是不是html与css应该分离？答案当然是否定的，然后面试哥把他在项目中遇到的一个问题抛了出来：他有一个国家列表，现在要将国家列表放到A中，然后B可以由A选择，也可以有总列表选择
但是B中添加后，若是A中没有要动态为A增加这项。
为了方便各位理解，我上个图不知道各位听到这个题作何感受，我当时其实就有一种方式可以实现（最简单，最土的），压根就没有想到这个题会和“表现与数据分离”有关系。但是既然问到了，应该还是有联系吧，不知道各位怎么看待呢？于是我们回到问题本身吧再论行为与数据分离
我们工作中可能会碰到这种情况，美工每次拿过来的东西感觉都有点不一样，你不能说出有好大的不一样，反正就是有地方不一样。然后一拿来后整个家伙全部完蛋，js报错啦，为什么报错你们懂的，这里我来现身说法，整一个真实的例子吧当年我年少轻狂还在索贝时，我们有设计，但是设计同事的CSS很差，给我们的html+css经常有未闭合的标签，经常会出现莫名其妙的双引号。但是当时我CSS也不好，其它同事完全就是搞后端的，所以在这个情况下我们艰难的做出了我们的第一版产品，与设计图一致（还是在设计的代码上修改的）。完了领导看了提出了一点修改意见，于是设计同事又改了下图，相信我他只是简单的改了一点东西，然后形成了html交给了我们。。。。这次拿来后我看到了这次的html结构和上次完全是两码事，而我们的产品又是单页应用，很多地方完全是JavaScript生成的，或者html标签与data形成了模板，现在要改。。。改毛线啊。。。为了具体描述我们所遇到的困境我这里详细描述下：① 我们根据设计第一版图做好了页面② 页面上有很多应用，是采用类似于js模板化的东西（小的封装的，很戳）③ 页面根据数据库设计，前端使用js控制页面加载，最后渲染出我们的页面好了整个代码还有点小复杂，完了现在设计哥来了一个完全不同的结构了，当时内部没有CSS高手，甚至说没有CSS熟手。我负责改这个工作，我依稀记得我改出了翔。。。。最后终于改完了！然后根据领导指示，设计同事给出了我们第三套HTML代码，这个和原来的差距相对大一点，但是主要模块还在，于是我看空中到处都是翔了。。。。我不知道我前面的描述各位遇到过没有，但是当时我没能很好的解决这个问题，就只能缝缝补补的改着，每次出新东西后又是一场悲剧。回到现实其实我遇到的这个问题我感觉可以很好的说明表现数据分离的重要性了，但是什么是表现数据分离，我们还是需要将它说清楚啦。PS：其实我遇到的问题比较复杂吧，我感觉都不完全是表现与数据分离了......我说不清楚什么是表现与数据分离，那我们举点反例吧：① 服务器端（PHP/.net/Java），将html标签与数据一起打印出来Response.Write("<div>......</div>");
这段代码各位一定见过，可以想象，一个系统一年后要改版，这个地方的代码修改可能有点痛苦吧（特别是原来的开发人员不在了）这个是服务器端的，那么我们的客户端呢（咳咳，让我想想啦，想不到啦。。。）② 我想到一个例子，不知道合适不，拿出来说说吧前段时间，我们前端有个地区控件的东西，他大概是这个样子的：var area = '<table>......</table>';
他在字符串中将所有的地区全部写了出来（包括地区编号（隐藏）），这样做会有问题的：假设我哪天想改变一下结构适应新的布局（响应式布局神马的随便啦），那么我们会发现无从下手③ 还是回到我遇到那个问题（重点来了哦）我遇到那个问题其实主要是我在js中使用的id，或者class或者标签子选择器都不在了，新的代码上来后肯定出错啦。这个问题很尖锐的，原来我使用了一套html+css页面，我们根据这个写了一大套javascript的东西，耗时3个月。
然后我们换了一套页面，但是其中功能还是我们那套js
然后我们再换了一套页面，其中的js还是我们那套js
最后最变态的要求出来了（因为产品会给不同的电视台使用），我们的产品在不同的人看起来页面是不一样的，但是其中的功能是一样的！！！
屌丝们，接招吧，各位哥哥，你们会怎么解决这个问题呢？正是因为有上面那种莫名其妙的需求，所以才会出现我们前端MVC这种莫名其妙的东西。。。因为按道理来说前端是不应该出现MVC的，我们的html就是model，我们的css就是view，我们的js就是controller。结果现在单是javascript就搞出来了一套MVC，这不坑爹么？至此，不知道各位对表现与数据分离有新的了解没有？？？MVC——表现与数据分离
话不多说，先上一段代码（原来的代码，抄过来的）：1 <html xmlns="http://www.w3.org/1999/xhtml">2 <head>3     <title></title>4     <script src="../jquery-1.7.1.js" type="text/javascript"></script>5     <script type="text/javascript">6         $(document).ready(function () {7             var end = $('#end');8             $('#pili').change(function () {9                 var name = '';
10                 var p = $(this).val();
11                 if (p == '叶小钗') {
12                     name = '刀狂剑痴';
13                 }
14                 if (p == '一页书') {
15                     name == '百世经纶';
16                 }
17                 if (p == '素还真') {
18                     name = '清香白莲';
19                 }
20
21                 end.html(name + p);
22             });
23         });
24     </script>
25 </head>
26 <body>
27     <select id="pili">
28         <option value="叶小钗">叶小钗</option>
29         <option value="一页书">一页书</option>
30         <option value="素还真">素还真</option>
31     </select>
32     <div id="end"></div>
33 </body>
34 </html>
我们重新看看上面的代码，很简单的逻辑，select改变后变化end的值，好了现在需求发生改变：① select变成使用input模拟select② 在手机上还是使用select算了③ 总会有莫名其妙的需求，这个就是好吧，现在的代码你该怎么写呢？是不是会写几个代码，或者你压根不知道怎么写呢？？？于是看看我们的MVC的实现吧PS：代码是我可耻的抄的。。。。但我可是自豪的一个字一个字的敲的哦，窃知识不算偷......1 <html xmlns="http://www.w3.org/1999/xhtml">2 <head>3     <title></title>4     <script src="../jquery-1.7.1.js" type="text/javascript"></script>5     <script type="text/javascript">6         $(document).ready(function () {7             //定义一个controller8             var piliController = {9                 //选择视图
10                 start: function () {
11                     this.view.start();
12                 },
13                 //将用户操作映射到模型更新上
14                 set: function (name) {
15                     this.model.setPerson(name);
16                 }
17             };
18             piliController.model = {
19                 piliKV: {
20                     '叶小钗': '刀狂剑痴',
21                     '一页书': '百世经纶',
22                     '素还真': '清香白莲'
23                 },
24                 curPerson: null,
25                 //数据模型负责业务逻辑和数据存储
26                 setPerson: function (name) {
27                     this.curPerson = this.piliKV[name] ? name : null;
28                     this.onchange();
29                 },
30                 //通知数据同步更新
31                 onchange: function () {
32                     piliController.view.update();
33                 },
34                 //相应视图对当前状态的查询
35                 getPiliAction: function () {
36                     return this.curPerson ? this.piliKV[this.curPerson] + this.curPerson : '???';
37                 }
38             };
39             piliController.view = {
40                 //用户触发change事件
41                 start: function () {
42                     $('#pili').change(this.onchange);
43                 },
44                 onchange: function () {
45                     piliController.set($('#pili').val());
46                 },
47                 update: function () {
48                     $('#end').html(piliController.model.getPiliAction());
49                 }
50             };
51             piliController.start();
52         });
53     </script>
54 </head>
55 <body>
56     <select id="pili">
57      <option value="叶小钗">叶小钗</option>
58         <option value="一页书">一页书</option>
59         <option value="素还真">素还真</option>
60     </select>
61     <div id="end"></div>
62 </body>
63 </html>
我们来看看这个神一样的代码。。。。我们一开始会认为他有这些问题：① 代码维护困难，至少我认为很困难② 徒增复杂性，性能会有问题③ 我并不能说服自己说自己懂了。。。。于是我们就放弃了MVC啦，但是我们回过头来好好审视下他，我们会发现不一样的东西：① 我们好像就在view中使用了选择器获取dom，其它地方压根不认识dom这个丫的。② 我们的数据似乎在model中，我们可以随意改变，但是并不会影响到我们dom③ view和model是完全独立的，我们的controller恰好把他们串联起来了看着这神奇的魔法，我似懂非懂的点了点头，你妹的MVC还真他妈够劲！！！