前言
本文会简要介绍 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 和 参数箭头函数。
下文讲解ES6 对象与类的定义。