前言
本文会简要介绍 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 对象与类的定义。