add file:页面布局
This commit is contained in:
qianguyihao
@@ -1,33 +1,51 @@
|
||||
|
||||
> 本文最初发表于[博客园]()，并在[GitHub](https://github.com/smyhvae/Web)上持续更新**前端的系列文章**。欢迎在GitHub上关注我，一起入门和进阶前端。
|
||||
|
||||
> 以下是正文。
|
||||
|
||||
|
||||
## 本文主要内容
|
||||
## 前言
|
||||
|
||||
- ES6的环境配置
|
||||
ECMAScript 是 JS 的语言标准。而 ES6 是新的 JS 语法标准。
|
||||
|
||||
- ES6 的变量声明
|
||||
PS：严格来说，ECMAScript 还包括其他很多语言的语言标准。
|
||||
|
||||
- 变量的解构赋值
|
||||
### ECMAScript 发展历史
|
||||
|
||||
- 1995年：ECMAScript 诞生。
|
||||
|
||||
- 1997年：ECMAScript 标准确立。
|
||||
|
||||
- 1999年：ES3 出现，与此同时，IE5 风靡一时。
|
||||
|
||||
- 2009年，ES5 出现，例如 foreach、Object.keys、Object.create 和 json 标准。
|
||||
|
||||
- 2015年6月，ES6正式发布。
|
||||
|
||||
ES6 的目标是：让 JS 语言可以编写复杂的大型应用程序，成为企业级开发语言。
|
||||
|
||||
|
||||
### ES6 的其他优势
|
||||
|
||||
- 使用 babel 语法转换器，支持低端浏览器。
|
||||
|
||||
- 流行的库基本都是基于 ES6 构建。 React 默认使用 ES6 标准开发。
|
||||
|
||||
|
||||
## ES6的环境配置
|
||||
|
||||
掌握ES6 之后，如果要考虑 ES5 的兼容性，可以这样做：写 ES6 语法的 js 代码，然后通过 `Babel`将 ES6 转换为 ES5。
|
||||
掌握 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
|
||||
@@ -47,10 +65,8 @@
|
||||
</html>
|
||||
```
|
||||
|
||||
|
||||
**注意**，上方代码中，我们引入的是`dist`目录下的 js 文件。
|
||||
|
||||
|
||||
然后我们新建文件 `src/index.js`：
|
||||
|
||||
```javascript
|
||||
@@ -105,9 +121,11 @@ PS：VS Code 里打开终端的快捷键是：`Contol + ~`。
|
||||
npm install -g babel-cli
|
||||
```
|
||||
|
||||
如果安装比较慢的话，Mac 下可以使用 cnpm进行安装 ，windows 下可以使用 nrm切换到 taobao 的镜像。
|
||||
|
||||
20180304_1305.png
|
||||
|
||||
|
||||
如果安装比较慢的话，Mac 下可以使用`cnpm`进行安装 ，windows 下可以使用`nrm`切换到 taobao 的镜像。
|
||||
|
||||
|
||||
（3）本地安装 babel-preset-es2015 和 babel-cli：
|
||||
|
||||
@@ -115,11 +133,11 @@ PS：VS Code 里打开终端的快捷键是：`Contol + ~`。
|
||||
npm install --save-dev babel-preset-es2015 babel-cli
|
||||
```
|
||||
|
||||
20180304_1307.png
|
||||
|
||||
|
||||
安装完成后，会发现我们的package.json文件，已经多了 devDependencies 选项：
|
||||
安装完成后，会发现`package.json`文件，已经多了 devDependencies 选项：
|
||||
|
||||
20180304_1308.png
|
||||
|
||||
|
||||
（4）新建.babelrc：
|
||||
|
||||
@@ -156,9 +174,9 @@ PS：VS Code 里打开终端的快捷键是：`Contol + ~`。
|
||||
|
||||
修改后的效果如下：
|
||||
|
||||
20180304_1315.png
|
||||
|
||||
|
||||
目前为止，环境配置好了。以后，我们执行如下命令，即可将 ES6 文件转化为 ES5 文件；
|
||||
目前为止，环境配置好了。以后，我们执行如下命令，即可将`src/index.js`这个 ES6 文件转化为 `dist/index.js`这个 ES5 文件：
|
||||
|
||||
|
||||
```bash
|
||||
@@ -184,18 +202,18 @@ index.js：
|
||||
当我们打开网页后，就可以在浏览器的控制台，看到代码的输出结果。
|
||||
|
||||
|
||||
接下来，我们讲一下 ES6的常见语法。需要说明的是，
|
||||
接下来，我们讲一下 ES6的常见语法。
|
||||
|
||||
|
||||
## ES6 的变量声明
|
||||
|
||||
ES6 中新增了 let 和 const，我们来看一下。
|
||||
ES6 中新增了 let 和 const 来定义变量：
|
||||
|
||||
- `var`：，ES5 和 ES6中，定义**全局变量**（是variable的简写）。
|
||||
|
||||
- `let`：定义**局部变量**，替代 var。
|
||||
|
||||
- `const`：定义常量（定义后，不可修改）。
|
||||
- `const`：定义**常量**（定义后，不可修改）。
|
||||
|
||||
|
||||
### var：全局变量
|
||||
@@ -289,7 +307,7 @@ let是防止数据污染，我们来看下面这个例子：
|
||||
举例：
|
||||
|
||||
```
|
||||
const name = `smyhvae`; //定义常量
|
||||
const name = 'smyhvae'; //定义常量
|
||||
|
||||
```
|
||||
|
||||
@@ -438,11 +456,16 @@ console.log(typeof a); //输出结果：string
|
||||
|
||||
输出结果：
|
||||
|
||||
20180304_1626.png
|
||||
|
||||
|
||||
|
||||
## 扩展运算符和 rest 运算符
|
||||
|
||||
- 扩展运算符的格式为`...`
|
||||
|
||||
- rest运算符的格式为`...变量名`
|
||||
|
||||
|
||||
### 扩展运算符
|
||||
|
||||
有了ES6，当我们在定义一个方法，但是不确定其参数的个数时，我们就可以用**扩展运算符**作为参数。
|
||||
@@ -464,12 +487,11 @@ console.log(typeof a); //输出结果：string
|
||||
|
||||
上方代码中，因为方法的参数是三个，但使用时是用到了四个参数，所以会报错：
|
||||
|
||||
20180304_1638.png
|
||||
|
||||
|
||||
现在，我们有了扩展运算符，就不用担心报错的问题了。代码可以这样写：
|
||||
|
||||
|
||||
```
|
||||
```javascript
|
||||
function fn(...arg) { //当不确定方法的参数时，可以使用扩展运算符
|
||||
console.log(arg[0]);
|
||||
console.log(arg[1]);
|
||||
@@ -477,69 +499,205 @@ function fn(...arg) { //当不确定方法的参数时，可以使用扩展运
|
||||
console.log(arg[3]);
|
||||
}
|
||||
|
||||
fn(1, 2, 3); //方法中定义了四个参数，但只引用了三个参数，并不会报错。
|
||||
fn(1, 2, 3); //方法中定义了四个参数，但只引用了三个参数，ES6 中并不会报错。
|
||||
|
||||
```
|
||||
|
||||
20180304_1650.png
|
||||
|
||||
|
||||
**举例：**数组引用的问题
|
||||
|
||||
我们来看一段代码：（将数组 arr1 赋值给 arr2）
|
||||
|
||||
|
||||
|
||||
**举例：**数组赋值的问题
|
||||
|
||||
我们来分析一段代码：（将数组 arr1 赋值给 arr2）
|
||||
|
||||
```javascript
|
||||
let arr1 = ['www', 'smyhvae', 'com'];
|
||||
let arr2 = arr1; // 将 arr1 赋值给 arr2，其实是让 arr2 指向 arr1 的内存地址
|
||||
console.log('arr1:' + arr1);
|
||||
console.log('arr2:' + arr2);
|
||||
console.log('---------------------');
|
||||
|
||||
arr2.push('你懂得'); //往arr2 里添加一部分内容
|
||||
console.log('arr1:' + arr1);
|
||||
console.log('arr2:' + arr2);
|
||||
```
|
||||
|
||||
运行结果：
|
||||
|
||||
|
||||
|
||||
上方代码中，我们往往 arr2 里添加了`你懂的`，却发现，arr1 里也有这个内容。原因是：`let arr2 = arr1;`其实是让 arr2 指向 arr1 的地址。也就是说，二者指向的是同一个内存地址。
|
||||
|
||||
如果不想让 arr1 和 arr2 指向同一个内存地址，我们可以借助扩展运算符来做：
|
||||
|
||||
```javascript
|
||||
let arr1 = ['www', 'smyhvae', 'com'];
|
||||
let arr2 = [...arr1]; //arr2 会重新开辟内存地址
|
||||
console.log('arr1:' + arr1);
|
||||
console.log('arr2:' + arr2);
|
||||
console.log('---------------------');
|
||||
|
||||
arr2.push('你懂得'); //往arr2 里添加一部分内容
|
||||
console.log('arr1:' + arr1);
|
||||
console.log('arr2:' + arr2);
|
||||
```
|
||||
|
||||
运行结果：
|
||||
|
||||
|
||||
|
||||
我们明白了这个例子，就可以避免开发中的很多业务逻辑上的 bug。
|
||||
|
||||
|
||||
### `rest` 运算符
|
||||
|
||||
`rest` 在英文中指的是**剩余部分**（不是指休息）。我们来举个例子，理解剩余部分的含义：
|
||||
|
||||
```javascript
|
||||
function fn(first, second, ...arg) {
|
||||
console.log(arg.length);
|
||||
}
|
||||
|
||||
fn(0, 1, 2, 3, 4, 5, 6); //调用函数后，输出结果为 5
|
||||
```
|
||||
|
||||
上方代码的输出结果为 5。 调用`fn()`时，里面有七个参数，而`arg`指的是剩下的部分（因为除去了`firt`和`second`）。
|
||||
|
||||
从上方例子中可以看出，`rest`运算符适用于：知道前面的一部分参数的数量，但对于后面剩余的参数数量未知的情况。
|
||||
|
||||
|
||||
## for ... of 循环
|
||||
|
||||
ES6 中，如果我们要遍历一个数组，可以这样做：
|
||||
|
||||
```
|
||||
let arr1 = [1, 2, 3, 4, 5];
|
||||
|
||||
for (let value of arr1) {
|
||||
console.log(value);
|
||||
}
|
||||
```
|
||||
|
||||
输出结果：
|
||||
|
||||
|
||||
|
||||
|
||||
for…of 的循环可以避免我们开拓内存空间，增加代码运行效率，所以建议大家在以后的工作中使用for…of循环。
|
||||
|
||||
|
||||
|
||||
## 模板字符串
|
||||
|
||||
我们以前让字符串进行拼接的时候，是这样做的：（传统写法的字符串拼接）
|
||||
|
||||
```javascript
|
||||
var name = 'smyhvae';
|
||||
var age = '26';
|
||||
console.log('name:'+name+',age:'+age); //传统写法
|
||||
```
|
||||
|
||||
|
||||
这种写法，比较繁琐，而且容易出错。
|
||||
|
||||
现在有了 ES6 语法，字符串拼接可以这样写：
|
||||
|
||||
```javascript
|
||||
var name = 'smyhvae';
|
||||
var age = '26';
|
||||
|
||||
console.log('name:'+name+',age:'+age); //传统写法
|
||||
|
||||
console.log(`name:${name},age:${age}`); //ES6 写法
|
||||
|
||||
```
|
||||
|
||||
注意，上方代码中，倒数第二行用的是单引号，最后一行用的是反引号（在tab键的上方）。
|
||||
|
||||
|
||||
|
||||
参考链接：
|
||||
|
||||
- [ES6的rest参数和扩展运算符](https://segmentfault.com/a/1190000010222698)
|
||||
|
||||
|
||||
|
||||
|
||||
## 箭头函数
|
||||
|
||||
|
||||
|
||||
|
||||
定义和调用函数：（传统写法）
|
||||
|
||||
```javascript
|
||||
function fn1(a, b) {
|
||||
return a + b;
|
||||
}
|
||||
|
||||
console.log(fn1(1, 2)); //输出结果：3
|
||||
```
|
||||
|
||||
定义和调用函数：（ES6中的写法）
|
||||
|
||||
|
||||
```
|
||||
|
||||
var fn2 = (a, b) => a + b;
|
||||
|
||||
console.log(fn2(1, 2)); //输出结果：3
|
||||
|
||||
```
|
||||
|
||||
|
||||
上方代码中，箭头后面的内容，就相当于 return 的内容。
|
||||
|
||||
在箭头函数中，如果方法体内有两句话，那就需要在方法体外边加上{}括号。如下：
|
||||
|
||||
|
||||
```javascript
|
||||
var fn2 = (a, b) => {
|
||||
console.log('haha');
|
||||
return a + b;
|
||||
};
|
||||
console.log(fn2(1, 2)); //输出结果：3
|
||||
|
||||
```
|
||||
|
||||
从上面的箭头函数中，我们可以很清晰地找到函数名、参数名、方法体。
|
||||
|
||||
当然，在 ES6 中定义方法时，我们还可以给方法里的参数加一个**默认值**（缺省值）：
|
||||
|
||||
- 方法被调用时，如果没有给参数赋值，那就是用默认值；
|
||||
|
||||
- 方法被调用时，如果给参数赋值了新的值，那就用新的值。
|
||||
|
||||
如下：
|
||||
|
||||
|
||||
```javascript
|
||||
var fn2 = (a, b = 5) => {
|
||||
console.log('haha');
|
||||
return a + b;
|
||||
};
|
||||
console.log(fn2(1)); //第二个参数使用默认值 5。输出结果：6
|
||||
|
||||
|
||||
|
||||
|
||||
console.log(fn2(1, 8)); //输出结果：9
|
||||
|
||||
```
|
||||
|
||||
|
||||
```
|
||||
|
||||
|
||||
|
||||
|
||||
|
||||
|
||||
|
||||
|
||||
|
||||
|
||||
```
|
||||
|
||||
|
||||
```
|
||||
|
||||
|
||||
|
||||
|
||||
更多 ES6 的语法，本文会陆续更新。
|
||||
|
||||
## 参考链接：
|
||||
|
||||
- [阮一峰 | ECMAScript 6 入门](http://es6.ruanyifeng.com/)
|
||||
|
||||
## 我的公众号
|
||||
|
||||
想学习<font color=#0000ff>**代码之外的软技能**</font>？不妨关注我的微信公众号：**生命团队**（id：`vitateam`）。
|
||||
|
||||
扫一扫，你将发现另一个全新的世界，而这将是一场美丽的意外：
|
||||
|
||||
|
||||
|
||||
|
||||
@@ -530,6 +530,7 @@ npm install -g cnpm --registry=https://registry.npm.taobao.org
|
||||
|
||||
解释： i 指的就是 install。
|
||||
|
||||
|
||||
## 我的公众号
|
||||
|
||||
想学习<font color=#0000ff>**代码之外的软技能**</font>？不妨关注我的微信公众号：**生命团队**（id：`vitateam`）。
|
||||
|
||||
@@ -1,17 +1,13 @@
|
||||
|
||||
|
||||
## 什么是 ES6
|
||||
|
||||
|
||||
|
||||
|
||||
### 发展历史
|
||||
## 前言
|
||||
|
||||
ECMAScript 是 JS 的语言标准。而 ES6 是新的 JS 语法标准。
|
||||
|
||||
|
||||
20180303_1633.png
|
||||
### 发展历史
|
||||
|
||||
20180303_1633.png
|
||||
|
||||
- 2015年6月，ES6正式发布。
|
||||
|
||||
@@ -116,7 +112,7 @@ ES6 中函数的用法：
|
||||
|
||||
上面两端代码，执行的结果是一样的。
|
||||
|
||||
当然，也可以给上面这个函数的参数加一个缺省值：
|
||||
当然，也可以给上面这个函数的参数加一个默认值：
|
||||
|
||||
```javascript
|
||||
var fn2 = (name='enen')=>{
|
||||
|
||||
Reference in New Issue
Block a user