JavaScript ES6 规范

ECMAScript 6 简称 ES6，是 JavaScript 语言的下一代标准，已经在2015年6月正式发布了。它的目标是使得 JavaScript 语言可以用来编写复杂的大型应用程序，成为企业级开发语言。

要点

ECMAScript 和 JavaScript 的关系：前者是后者的语法规格，后者是前者的一种实现。

TODO

• 默认导出的例子分析

读者

本教程专为那些希望了解 JavaScript ES6 规范的学员而设计。

预备知识

在继续本教程之前，您应该对 javascript 有基本的了解。如果对 ES5 规范有所了解就更好了。

新特性

1. let、const
   let 定义的变量不会被变量提升，const 定义的常量不能被修改，let 和 const 都是块级作用域

ES6前，js 是没有块级作用域 {} 的概念的。（有函数作用域、全局作用域、eval作用域）

变量提升：在ES6以前，var 关键字声明变量。无论声明在何处，都会被视为声明在函数的最顶部；不在函数内即在全局作用域的最顶部。这样就会引起一些误解。例如：

console.log(a); // undefined
var a = 'hello';
 
# 上面的代码相当于
var a;
console.log(a);
a = 'hello';
 
# 而 let 就不会被变量提升
console.log(a); // a is not defined
let a = 'hello';

要点

• let 声明的变量不会被变量提升
• const 定义的常量不能被修改

2. import、export
   javascript ES6 支持从一个模块往另一个模块导入或者导出函数、变量。
   导出函数有两种方式：
   直接在申明时加 export
   export { a, b };

尝试下面的例子，创建一个叫做 file1.js 的JavaScript文件。

// file1.js
// export func 导出函数
export function squareNum(n){
  return n * n;
}

// export var 导出变量
export var n = 1;

// 另一种方式
function squareNum(n){
  return n * n;
}
var n = 1;
export {squareNum, n};

现在 squareNum 函数和变量 n 已经准备好导入了。再创建一个名为 file2.js 的文件用来导入上面的值。这里需要注意的是 file1.js 和 file2.js 是在同一级目录下的。

// file2.js
import {squareNum, n} from "./file1";
console.log(n); // output 1
 
// 另一种方式导入
// 将整个模块当作单一对象进行导入，该模块的所有导出都会作为对象的属性存在
import * as util from "./file1";
util.n = 2;
console.log(util.n); // output 2
console.log(util.squareNum(2)); // output 4

默认导出

ES6 规范中一个模块只允许有一个默认导出。它可以是方法、类或对象。下面是一个默认导出的例子：

//default export
export default funtion sqareNum(n){
  return n * n;
}

3. arrow functions （箭头函数）
   javascript ES6 引入了箭头函数的快捷写法。arrow functions 比之前有更简短的函数语法结构。不需要 function 关键字来创建函数，省略 return 关键字，并且加入了继承当前上下文的 this 关键字。

Arrow functions 有效地将 function (arguments) { expression } 缩短成了 arguments => expression。

下面通过例子对比下 ES5 和 ES6 的不同。

// es5
var num = [1,2,3,4,5,6];
var oddNum = num.filter(function (n){
  return n%2;
});
// num = [2, 4, 6]
// es6
let num = [1,2,3,4,5,6];
let oddNum = num.filter( n => n%2 );

参数多于一个就需要用到括号了，(param1, param2, paramN) => expression

let add = (a, b) => a+b;

要点

• 在箭头后面使用表达式，就意味着有返回。=> expression 意思是 return expression