ecmascript6的6大特性

2017-02-16 本文已影响11人乖乖果效36

ES6（ECMAScript2015）的出现，无疑给前端开发人员带来了新的惊喜，它包含了一些很棒的新特性，可以更加方便的实现很多复杂的操作，提高开发人员的效率。

在ES5中，你可以在中直接写可以运行的代码（简称IIFE），或者一些库像AMD。然而在ES6中，你可以用export导入你的类。下面举个例子，在ES5中,module.js有port变量和getAccounts 方法:

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

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

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

但在ES6中，我们将用export and import。例如，这是我们用ES6 写的module.js文件库：

exportvarport =3000;exportfunctiongetAccounts(url){ ...}

如果用ES6来导入到文件main.js中，我们需用import {name} from ‘my-module’语法，例如：

import{port, getAccounts}from'module';console.log(port);// 3000

或者我们可以在main.js中把整个模块导入, 并命名为 service：

import*asservicefrom'module';console.log(service.port);// 3000

从我个人角度来说，我觉得ES6模块是让人困惑的。但可以肯定的事，它们使语言更加灵活了。

并不是所有的浏览器都支持ES6模块，所以你需要使用一些像jspm去支持ES6模块。

更多的信息和例子关于ES6模块，请看this text不管怎样，请写模块化的JavaScript。

如何使用ES6 (Babel)

ES6已经敲定，但并不是所有的浏览器都完全支持，详见：http://kangax.github.io/compat-table/es6/。要使用ES6，需要一个编译器例如：babel。你可以把它作为一个独立的工具使用，也可以把它放在构建中。grunt，gulp和webpack中都有可以支持babel的插件。

这是一个gulp案列，安装gulp-babel插件：

$ npm install --save-dev gulp-babel

在gulpfile.js中，定义一个任务build，放入src/app.js，并且编译它进入构建文件中。

vargulp =require('gulp'), babel =require('gulp-babel');gulp.task('build',function(){returngulp.src('src/app.js') .pipe(babel()) .pipe(gulp.dest('build'));})

Node.js and ES6

在nodejs中，你可以用构建工具或者独立的Babel模块 babel-core 来编译你的Node.js文件。安装如下：

$ npm install --save-dev babel-core

然后在node.js中，你可以调用这个函数：

require("babel-core").transform(ES5Code, options);

ES6总结

这里还有许多ES6的其它特性你可能会使用到，排名不分先后：

1、全新的Math, Number, String, Array 和 Object 方法

2、二进制和八进制数据类型

3、默认参数不定参数扩展运算符

4、Symbols符号

5、tail调用