ECMAScript6技术初探

文章大部分内容是对于阮一峰那本ES6的书的学习总结，并参考了其他一些人的博客。

 

ECMAScript 6的发展历史

ECMAScript 6是在EcmaScript 5的基础上发展而来的。2009年12月ECMAScript 5.0版本正式发布。2011年6月ECMAScript 5.1版发布，并且成为ISO国际标准。2013年12月ECMAScript 6的草案发布，预计2015年6月ECMAScript 6将发布正式版本。预计ECMAScript 5.1还会在未来两三年继续保持主流地位，但是主流浏览器会逐步添加对于ECMAScript 6的支持力度。在非浏览器应用中，例如Node.js、io.js等对于ECMAScript新特性的支持较快，预计ECMAScript 6会很快成为这些应用开发的主流。Mozilla将在这个标准的基础上，推出JavaScript2.0。

ECMAScript 5的发布时间比较早，各个主流浏览器对于它的支持已经比较完善。（IE8的发布时间比较早，对于ECMAScript 5的支持不多，已经不适合新时代的发展）。由于ES6还没有定案，有些语法规则还会变动，目前支持ES6的软件和开发环境还不多。各大浏览器的最新版本，对ES5、6的支持可以查看kangax.github.io/es5-compat-table/es5/和kangax.github.io/es5-compat-table/es6/。

 

ECMAScript 6的新特点

根据ECMAScript 6草案中的介绍，ECMAScript 6的目的就是使JavaScript可以用来编写复杂的应用程序、函数库以及支持ECMAScript作为其他语言的编译目标（类似代码生成器）。在ECMAScript 6重点加强了模块、类声明、词法块定界、迭代器和生成器、异步编程的回调、模式解析以及合适的尾调用，另外还扩展了ECMAScript的内置库以支持更多的抽象数据结构。

ECMAScript 6的新内容概览：

l Let、const

l 模式解析

l 不定参数

l 扩展参数

l Proxies

l Map、Set和WeakMap、WeakSet

l Generator

l 迭代器

l For of循环

l 二进制数据

l 类

l 模块

l 字符串模板

l 箭头操作符

l 默认参数值

l Math、Number、String和Object的新API

ECMAScript 6的简单实例

let、const

在ECMAScript 6中新增加了块级作用域，以前的时候只有函数级作用域和全局作用域。Let和const都是块级作用域的声明关键字。在使用方法上let和var是一样的，const是新增的声明常量的关键字，如果对于已经赋值的常量继续赋值是无效的。

function f1() {  let n = 5;  if (true) {      let n = 10;  }  console.log(n); // 5}

Proxies

Proxy可以监听对象身上发生的事情。也就是说对于对象的操作如果落在Proxy设定的监听范围内，则根据监听器预定义的内容进行处理，如果没有的话按照原先的方式产生结果。

比如常用的获取对象属性的操作会被get方法拦截，设置对象属性的时候会被set方法拦截

var proxy = new Proxy({}, {  get: function(target, property) {    return 35;  }});

 

For of循环

ECMAScript 6中的Array、Object、Map和Set都设置了迭代器接口，都可以使用For of循环遍历。

ECMAScript 5中有For....in的循环遍历的方法，不过遍历的是对象的键名。ECMAScript 6中的For of循环的使用和for in的使用方法类似，不过遍历的是对象的键值。

var arr = ["a", "b", "c", "d"];for (a in arr) {  console.log(a); // 0 1 2 3}for (a of arr) {  console.log(a); // a b c d}

类

ECMAScript 6中引入了Class这个概念，作为对象的模板。通过class可以定义类，还可以通过extend来继承已有的类。ECMAScript 6中类的大多数功能在ECMAScript 5中也可以实现，只是没有那么清晰和优雅。

//定义类class Point {   constructor(x, y) {    this.x = x;    this.y = y;  }   toString() {    return '('+this.x+', '+this.y+')';  }}

 

默认参数

ECMAScript 6之前是不能直接为函数指定默认值，只能通过变通的办法，在函数体内部的逻辑代码之前预先定义一些参数的默认值。ECMAScript 6中提供了更加简洁的实现方式。

function log(x, y = 'World') {  console.log(x, y);}log('Hello') // Hello World

log('Hello', 'China') // Hello China

log('Hello', '') // Hello

 

模块

大型的应用开发场景中不可能将所有代码放在一起，必然存在模块的概念，ECMAScript 6之前没有内置的模块体系，只能通过CommonJS或者AMD来变通的实现模块加载方案。ECMAScript 6在语言规格层面上实现了模块功能。

ECMAScript 6模块的设计思想是尽量的静态化，使得编译时就能确定模块的依赖关系以及输入和输出的变量。ECMAScript 6模块不是对象而是通过export命令显示制定输出的代码，输入时也采用静态命令的形式。

ECMAScript 6的模块功能主要由两个命令构成：export和import。Export用于定义用户自定义模块，规定对外接口；import用于输入其他模块提供的模块，同时创造命名控件，防止函数名冲突。不使用import引入之前不能像ECMAScript 5中那样随意使用其他js文件中的变量，必须主动引入才能使用。

// profile.js

var firstName = 'Michael';

var lastName = 'Jackson';

var year = 1958; export {firstName, lastName, year};

 

// main.jsimport {firstName, lastName, year} from './profile';

 function sfirsetHeader(element) {  element.textContent = firstName + ' ' + lastName;

}

 

参考

1、http://es6.ruanyifeng.com/

2、http://people.mozilla.org/~jorendorff/es6-draft.html

3、http://www.cnblogs.com/wayou/p/es6_new_features.html