update: 扩展运算符
This commit is contained in:
qianguyihao
parent
92a32ad5f8
commit
516051b422
@ -966,6 +966,14 @@ CSS Peek 对 Vue 没有支持，该插件提供了对 Vue 文件的支持。
|
||||
|
||||
一个超级详细和真诚的前端入门项目。
|
||||
|
||||
|
||||
## todo
|
||||
|
||||
- [issues 84](https://github.com/qianguyihao/Web/issues/84)
|
||||
|
||||
|
||||
|
||||
|
||||
## 参考链接
|
||||
|
||||
- [VSCode 插件大全｜ VSCode 高级玩家之第二篇](https://juejin.im/post/5ea40c6751882573b219777d)
|
||||
|
||||
@ -81,9 +81,9 @@ CSS中，所有的行，都有行高。盒子模型的padding，绝对不是直
|
||||
|
||||
### `vertical-align: middle;` 属性
|
||||
|
||||
`vertical-align`属性可用于指定**行内元素**（inline）、**行内块元素**（inline-block）、**表格的单元格**（table-cell）的垂直对齐方式。
|
||||
`vertical-align`属性可用于指定**行内元素**（inline）、**行内块元素**（inline-block）、**表格的单元格**（table-cell）的垂直对齐方式。主要是用于图片、表格、文本的对齐。
|
||||
|
||||
主要是用于图片、表格、文本的对齐。代码举例：
|
||||
代码举例：
|
||||
|
||||
```css
|
||||
vertical-align: middle; /*指定行级元素的垂直对齐方式。*/
|
||||
|
||||
File diff suppressed because it is too large
Load Diff
@ -300,7 +300,7 @@ switch (true) {
|
||||
|
||||
switch 语句中的`break`可以省略，但一般不建议（对于新手而言）。否则结果可能不是你想要的，会出现一个现象：**case 穿透**。
|
||||
|
||||
当然，如果你能利用好 case 穿透，会让代码些得十分优雅。
|
||||
当然，如果你能利用好 case 穿透，会让代码写得十分优雅。
|
||||
|
||||
**举例 1**：（case 穿透的情况）
|
||||
|
||||
@ -469,7 +469,7 @@ function handleRetCode(retCode) {
|
||||
}
|
||||
```
|
||||
|
||||
上面的写法 2，是比较推荐的写法：直接通过 return 的方式，让 function 里的代码不再继续往下走，这就达到目的了。对了，因为要用到 return ，所以需要单独封装到一个 function 里面。
|
||||
上面的写法 2，是比较推荐的写法：直接通过 return 的方式，让 function 里的代码不再继续往下走，这就达到目的了。对了，因为要用到 return ，所以整段代码是封装到一个 function 里的。
|
||||
|
||||
如果你以后看到有前端小白采用的是**写法 1**，请一定要把**写法 2**传授给他：不需要那么多的 if else，直接用 return 返回就行了。
|
||||
|
||||
|
||||
@ -15,9 +15,9 @@
|
||||
|
||||
| 方法 | 描述 | 备注 |
|
||||
| :-------- | :------------------------------------------------------------------------- | :------------- |
|
||||
| push() | 向数组的**最后面**插入一个或多个元素，返回结果为**新数组的长度** | 会改变原数组 |
|
||||
| push() | 向数组的**最后面**插入一个或多个元素，返回结果为新数组的**长度** | 会改变原数组 |
|
||||
| pop() | 删除数组中的**最后一个**元素，返回结果为**被删除的元素** | 会改变原数组 |
|
||||
| unshift() | 在数组**最前面**插入一个或多个元素，返回结果为**新数组的长度** | 会改变原数组 |
|
||||
| unshift() | 在数组**最前面**插入一个或多个元素，返回结果为新数组的**长度** | 会改变原数组 |
|
||||
| shift() | 删除数组中的**第一个**元素，返回结果为**被删除的元素** | 会改变原数组 |
|
||||
| | | |
|
||||
| slice() | 从数组中**提取**指定的一个或多个元素，返回结果为**新的数组** | 不会改变原数组 |
|
||||
@ -183,7 +183,7 @@ console.log(arr); // 打印结果是数组：[1, "abc", true]
|
||||
|
||||
### push()
|
||||
|
||||
`push()`：向数组的**最后面**插入一个或多个元素，返回结果为**新数组的长度**。
|
||||
`push()`：向数组的**最后面**插入一个或多个元素，返回结果为新数组的**长度**。会改变原数组，因为原数组变成了新数组。
|
||||
|
||||
语法：
|
||||
|
||||
@ -227,7 +227,7 @@ console.log(JSON.stringify(arr)); // 打印结果：["王一","王二"]
|
||||
|
||||
### unshift()
|
||||
|
||||
`unshift()`：在数组**最前面**插入一个或多个元素，返回结果为**新数组的长度**。插入元素后，其他元素的索引会依次调整。
|
||||
`unshift()`：在数组**最前面**插入一个或多个元素，返回结果为新数组的**长度**。会改变原数组，因为原数组变成了新数组。插入元素后，其他元素的索引会依次调整。
|
||||
|
||||
语法：
|
||||
|
||||
|
||||
@ -42,7 +42,7 @@ fn(1, 2, 3); //方法的定义中了四个参数，但调用函数时只使用
|
||||
|
||||
打印结果：
|
||||
|
||||
```
|
||||
```bash
|
||||
1
|
||||
2
|
||||
undefined
|
||||
@ -80,6 +80,7 @@ const sum = (...args) => {
|
||||
};
|
||||
console.log(sum(10, 20, 30));
|
||||
```
|
||||
|
||||
打印结果：60
|
||||
|
||||
### 剩余参数和解构赋值配合使用
|
||||
@ -104,7 +105,7 @@ console.log(s2); // ['李四', '王五']
|
||||
|
||||
```js
|
||||
const arr = [10, 20, 30];
|
||||
...arr // 10, 20, 30 注意，这一行是伪代码
|
||||
...arr // 10, 20, 30 注意，这一行是伪代码，这里用到了扩展运算符
|
||||
console.log(...arr); // 10 20 30
|
||||
|
||||
console.log(10, 20, 30); // 10 20 30
|
||||
@ -116,10 +117,17 @@ console.log(10, 20, 30); // 10 20 30
|
||||
|
||||
我们把`...arr` 打印出来，发现打印结果竟然是 `10 20 30`，为啥逗号不见了呢？因为逗号被当作了 console.log 的参数分隔符。如果你不信，可以直接打印 `console.log(10, 20, 30)` 看看。
|
||||
|
||||
接下来，我们看一下扩展运算符的应用。
|
||||
|
||||
**举例**：数组赋值的问题
|
||||
### 举例1：数组赋值
|
||||
|
||||
我们来分析一段代码：（将数组 arr1 赋值给 arr2）
|
||||
数组赋值的代码举例：
|
||||
|
||||
```js
|
||||
let arr2 = [...arr1]; // 将 arr1 赋值给 arr2
|
||||
```
|
||||
|
||||
为了理解上面这行代码，我们先来分析一段代码：（将数组 arr1 赋值给 arr2）
|
||||
|
||||
```javascript
|
||||
let arr1 = ['www', 'smyhvae', 'com'];
|
||||
@ -128,7 +136,7 @@ console.log('arr1:' + arr1);
|
||||
console.log('arr2:' + arr2);
|
||||
console.log('---------------------');
|
||||
|
||||
arr2.push('你懂得'); //往arr2 里添加一部分内容
|
||||
arr2.push('你懂得'); //往 arr2 里添加一部分内容
|
||||
console.log('arr1:' + arr1);
|
||||
console.log('arr2:' + arr2);
|
||||
```
|
||||
@ -139,11 +147,11 @@ console.log('arr2:' + arr2);
|
||||
|
||||
上方代码中，我们往往 arr2 里添加了`你懂的`，却发现，arr1 里也有这个内容。原因是：`let arr2 = arr1;`其实是让 arr2 指向 arr1 的地址。也就是说，二者指向的是同一个内存地址。
|
||||
|
||||
如果不想让 arr1 和 arr2 指向同一个内存地址，我们可以借助扩展运算符来做：
|
||||
如果不想让 arr1 和 arr2 指向同一个内存地址，我们可以借助**扩展运算符**来做：
|
||||
|
||||
```javascript
|
||||
let arr1 = ['www', 'smyhvae', 'com'];
|
||||
let arr2 = [...arr1]; //arr2 会重新开辟内存地址
|
||||
let arr2 = [...arr1]; //【重要代码】arr2 会重新开辟内存地址
|
||||
console.log('arr1:' + arr1);
|
||||
console.log('arr2:' + arr2);
|
||||
console.log('---------------------');
|
||||
@ -155,6 +163,40 @@ console.log('arr2:' + arr2);
|
||||
|
||||
运行结果：
|
||||
|
||||
|
||||
```bash
|
||||
arr1:www,smyhvae,com
|
||||
arr2:www,smyhvae,com
|
||||
---------------------
|
||||
arr1:www,smyhvae,com
|
||||
arr2:www,smyhvae,com,你懂得
|
||||
```
|
||||
|
||||
我们明白了这个例子，就可以避免开发中的很多业务逻辑上的 bug。
|
||||
|
||||
### 举例2：合并数组
|
||||
|
||||
代码举例：
|
||||
|
||||
```js
|
||||
let arr1 = ['王一', '王二', '王三'];
|
||||
let arr2 = ['王四', '王五', '王六'];
|
||||
// ...arr1 // '王一','王二','王三'
|
||||
// ...arr2 // '王四','王五','王六'
|
||||
|
||||
// 方法1
|
||||
let arr3 = [...arr1, ...arr2];
|
||||
console.log(arr3); // ["王一", "王二", "王三", "王四", "王五", "王六"]
|
||||
|
||||
// 方法2
|
||||
arr1.push(...arr2);
|
||||
console.log(arr1); // ["王一", "王二", "王三", "王四", "王五", "王六"]
|
||||
```
|
||||
|
||||
### 举例3：将伪数组或者可遍历对象转换为真正的数组
|
||||
|
||||
代码举例：
|
||||
|
||||
```js
|
||||
const myDivs = document.getElementsByClassName('div');
|
||||
const divArr = [...myDivs]; // 利用扩展运算符，将伪数组转为真正的数组
|
||||
```
|
||||
|
||||
@ -3,7 +3,7 @@
|
||||
|
||||
项目地址：<https://github.com/qianguyihao/Web>
|
||||
|
||||
前端入门和进阶学习笔记。从零开始学前端，做一名精致的前端工程师。持续更新中。本项目的主要作用有：
|
||||
前端入门到进阶图文教程。从零开始学前端，做一名精致的前端工程师。持续更新中。本项目的主要作用有：
|
||||
|
||||
|
||||
- 1、网上的大部分入门教程，都不太适合初学者，本项目争取照顾到每一位前端入门者的同理心。即使你完全不懂前端，甚至不懂编程，通过这个教程，也能让小白入门。
|
||||
@ -37,6 +37,7 @@
|
||||
|
||||
扫一扫，你将发现一个全新的世界，而这将是一场美丽的意外：
|
||||
|
||||
|
||||
|
||||
|
||||
|
||||
|
||||
|
||||
Loading…
Reference in New Issue
Block a user