前端开发不得不知的ES6十大新特性

1. 默认参数 in es6
2. 模板文本 in es6
3. 多行字符串 in es6
4. 解构赋值 in es6
5. 增强的对象文本 in es6
6. 箭头函数 in es6
7. Promise in es6
8. 块作用域构造Let and Const
9. Classes 类 in es6
10. Modules 模块 in es6

1.Default Parameters（默认参数） in ES6

还记得我们以前(ES5)不得不通过下面方式来定义默认参数：

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

一切工作都是正常的，直到参数值是0后，就有问题了，因为在JavaScript中，0表示false 但在ES6，我们可以直接把默认值放在函数申明里：

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

2.Template Literals（模板对象） in ES6

在其它语言中，使用模板和插入值是在字符串里面输出变量的一种方式。 因此，在ES5，我们可以这样组合一个字符串：

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

幸运的是，在ES6中，我们可以使用新的语法$ {NAME}，并把它放在反引号里：

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

3.Multi-line Strings （多行字符串）in ES6

ES6的多行字符串是一个非常实用的功能。 在ES5中，我们不得不使用以下方法来表示多行字符串：

var roadPoem = 'Then took the other, as just as fair,nt'
  + 'And having perhaps the better claimnt'
  + 'Because it was grassy and wanted wear,nt'
  + 'Though as for that the passing therent'
  + 'Had worn them really about the same,nt';
    
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.Destructuring Assignment （解构赋值）in ES6

解构可能是一个比较难以掌握的概念。先从一个简单的赋值讲起，其中house 和 mouse是key，同时house 和mouse也是一个变量，在ES5中是这样：

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

在ES6，我们可以使用这些语句代替上面的ES5代码：

// we'll get house and mouse variables
var { house, mouse } = $('body').data();
复制代码

这个同样也适用于数组，非常赞的用法：

var [col1, col2]  = $('.column');
var [line1, line2, line3, , line5] = file.split('n');
复制代码

6.Arrow Functions in（箭头函数） ES6

例如，下面的代码用ES5就不是很优雅：

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

在ES6中就不需要用 _this = this：

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

7. Promises in ES6

下面是一个简单的用setTimeout()实现的异步延迟加载函数:

setTimeout(function() {
  console.log('Yay!');
}, 1000);
复制代码

在ES6中，我们可以用promise重写:

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

到目前为止，代码的行数从三行增加到五行，并没有任何明显的好处。确实，如果我们有更多的嵌套逻辑在setTimeout()回调函数中，我们将发现更多好处：

setTimeout(function(){
  console.log('Yay!');
  setTimeout(function(){
    console.log('Wheeyee!');
  }, 1000);
}, 1000);
复制代码

在ES6中我们可以用promises重写：

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