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); // true

5、在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 Talsania

10、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特性，请戳这里。