JavaScript开发者必须知道的ES6十大特性
原文链接：https://medium.com/@kavisha.talsania/top-10-es6-features-every-javascript-developer-must-know-4c81ec54bbcd
ESMAScript 2015，也就是我们所熟知的ES6或ES2015，发布于2015年6月。ES5发布于2009年12月。下一版的ECMAScript过了6年才发布，所以，在ES6中，有很多新的特性。
下面是一些ES6十大新特性的简述，适用于快速浏览的程序员：
1、ES6中的默认参数；
2、ES6字符串的模板发生了改变；
3、ES6中的多行字符串也有了变化；
4、ES6中的解构分配；
5、增强版的对象语义构建；
6、箭头表示的函数；
7、ES6中的Promises；
8、局部变量的定义Let和Const；
9、ES6中的类；
10、ES6中的模块。
1、ES6中的默认参数
在ES6中，我们可以这样设置默认值：
var calculateArea = function(height = 50, width = 80) {
// write logic
...
}在ES5中，我们需要使用逻辑运算符OR
var calculateArea = function(height, width) {
height = height || 50;
width = width || 80;
// write logic
...
}2、字符串表达式中的模板
在ES6中，我们可以在需要变量的字符串中使用参数${PARAMETER}：
var name = `Your name is ${firstName} ${lastName}.’在ES5中，我们需要把字符串分成一段一段的，然后把变量插入：
var name = 'Your name is ' + firstName + ' ' + lastName + '.'3、ES6中的多行字符串
在ES6中，非常容易写一个多行的字符串：
let poemData = `Johny Johny Yes Papa,
Eating sugar? No, papa!
Telling lies? No, papa!
Open your mouth Ah, ah, ah!`但在ES5中，你需要这样写：
var poemData = 'Johny Johny Yes Papa,\n'
+ 'Eating sugar? No, papa!\n'
+ 'Telling lies? No, papa!\n'
+ 'Open your mouth Ah, ah, ah!'4、ES6中的解构分配变量
JavaScript表达式中的解构分配参数使得从数组和对象属性中取得值成为可能，值可以分配给不同的变量。
var o = {p: 42, q: true};
var {p, q} = o;
console.log(p); // 42
console.log(q); // true在ES5中，我们只能这样实现：
var o = {p: 42, q: true};
var p = o.p;
var q = o.q;
console.log(p); // 42
console.log(q); // true5、在ES6中的增强版语义对象
表达式的方式定义对象，使得可以直接写入属性，来定义对象：
function getLaptop(make, model, year) {
return {
make,
model,
year
}
}
getLaptop("Apple", "MacBook", "2015");在ES5中，这样定义对象：
function getLaptop(make, model, year) {
return {
make: make,
model: model,
year: year
}
}getLaptop("Apple", "MacBook", "2015");
6、ES6中的这个符号=>表示函数
这个胖胖的箭头，有着很神奇地功效，它能让this指向调用这个函数的环境（对象）：
$('.btn').click((event) => {
this.doSomething()
});在ES5中，我们必须用_this = this，或者.bind(this)：
var _this = this;
$('.btn').click(function(event){
_this.doSomething();
});7、ES6中的Promises
Promises用来执行异步操作，在ES6中，我们可以使用箭头来定义函数：
var asyncCall = new Promise((resolve, reject) => {
// do something async
resolve();
}).then(()=> {
console.log('Yay!');
})在ES5中，我们需要设置setTimeout()：
setTimeout(function(){
console.log('Yay!');
}, 1000);8、定义局部变量的关键词Let和Const
let是用来定义局部变量的，可以理解为新的var。let和var的区别在于，var定义的变量的生命周期在最近的函数定义中，而let定义的局部变量，作用域是在一个封闭的区域中，这个区域要比函数定义的区域小：
function calculateAmount(boolVal) {
let amount = 0;
if(boolVal) {
let amount = 1; // scope of this amount ends with next closing bracket
}
return amount;
}
console.log(calculateAmount(true)); // output: 0在ES5中：
function calculateAmount(boolVal) {
var amount = 0;
if(boolVal) {
var amount = 1;
}
return amount;
}
console.log(calculateAmount(true)); // output: 1当使用const时，只是保证这个值不能被修改，但是它的作用域是不变的。
9、ES6中的类
我们可以使用“class”关键字来创建类。在ES5中，找到类的定义比较难，因为没有class关键字。
class Profile {
constructor(firstName, lastName = '') { // class constructor
this.firstName = firstName;
this.lastName = lastName;
}
getName() { // class method
console.log(`Name: ${this.firstName} ${this.lastName}`);
}
}
let profileObj = new Profile('Kavisha', 'Talsania');
profileObj.getName(); // output: Name: Kavisha Talsania10、ES6中的组件
在ES6中，有import和export两个操作：
export var userID = 10;
export function getName(name) {
...
};我们可以使用import语句来导入userID变量和getName函数：
import {userID, getName} from 'module';
console.log(userID); // 10
ES6的其他特性，请查看这里。
如果你想了解更多关于ES6中的spread和和rest特性，请戳这里。