ES6新特性

2016-09-21

没有太多啰嗦，说那么多介绍也没多少人会看，我们直接看特性吧，ES6多数人认为主要的十大特性如下，排名不分先后：

Default Parameters（默认参数）
Template Literals （模板文本）
Multi-line Strings （多行字符串）
Destructuring Assignment （解构赋值）
Enhanced Object Literals （增强的对象文本）
Arrow Functions （箭头函数）
Promises
Block-Scoped Constructs Let and Const（块作用域构造Let and Const）
Classes（类）
Modules（模块）

Default Parameters（默认参数）

before

var fn = function (height) {
    var height = height || 50;
       ...;
}

now

var fn = function (height=50) {
       ...;
}

Template Literals（模板对象）

before

var name = 'Your name is ' + first + ' ' + last + '.';

now

var name = `Your name is ${first} ${last}. `;

Multi-line Strings （多行字符串）

before

var roadPoem = 'Then took the other, as just as fair,nt'
                + 'Had worn them really about the same,nt';

now

var roadPoem = `Then took the other, as just as fair,
                Had worn them really about the same,`;

Destructuring Assignment （解构赋值）

before

someArray=[1,2,3];
var first = someArray[0];
var second = someArray[1];
var third = someArray[2];

var obj={ foo: "lorem", bar: "ipsum" };
var foo = obj.foo;
var bar = obj.bar;

now

someArray=[1,2,3];
var [first, second, third] = someArray;
console.log(first);  // 1
console.log(second); // 2
console.log(third);  // 3

var { foo, bar } = { foo: "lorem", bar: "ipsum" };
console.log(foo); // "lorem"
console.log(bar); // "ipsum"

Enhanced Object Literals （增强的对象字面量）

before

var obj = {
    handler: handler,
    toString: function() {
        return "d " + super.toString();
    },
    prop42: 42

};

now

var obj = {
    handler,   //ES6特性 === handler: handler,
    toString() {   //ES6函数
        return "d " + super.toString();
       },
    [ 'prop_' + (() => 42)() ]: 42  
    //主要是这个可以在字面量中加入变量 == prop42: 42
};

Arrow Functions in（箭头函数）

以前我们使用闭包，this总是预期之外地产生改变，而箭头函数的迷人之处在于，现在你的this可以按照你的预期使用了，身处箭头函数里面，this还是原来的this。

有了箭头函数在ES6中，我们就不必用that = this或 self = this 或 _this = this 或.bind(this)如下:

before

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

now

$('.btn').click((event) =>{
      this.sendData();
})

Promises in ES6

before

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

now

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

好吧，我也没看出来哪里好用了…

Block-Scoped Constructs Let and Const（块作用域和构造let和const）

Let是一种新的变量申明方式，它允许你把变量作用域控制在块级里面。用大括号定义代码块（作用域）

const，它就是一个不变量，也是块级作用域就像let一样。
before

for(var i=0; i<1; i++){
    var a=1;
    {
        var  a=2;
        console.log(a) //2
    }
    console.log(a)  //2
}
console.log(i) //1
console.log(a) //2

now

for(let i=0; i<1; i++){
    const a=1;
    {
        const  a=2;
        console.log(a) //2
    }
    console.log(a)  //1
}
console.log(a) // not defined
console.log(i) // not defined

Classes （类）

before

function Circle(x) {
   this.x = x;
}
Circle.classFn = function() { ... }

Circle.prototype = {
   fn1() {
       return ..;
   },

   get fn2() {
       return this.x;
   },
   set fn2(x) {
       this.x = x*2;
   }
};

now

class Circle {
    constructor(x) {
        this.x = x;
    };

    static classFn() { ... };

    fn1(){
        return ..;
    }
    get fn2() {
        return this.x;
    };
    set fn2(val) {
        this.x = x*2;
    };
 }

Modules （模块）

before

module.js有port变量和getAccounts 方法:

module.exports = {  port: 3000,  getAccounts: function() {    ...  }}

main.js需要依赖require(‘module’) 导入module.js：

var service = require('module.js');console.log(service.port); // 3000

now

导出module.js
export var port = 3000;export function getAccounts(url) {  ...}

导入方式一
import {port, getAccounts} from 'module';console.log(port); // 3000

导入方式二
import * as service from 'module';//导入全部模块
console.log(service.port); // 3000