ecmascript6的6大特性

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的插件。

ecmascript6的6大特性_第1张图片

这是一个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调用

6、Generators (生成器)

7、New data structures like Map and Set(新的数据构造对像MAP和set)

参考文献:

ES6 Cheatsheet(FREE PDF)

http://webapplog.com/ES6/comment-page-1/

Understanding ECMAScript 6 by Nicolas Zakas book

http://ES6-features.org/#DateTimeFormatting

IIFE:立刻运行的函数表达式

你可能感兴趣的:(ecmascript6的6大特性)