最最最常用的十大ES6特性总结-白红宇

1. 默认参数

之前我们使用的默认传参方式：

var link = function (height, color, url) {    var height = height || 50    var color = color || 'red'    var url = url || 'http://azat.co'    ...}复制代码

现在es6新语法：

var link = function(height = 50, color = 'red', url = 'http://azat.co') {  ...}复制代码

这个不用解释，简单易懂！

2. 字符串拼接

之前我们使用的字符串拼接方式：

var name = 'Your name is ' + first + ' ' + last + '.';var url = 'http://localhost:3000/api/messages/' + id;复制代码

现在es6新语法：

var name = `Your name is ${first} ${last}.`;var url = `http://localhost:3000/api/messages/${id}`;复制代码

使用``反引号，位置在tab的上方,应该也简单易懂！

3. 换行字符串拼接

之前我们使用的字符串拼接方式：

var roadPoem = 'Then took the other, as just as fair,\n\t'    + 'And having perhaps the better claim\n\t'    + 'Because it was grassy and wanted wear,\n\t'    + 'Though as for that the passing there\n\t'    + 'Had worn them really about the same,\n\t'var fourAgreements = 'You have the right to be you.\n\    You can only be you when you do your best.'复制代码

现在es6新语法：

var roadPoem = `Then took the other, as just as fair,    And having perhaps the better claim    Because it was grassy and wanted wear,    Though as for that the passing there    Had worn them really about the same,`var fourAgreements = `You have the right to be you.    You can only be you when you do your best.`复制代码

同样使用``反引号，就不用管换行了！

4. 结构赋值

之前我们使用的赋值方式：

var data = $('body').data(), // data has properties house and mouse  house = data.house,  mouse = data.mouse复制代码

现在es6新语法：

var {house, mouse} = $('body').data() // we'll get house and mouse variablesvar {
   json: jsonMiddleware} = require('body-parser')var {username, password} = req.bodyvar [col1, col2]  = $('.column'),  [line1, line2, line3, , line5] = file.split('\n')复制代码

5. 对象加强

之前我们使用方式：

var serviceBase = {
   port: 3000, url: 'azat.co'},    getAccounts = function(){
   return [1,2,3]}var accountServiceES5 = {  port: serviceBase.port,  url: serviceBase.url,  getAccounts: getAccounts,  toString: function() {    return JSON.stringify(this.valueOf())  },  getUrl: function() {
   return "http://" + this.url + ':' + this.port},  valueOf_1_2_3: getAccounts()}复制代码

现在es6新语法：

var accountServiceES5ObjectCreate = Object.create(serviceBase)var accountServiceES5ObjectCreate = {  getAccounts: getAccounts,  toString: function() {    return JSON.stringify(this.valueOf())  },  getUrl: function() {
   return "http://" + this.url + ':' + this.port},  valueOf_1_2_3: getAccounts()}复制代码

现在可以继承了！

6. 箭头函数

之前我们使用方式：

var _this = this$('.btn').click(function(event){  _this.sendData()})复制代码

现在es6新语法：

$('.btn').click((event) =>{  this.sendData()})复制代码

一个箭头就搞定了!

7. Promises

现在es6新语法：

var wait1000 =  new Promise(function(resolve, reject) {  setTimeout(resolve, 1000)}).then(function() {  console.log('Yay!')})复制代码

只是语法上面简单些，更加容易阅读和维护！

8. Let 和 Const

现在es6新语法：

for (var i = 0; i < 10; i++) {}    console.log(i); //10for (let j = 0; j < 10; j++) {}console.log(j); //Uncaught ReferenceError: j is not definedconst value = 100;console.log(value);value = 200; //Uncaught TypeError: Assignment to constant variable.复制代码

let跟var比较，let限制了作用域,const不能被改变

9. class类

这里东西比较多，后续更新

10. 模块化

这里东西比较多，后续更新