ECMAScript6的新特性简述

ECMAScript6

前言

原文参考
伯乐在线-吴鹏煜
链接：http://web.jobbole.com/87140/

1.ES6中的默认参数

以前我们是这样来定义默认参数的：

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

但是这么定义有个问题，因为如果参数的值是0的时候，默认会成为’false’，这在赋值的时候就比较尴尬了。
现在ES6的写法是：

var link = function(height = 50, color = 'red', url = 'http://azat/co') {

}

2.ES6中的模板语法

ES5里，字符串的连接一般如下所示：

var str = aname + ' loves ' + 'bname';
var url = 'http://www.baidu.com:3000/' + pair_id

但是，如果需要连接的变量太多，或者字符串的结构较为复杂，就很容易出现错误，所以ES6引入了反引号包裹字符串。这样，在反引号包裹的字符串里，不再需要通过’+’来连接，而是直接用${aname}或${bname}来引用变量。

var str = `${aname} loves ${bname}`;
var url = `http://www.baidu.com:3000/${pair_id}`

3.ES6中的多行字符串

在ES5中，如果需要连接的字符串，一般会换行写，比如

var str = 'aaaaaaaaaaaaaaaaaaaaaaaaaaaaaa.nt'
    + 'bbbbbbbbbbbbbbbbbbbbbbbbbbbbbb'; 

同样，在ES6中，只需要充分得利用好反引号“

var str = `aaaaaaaaaaaaaaaaaaaaaaaaaaaaaa.
    you can you up, no can no bb`

4.ES6中的拆包表达式

ES5中有很多这样的应用场景，比如传递的参数是一个对象Object，需要将对象的属性值Object.data1和Object.data2赋值给data1和data2.

var data = $('body').data(),
data1 = data.data1
data2 = data.data2

但是在ES6中就简单了。

var { data1, data2 } = $('body').data()

数组中也可以使用。

5.ES6中改进的对象表达式

ES5中一个典型的对象如下：

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()
}

可以用Object.create方法来让serviceBase称为accountServiceES6的prototype从而实现继承。
ES6改进：

var serviceBase = {port: 3000, url:'azat.co'},
    getAccounts = function() {
        return [1,2,3];
    };

var accountServiceES5 = {
    // port: serviceBase.port
    // url: serviceBase.url
    _proto_: serviceBase,
    // getAccounts: getAccounts
    getAccounts，
    toString: function() {
        return JSON.stringify(this.valueOf())
    },
    getUrl: function() {
        return 'http://' + this.url + ':' + this.port
    },
    valueOf_1_2_3: getAccounts()
}

6.ES6中的箭头函数
ES5中，函数内部的this对象指向的是引用函数的对象。
比如：

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

但是在ES6中，箭头函数内部的this对象指的还是之前的作用域。

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

注意下，ES6中箭头表达式有隐式的写法：

map(value => `hahahahah`)

如果箭头函数所在语句只有一行时，它会默认返回值。
如果是多行的，需要用return来显式表达返回的值。

7.ES6中的Promise

看看ES5中的一个延迟执行：

setTimeout(function(){
    console.log("haha!")
}, 1000)

可以用ES6中的Promise重写

// 创建一个新的Promise实例，传递一个参数，这个参数是个函数
// 该函数接受两个参数，一个是resolve，代表成功回调，另一个是reject，指失败回调

var wait1000 = new Promise((resolve, reject) => {
    setTimeout(resolve, 1000);
}).then(() => {
    console.log("haha!");
})

目前还没有看到有任何的好处，
看下一例子：

// 1秒后先显示'haha1'，再过一秒显示'haha2'
setTimeout(function() {
    console.log('haha1')
    setTimeout(function() {
        console.log('haha2')
    },1000)
},1000)

可以用promise重写：

// wait1000是一个新的promise实例
// wait1000()表示1秒后将调用成功回调函数resolve
// 而这个成功回调函数resolve里又重新返回了个新的promise实例
// 新的promise实例wait1000()继续1秒后调用成功回调resolve
var wait1000 = new Promise((resolve, reject) => {
    setTimeout(resolve, 1000)
})
wait1000().then(function() {
    console.log('haha1');
    return wait1000();
}).then(function() {
    console.log('haha2');
})

如果Promise实例在pending状态时，传给resolve()的是一个Promise对象，那么在then()里面，会等待这个Promise对象的完成，这么说会有点抽象，看下面的例子：

var promise4 = new Promise((resolve, reject) => {
    var promise4_1 = new Promise((resolve, reject) => {
        console.log("promise4_1 starts");
        setTimeout(() => {
            resolve("this is promise4_1 resolve");
        }, 2000);
    })
    resolve(promise4_1);
}).then((msg) => {
    console.log(msg);
    console.log("haha");
})

// promise4_1 starts
// this is promise4_1 resolve
// haha

var promise4 = new Promise((resolve, reject) => {
    var promise4_1 = new Promise((resolve, reject) => {
        console.log("promise4_1 starts");
        setTimeout(() => {
            resolve("this is promise4_1 resolve");
        }, 2000);
    })
    resolve(promise4_1);
}).then((msg) => {
    console.log("haha");
    console.log(msg);
})

// promise4_1 starts
// haha
// this is promise4_1 resolve

块级作用域的let和const

let类似于var，可以将变量作用域限制在当前块里。
我们开始用{}来定义块。

function calculateTotalAmount() {
    let a = 0;
    {
        let a = 1;
        return a;    //a为1
    }
    return a;     // a为0
}

const定义个不可变的变量。

9.ES6中的类

ES6的类会用prototype来实现而不是function。
现在有一个baseModel类，其中我们可以定义构造函数和getName()方法。

class baseModel{
    constructor(options={},data=[]){
        this.name= 
        this.url=
        this.data=
        this.options=
    }

    getName() {

    }
}

10.ES6中的模块化

ES5中可以用script标签和IIFE（立即执行函数），或者其他的像AMD之类的库，但是在ES6中可以用export来暴露类。
ES5里：

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

// main.js
var service = require('module.js')

但是在ES6中，我们可以用export和import
比如：

// module.js
export var port = 3000
export function getAccounts(url) {
    ...
}

// main.js
import {port, getAccounts} from 'module'
// 或
import * as service from 'module'

如何使用ES6(Babel)

并不是所有的浏览器都支持ES6，如果想要马上用ES6，需要准备个像Babel这样的编译器。
Babel对Gulp、Grunt和Webpack都有对应的插件。
比如对Gulp
npm install --save-dev gulp-babel
在gulpfile.js中，定义这么一个任务，将src目录下的app.js文件编译到build目录下：

// gulpfile.js
var gulp = require('gulp'),
    babel = require('gulp-babel');

gulp.task('build', function(){
    return gulp.src('src/app.js')
    .pipe(babel())
    .pipe(gulp.dest('build'))
})