Webcourse/10-Node.js/01-ES6.md
2018-03-04 18:18:19 +08:00

546 lines
10 KiB
Markdown
Raw Blame History

This file contains ambiguous Unicode characters

This file contains Unicode characters that might be confused with other characters. If you think that this is intentional, you can safely ignore this warning. Use the Escape button to reveal them.

## 本文主要内容
- ES6的环境配置
- ES6 的变量声明
- 变量的解构赋值
## ES6的环境配置
掌握ES6 之后,如果要考虑 ES5 的兼容性,可以这样做:写 ES6 语法的 js 代码,然后通过 `Babel`将 ES6 转换为 ES5。
但是,在这之前,我们需要配置一下相关的环境。
### 建立工程目录
1先建立一个空的工程目录 `ES6Demo`,并在目录下建立两个文件夹 `src``dist`
- `src`书写ES6代码我们写的 js 程序都放在这里。
- `dist`:利用 Babel 编译生成的 ES5 代码。**我们在 HTML 页面需要引入 dist 里的 js 文件**。
2在 src 里新建文件 `index.html`
```html
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<meta http-equiv="X-UA-Compatible" content="ie=edge">
<title>Document</title>
<!-- 我们引入 ES5 中的 js 文件,而不是引入 ES6 中的 js 文件。 -->
<script src="./dist/index.js"></script>
</head>
<body>
</body>
</html>
```
**注意**,上方代码中,我们引入的是`dist`目录下的 js 文件。
然后我们新建文件 `src/index.js`
```javascript
let a = 'smyhvae';
const b = 'vitateam';
console.log(a);
console.log(b);
```
这个文件是一个 ES6语法 的js文件稍后我们尝试把这个 ES6 语法的 js 文件转化为 ES5 的 js 文件。
PS我们在写代码时能用单引号尽量用单引号而不是双引号前者在压缩之后程序执行会更快。
### 全局安装 Babel-cli
1初始化项目
在安装Babel之前需要先用 npm init 先初始化我们的项目。打开终端或者通过cmd打开命令行工具进入项目目录输入如下命令
```bash
npm init -y
```
上方代码中,`-y` 代表全部默认同意就不用一次次按回车了稍后再根据需要在文件中手动修改。命令执行完成后会在项目的根目录下生成package.json文件
```json
{
"name": "es6demo",
"version": "1.0.0",
"description": "",
"main": "index.js",
"scripts": {
"test": "echo \"Error: no test specified\" && exit 1"
},
"author": "smyhvae",
"license": "ISC"
}
```
PSVS Code 里打开终端的快捷键是:`Contol + ~`
2全局安装 Babel-cli
在终端中输入以下命令:
```bash
npm install -g babel-cli
```
如果安装比较慢的话Mac 下可以使用 cnpm进行安装 windows 下可以使用 nrm切换到 taobao 的镜像。
20180304_1305.png
3本地安装 babel-preset-es2015 和 babel-cli
```bash
npm install --save-dev babel-preset-es2015 babel-cli
```
20180304_1307.png
安装完成后会发现我们的package.json文件已经多了 devDependencies 选项:
20180304_1308.png
4新建.babelrc
在根目录下新建文件`.babelrc`,输入如下内容:
```
{
"presets":[
"es2015"
],
"plugins":[]
}
```
5开始转换
现在,我们应该可以将 ES6 的文件转化为 ES5 的文件了,命令如下:(此命令略显复杂)
```
babel src/index.js -o dist/index.js
```
我们可以将上面这个命令进行简化一下。操作如下:
在文件 `package.json` 中修改键 `scripts`中的内容:
```json
"scripts": {
"build": "babel src/index.js -o dist/index.js"
},
```
修改后的效果如下:
20180304_1315.png
目前为止,环境配置好了。以后,我们执行如下命令,即可将 ES6 文件转化为 ES5 文件;
```bash
npm run build
```
我们执行上面的命令之后,会发现, dist目录下会生成 ES5 的 js 文件:
index.js
```javascript
'use strict';
var a = 'smyhvae';
var b = 'vitateam';
console.log(a);
console.log(b);
```
当我们打开网页后,就可以在浏览器的控制台,看到代码的输出结果。
接下来,我们讲一下 ES6的常见语法。需要说明的是
## ES6 的变量声明
ES6 中新增了 let 和 const我们来看一下。
- `var`ES5 和 ES6中定义**全局变量**是variable的简写
- `let`:定义**局部变量**,替代 var。
- `const`:定义常量(定义后,不可修改)。
### var全局变量
看下面的代码:
```javascript
{
var a = 1;
}
console.log(a); //这里的 a指的是 区块 里的 a
```
上方代码是可以输出结果的,输出结果为 1。因为 var 是全局声明的,所以,即使是在区块里声明,但仍然在全局起作用。
再来看下面这段代码:
```javascript
var a = 1;
{
var a = 2;
}
console.log(a); //这里的 a指的是 区块 里的 a
```
上方代码的输出结果为 2 ,因为 var 是全局声明的。
**总结:**
用 var 定义的全部变量,有时候会污染整个 js 的作用域。
### let局部变量
```
var a = 2;
{
let a = 3;
}
console.log(a);
```
上方代码的输出结果为 2。用 let 声明的变量,只在局部起作用。
let是防止数据污染我们来看下面这个例子
用 var 声明变量:(可以打印结果,说明循环体外的变量 i 被污染了)
```
for (var i = 0; i < 10; i++) {
console.log('循环体中:' + i);
}
console.log('循环体外:' + i);
```
用let声明变量不能打印结果
```
for (let i = 0; i < 10; i++) {
console.log('循环体中:' + i);
}
console.log('循环体外:' + i);
```
**总结:**我们要习惯用 let 声明减少var声明带来的**污染全局空间**
为了进一步说明 let 不会带来污染,需要说明的是:当我们定义了`let a = 1`时,如果我们在同一个作用域内继续定义`let a = 2`,是会报错的。
### const声明常量
在程序开发中,有些变量是希望声明后,在业务层就不再发生变化,此时可以用 const 来定义。
举例:
```
const name = `smyhvae`; //定义常量
```
## 变量的解构赋值
ES6允许我们通过数组或者对象的方式对一组变量进行赋值这被称为解构。
解构赋值在实际开发中可以大量减少我们的代码量,并且让程序结构更清晰。
### 数组的解构赋值
**举例:**
通常情况下,我们在为一组变量赋值时,一般是这样写:
```javascript
let a = 0;
let b = 1;
let c = 2;
```
现在我们可以通过数组解构的方式进行赋值:
```javascript
let [a, b, c] = [1, 2, 3];
```
二者的效果是一样的。
**解构的默认值:**
在解构赋值时,是允许使用默认值的。举例如下:
```javascript
{
//一个变量时
let [foo = true] = [];
console.log(foo); //输出结果true
}
{
//两个变量时
let [a, b] = ['生命壹号'] //a 赋值为生命壹号。b没有赋值
console.log(a + ',' + b); //输出结果:生命壹号,undefined
}
{
//两个变量时
let [a, b = 'smyhvae'] = ['生命壹号'] //a 赋值为生命壹号。b 采用默认值 smyhvae
console.log(a + ',' + b); //输出结果:生命壹号,smyhvae
}
```
`undefined``null`的区别:
如果我们在赋值时,采用的是 `undefined`或者`null`,那会有什么区别呢?
```javascript
{
let [a, b = 'smyhvae'] = ['生命壹号', undefined]; //b 虽然被赋值为 undefined但是 b 会采用默认值
console.log(a + ',' + b); //输出结果:生命壹号,smyhvae
}
{
let [a, b = 'smyhvae'] = ['生命壹号', null]; //b 被赋值为 null
console.log(a + ',' + b); //输出结果:生命壹号,null
}
```
上方代码分析:
- undefined相当于什么都没有此时 b 采用默认值。
- null相当于有值但值为 null。
### 对象的解构赋值
我们同样可以针对对象,进行结构赋值。
**举例如下:**
```
let { foo, bar } = { bar: '我是 bar 的值', foo: '我是 foo 的值' };
console.log(foo + ',' + bar); //输出结果:我是键 foo 的值,我是键 bar 的值
```
上方代码可以看出,对象的解构与数组的结构,有一个重要的区别:**数组**的元素是按次序排列的,变量的取值由它的**位置**决定;而**对象的属性没有次序**,是**根据键来取值**的。
**圆括号的使用**
如果变量 foo 在解构之前就已经定义了,此时你再去解构,就会出现问题。下面是错误的代码,编译会报错:
```javascript
let foo = 'haha';
{ foo } = { foo: 'smyhvae' };
console.log(foo);
```
要解决报错,只要在解构的语句外边,加一个圆括号即可:
```javascript
let foo = 'haha';
({ foo } = { foo: 'smyhvae' });
console.log(foo); //输出结果smyhvae
```
### 字符串结构
字符串也可以解构,这是因为,此时字符串被转换成了一个类似数组的对象。举例如下:
```javascript
const [a, b, c, d] = 'smyhvae';
console.log(a);
console.log(b);
console.log(c);
console.log(d);
console.log(typeof a); //输出结果string
```
输出结果:
20180304_1626.png
## 扩展运算符和 rest 运算符
### 扩展运算符
有了ES6当我们在定义一个方法但是不确定其参数的个数时我们就可以用**扩展运算符**作为参数。
以前,我们在定义方法时,参数要确定个数,如下:(程序会报错)
```javascript
function fn(a, b, c) {
console.log(a);
console.log(b);
console.log(c);
console.log(d);
}
fn(1, 2, 3);
```
上方代码中,因为方法的参数是三个,但使用时是用到了四个参数,所以会报错:
20180304_1638.png
现在,我们有了扩展运算符,就不用担心报错的问题了。代码可以这样写:
```
function fn(...arg) { //当不确定方法的参数时,可以使用扩展运算符
console.log(arg[0]);
console.log(arg[1]);
console.log(arg[2]);
console.log(arg[3]);
}
fn(1, 2, 3); //方法中定义了四个参数,但只引用了三个参数,并不会报错。
```
20180304_1650.png
**举例:**数组引用的问题
我们来看一段代码:(将数组 arr1 赋值给 arr2
```
```
```
```
```
```