本文会简要介绍 babel 的概念、ES6 声明变量、ES6 数组和 ES6 函数。
一、babel 简介
Babel 是一个转码器，可以将 ES6 代码转为 ES5 代码，从而在老版本的浏览器执行，保证了我们可以用 ES6 的方式编写程序，又不用担心现有环境是否支持。
Babel 默认使用一组 ES2015 语法转换器，允许你使用新的语法，无需等待浏览器支持。Babel 内置支持 JSX，与 babel-sublime 包一起结合，将语法高亮功能带到一个新的高度。Babel 支持用户插件，允许你插入强大的 Babel 转换层。
二、ES6 声明变量
let
let 声明的变量只在 let 命令所在的代码块内有效。let 声明不存在变量提升，在声明变量之前，变量不存在会报错。
示例：新建一个名为 index1.js 的文件，在其中写入以下代码。
for (let i = 0; i < 10; i++) {setTimeout(function () {console.log(i);});}
在终端使用以下命令运行:
node index1.js
可以看到，以下结果:
const
const 声明一个只读的常量，声明时必须进行初始化，常量的值不能改变。
示例：新建一个名为 index2.js 的文件，在其中写入以下代码。
const PI = "3.1415926";console.log(PI);
在终端使用以下命令运行：
node index2.js
可以看到，以下结果:
import
在 ES6 之前，使用 require 来导入需要使用的外部的文件，ES6 之后，引入外部的文件或者模块，使用 import，它与 export 配合使用。
案例：
步骤一：新建一个名为 demo1.js 的文件，在其中输入以下代码：
let show = function () {
console.log("hello world...");};export { show };
步骤二：新建一个名为 demo2.js 的文件，在其中输入以下代码：
import { show } from "./demo1.js";let app = new show();console.log(app);
步骤三：全局安装 babel-cli，在终端输入以下命令：
npm install babel-cli -g
步骤四：安装 babel-preset-env，在终端输入以下命令：
npm install babel-preset-env -D
步骤五：在终端输入以下命令运行 demo2.js 文件：
babel-node --presets env demo2.js
我们会看到如下图所示的效果：
三、ES6 数组
ES6 apply 方法
apply() 应用某一个对象的一个方法，用另一个对象替换当前对象。
apply([thisObj, argArray]);
示例：
<html>
<head></head>
<body><script> // 使用 apply 实现继承 function Animal(name) {this.name = name;this.showName = function () { alert(this.name);}; } function Cat(name) {Animal.apply(this, [name]); } var cat = new Cat("miaomiao"); cat.showName();</script>
</body></html>
四、ES6 扩展运算符
扩展运算符（ spread ）是三个点（…），主要用于函数调用，它能够将一个数组转为用逗号分隔的参数序列，也可以用于数组的合并，与解构赋值配合使用等等。
示例：
<html> <head></head> <body><script> const color = ["red", "yellow"]; const colors = [...color, "green", "pink"]; console.log(colors); document.write(colors);</script> </body></html>
效果如下：
五、ES6 函数
函数参数默认值与解构赋值结合
ES6 新增了解构，将一个数据结构分解为更小部分的过程。使用 ES5 提取对象中的信息形式如下：
<html>
<head></head>
<body><script> var person = { name: "zhangsan", age: 23 }; var name = person.name; var age = person.age; document.write(name + "---" + age);</script>
</body></html>
使用解构可以从对象里取出数据存为变量。
<html>
<head></head>
<body><script> var person = { name: "zhangsan", age: 23 }; var { name, age } = person; document.write(name + "---" + age);</script>
</body></html>
效果如下：
六、rest 参数
ES6 新增了 Rest 参数用来接收函数的多余参数，组成一个数组，放在形参的最后。
示例：
<html>
<head></head>
<body><script> function nums(a, b, ...rest) {//console.log(a);//console.log(b);//console.log(rest);document.write(a + "</br>");document.write(b + "</br>");document.write(rest); } nums(1, 2, 3, 4, 5); //nums(19);</script>
</body></html>
当 nums(1,2,3,4,5) 时，效果如下：
当 nums(19) 时，效果如下：
七、箭头函数
使用箭头函数不需要 function 关键字来创建函数，省略 return 关键字 ，继承当前上下文的 this 关键字。
看下面代码（ES6）：
(response,message) => { ....... }
相当于 ES5 代码：
function(response,message){ ...... }
在 ES5 中我们对于对象都是以键值对的形式书写，是有可能出现键值对重名的。例如：
function people(name, age) {
return {name: name,age: age,
};}
以上代码可以简写为：
function people(name, age) {
return {name,age,
};}
总结
本文介绍了 babel 的概念；ES6 声明变量里面的 let、const 方法；ES6 数组的 apply 方法和扩展运算符；以及 ES6 函数参数默认值与解构赋值结合、rest 和 参数箭头函数。
