webcourse/Webcourse
3
0
Fork 0
Code Issues Pull Requests Projects Releases Wiki Activity

update: 扩展运算符

Browse Source
This commit is contained in:
qianguyihao 2020-08-24 23:22:58 +08:00
parent 92a32ad5f8
commit 516051b422
7 changed files with 429 additions and 398 deletions
Show Stats Download Patch File Download Diff File Expand all files Collapse all files

8
00-前端工具/01-VS Code的使用.md
View File

@ -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) - [VSCode 插件大全｜ VSCode 高级玩家之第二篇](https://juejin.im/post/5ea40c6751882573b219777d)

4
02-CSS基础/01-CSS属性：字体属性和文本属性.md
View File

@ -81,9 +81,9 @@ CSS中，所有的行，都有行高。盒子模型的padding，绝对不是直
### `vertical-align: middle;` 属性 ### `vertical-align: middle;` 属性
`vertical-align`属性可用于指定**行内元素**（inline）、**行内块元素**（inline-block）、**表格的单元格**（table-cell）的垂直对齐方式。 `vertical-align`属性可用于指定**行内元素**（inline）、**行内块元素**（inline-block）、**表格的单元格**（table-cell）的垂直对齐方式。主要是用于图片、表格、文本的对齐。
主要是用于图片、表格、文本的对齐。代码举例： 代码举例：
```css ```css
vertical-align: middle; /*指定行级元素的垂直对齐方式。*/ vertical-align: middle; /*指定行级元素的垂直对齐方式。*/

70
02-CSS基础/03-CSS样式表和选择器.md
View File

@ -10,8 +10,6 @@
## 前言 ## 前言
## CSS 概述 ## CSS 概述
CSS：Cascading Style Sheet，层叠样式表。CSS 的作用就是给 HTML 页面标签添加各种样式，**定义网页的显示效果**。简单一句话：CSS 将网页**内容和显示样式进行分离**，提高了显示功能。 CSS：Cascading Style Sheet，层叠样式表。CSS 的作用就是给 HTML 页面标签添加各种样式，**定义网页的显示效果**。简单一句话：CSS 将网页**内容和显示样式进行分离**，提高了显示功能。
@ -48,7 +46,7 @@ css的最新版本是css3，**我们目前学习的是css2.1**。 因为css3和c
<!DOCTYPE html> <!DOCTYPE html>
<html lang="en"> <html lang="en">
<head> <head>
<meta charset="UTF-8"> <meta charset="UTF-8" />
<title>Document</title> <title>Document</title>
<style> <style>
p { p {
@ -65,7 +63,6 @@ css的最新版本是css3，**我们目前学习的是css2.1**。 因为css3和c
font-weight: bold; font-weight: bold;
background-color: pink; background-color: pink;
} }
</style> </style>
</head> </head>
<body> <body>
@ -73,7 +70,6 @@ css的最新版本是css3，**我们目前学习的是css2.1**。 因为css3和c
<p> <p>
我是内容 我是内容
</p> </p>
</body> </body>
</html> </html>
``` ```
@ -105,10 +101,7 @@ css对换行不敏感，对空格也不敏感。但是一定要有标准的语
**语法格式：**（其实就是键值对） **语法格式：**（其实就是键值对）
```html ```html
选择器{ 选择器{ 属性名: 属性值; 属性名: 属性值; }
属性名: 属性值;
属性名: 属性值;
}
``` ```
或者可以写成： 或者可以写成：
@ -138,7 +131,9 @@ css对换行不敏感，对空格也不敏感。但是一定要有标准的语
**举例：** **举例：**
```css ```css
p{color: red;} p {
color: red;
}
``` ```
**完整版代码举例：** **完整版代码举例：**
@ -150,7 +145,6 @@ p{color: red;}
font-style: italic; font-style: italic;
color: red; color: red;
} }
</style> </style>
<body> <body>
@ -159,6 +153,7 @@ p{color: red;}
<p>我不会就这样轻易的狗带</p> <p>我不会就这样轻易的狗带</p>
</body> </body>
``` ```
效果： 效果：
![](http://img.smyhvae.com/2015-10-03-css-01.png) ![](http://img.smyhvae.com/2015-10-03-css-01.png)
@ -169,7 +164,6 @@ p{color: red;}
```html ```html
<style type="text/css"> <style type="text/css">
/* /*
具体的注释 具体的注释
*/ */
@ -179,7 +173,6 @@ p{color: red;}
font-style: italic; font-style: italic;
color: red; color: red;
} }
</style> </style>
``` ```
@ -234,6 +227,7 @@ font是“字体” weight是“重量”的意思，bold粗。
```html ```html
font-weight: normal; font-weight: normal;
``` ```
normal 就是正常的意思。 normal 就是正常的意思。
**斜体：**（fsi） **斜体：**（fsi）
@ -272,9 +266,7 @@ CSS和HTML的结合方式有3种：
- **行内样式**：在某个特定的标签里采用 style**属性**。范围只针对此标签。 - **行内样式**：在某个特定的标签里采用 style**属性**。范围只针对此标签。
- **内嵌样式表**：在页面的 head 里采用`<style>`**标签**。范围针对此页面。 - **内嵌样式表**：在页面的 head 里采用`<style>`**标签**。范围针对此页面。
- **引入外部样式表css文件**的方式。这种引入方式又分为两种： - **引入外部样式表 css 文件**的方式。这种引入方式又分为两种： - 1、采用`<link>`标签。例如：`<link rel = "stylesheet" type = "text/css" href = "a.css"></link>` - 2、采用 import，必须写在`<style>`标签中，并且必须是第一句。例如：`@import url(a.css) ;`
- 1、采用`<link>`标签。例如：`<link rel = "stylesheet" type = "text/css" href = "a.css"></link>`
- 2、采用import，必须写在`<style>`标签中，并且必须是第一句。例如：`@import url(a.css) ;`
> 两种引入样式方式的区别：外部样式表中不能写<link>标签，但是可以写 import 语句。 > 两种引入样式方式的区别：外部样式表中不能写<link>标签，但是可以写 import 语句。
@ -291,6 +283,7 @@ CSS和HTML的结合方式有3种：
```html ```html
<p style="color:white;background-color:red">我不会就这样轻易的狗带</p> <p style="color:white;background-color:red">我不会就这样轻易的狗带</p>
``` ```
效果： 效果：
![](http://img.smyhvae.com/2015-10-03-css-02.png) ![](http://img.smyhvae.com/2015-10-03-css-02.png)
@ -310,7 +303,6 @@ CSS和HTML的结合方式有3种：
font-style: italic; font-style: italic;
color: red; color: red;
} }
</style> </style>
<body> <body>
@ -324,6 +316,7 @@ CSS和HTML的结合方式有3种：
### 3、CSS 和 HTML 结合方式三：引入外部样式表 css 文件 ### 3、CSS 和 HTML 结合方式三：引入外部样式表 css 文件
**引入样式表文件**的方式又分为两种： **引入样式表文件**的方式又分为两种：
- （1）**采用`<link>`标签**。例如：`<link rel = "stylesheet" type = "text/css" href = "a.css"></link>` - （1）**采用`<link>`标签**。例如：`<link rel = "stylesheet" type = "text/css" href = "a.css"></link>`
- （2）**采用 import**，必须写在`<style>`标签中，并且必须是第一句。例如：`@import url(a.css) ;` - （2）**采用 import**，必须写在`<style>`标签中，并且必须是第一句。例如：`@import url(a.css) ;`
@ -357,7 +350,6 @@ p{
现在我们来定义 3 个样式表： 现在我们来定义 3 个样式表：
a.css：定义一个实线的黑色边框 a.css：定义一个实线的黑色边框
```css ```css
@ -385,9 +377,10 @@ div{
width: 200px; width: 200px;
height: 200px; height: 200px;
border: 3px solid red; border: 3px solid red;
background-image: url("1.jpg"); background-image: url('1.jpg');
} }
``` ```
然后我们在 html 文件中引用三个样式表： 然后我们在 html 文件中引用三个样式表：
```html ```html
@ -395,6 +388,7 @@ div{
<link rel = "alternate stylesheet" type = "text/css" href = "b.css" title="第二种样式"></link> <link rel = "alternate stylesheet" type = "text/css" href = "b.css" title="第二种样式"></link>
<link rel = "alternate stylesheet" type = "text/css" href = "c.css" title="第三种样式"></link> <link rel = "alternate stylesheet" type = "text/css" href = "c.css" title="第三种样式"></link>
``` ```
上面引入的三个样式表中，后面两个样式表作为备选。注意备选的样式表中，title 属性不要忘记写，不然显示不出来效果的。现在来看一下效果：（在 IE 中打开网页） 上面引入的三个样式表中，后面两个样式表作为备选。注意备选的样式表中，title 属性不要忘记写，不然显示不出来效果的。现在来看一下效果：（在 IE 中打开网页）
![](http://img.smyhvae.com/2015-10-03-css-05.gif) ![](http://img.smyhvae.com/2015-10-03-css-05.gif)
@ -421,9 +415,7 @@ CSS的选择器分为两大类：基本选择题和扩展选择器。
举例： 举例：
```html ```html
p{ p{ font-size:14px; }
font-size:14px;
}
``` ```
上方选择器的意思是说：所有的`<p>`标签里的内容都将显示 14 号字体。 上方选择器的意思是说：所有的`<p>`标签里的内容都将显示 14 号字体。
@ -440,7 +432,7 @@ p{
<!DOCTYPE html> <!DOCTYPE html>
<html lang="en"> <html lang="en">
<head> <head>
<meta charset="UTF-8"> <meta charset="UTF-8" />
<title>Document</title> <title>Document</title>
<style type="text/css"> <style type="text/css">
span { span {
@ -469,10 +461,9 @@ p{
举例： 举例：
```html ```html
#mytitle{ #mytitle{ border:3px dashed green; }
border:3px dashed green;
}
``` ```
效果： 效果：
![](http://img.smyhvae.com/2015-10-03-css-08.png) ![](http://img.smyhvae.com/2015-10-03-css-08.png)
@ -506,21 +497,16 @@ id选择器的选择符是“#”。
、针对**你想要的所有**标签使用。优点：灵活。 、针对**你想要的所有**标签使用。优点：灵活。
css 中用`.`来表示类。举例如下： css 中用`.`来表示类。举例如下：
```html ```html
.one{ .one{ width:800px; }
width:800px;
}
``` ```
效果： 效果：
![](http://img.smyhvae.com/2015-10-03-css-07.png) ![](http://img.smyhvae.com/2015-10-03-css-07.png)
和 id 非常相似，任何的标签都可以携带 id 属性和 class 属性。class 属性的特点： 和 id 非常相似，任何的标签都可以携带 id 属性和 class 属性。class 属性的特点：
- 特性 1：类选择器可以被多种标签使用。 - 特性 1：类选择器可以被多种标签使用。
@ -608,7 +594,6 @@ css中用`.`来表示类。举例如下：
margin-left: 0px; margin-left: 0px;
margin-top: 0px; margin-top: 0px;
} }
``` ```
效果： 效果：
@ -683,7 +668,7 @@ css中用`.`来表示类。举例如下：
<!DOCTYPE html> <!DOCTYPE html>
<html lang="en"> <html lang="en">
<head> <head>
<meta charset="UTF-8"> <meta charset="UTF-8" />
<title>Document</title> <title>Document</title>
<style type="text/css"> <style type="text/css">
div div p { div div p {
@ -725,7 +710,6 @@ css中用`.`来表示类。举例如下：
![](http://img.smyhvae.com/20170711_1851.png) ![](http://img.smyhvae.com/20170711_1851.png)
```css ```css
h3.special { h3.special {
color: red; color: red;
@ -740,13 +724,12 @@ h3.special{
<!DOCTYPE html> <!DOCTYPE html>
<html lang="en"> <html lang="en">
<head> <head>
<meta charset="UTF-8"> <meta charset="UTF-8" />
<title>交集选择器测试</title> <title>交集选择器测试</title>
<style type="text/css"> <style type="text/css">
h3.special { h3.special {
color: red; color: red;
} }
</style> </style>
</head> </head>
<body> <body>
@ -780,7 +763,10 @@ h3.special.zhongyao{
举例： 举例：
```css ```css
p,h1,#mytitle,.one{ p,
h1,
#mytitle,
.one {
color: red; color: red;
} }
``` ```
@ -906,13 +892,7 @@ div的儿子p。和div的后代p的截然不同。
用类选择器来选择第一个或者最后一个： 用类选择器来选择第一个或者最后一个：
```html ```html
ul li.first{ ul li.first{ color:red; } ul li.last{ color:blue; }
color:red;
}
ul li.last{
color:blue;
}
``` ```
### 3.下一个兄弟选择器 ### 3.下一个兄弟选择器

4
04-JavaScript基础/09-流程控制语句：选择结构（if和switch）.md
View File

@ -300,7 +300,7 @@ switch (true) {
switch 语句中的`break`可以省略，但一般不建议（对于新手而言）。否则结果可能不是你想要的，会出现一个现象：**case 穿透**。 switch 语句中的`break`可以省略，但一般不建议（对于新手而言）。否则结果可能不是你想要的，会出现一个现象：**case 穿透**。
当然，如果你能利用好 case 穿透，会让代码些得十分优雅。 当然，如果你能利用好 case 穿透，会让代码写得十分优雅。
**举例 1**：（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 返回就行了。 如果你以后看到有前端小白采用的是**写法 1**，请一定要把**写法 2**传授给他：不需要那么多的 if else，直接用 return 返回就行了。

8
04-JavaScript基础/17-数组的常见方法.md
View File

@ -15,9 +15,9 @@
| 方法 | 描述 | 备注 | | 方法 | 描述 | 备注 |
| :-------- | :------------------------------------------------------------------------- | :------------- | | :-------- | :------------------------------------------------------------------------- | :------------- |
| push() | 向数组的**最后面**插入一个或多个元素，返回结果为**新数组的长度** | 会改变原数组 | | push() | 向数组的**最后面**插入一个或多个元素，返回结果为新数组的**长度** | 会改变原数组 |
| pop() | 删除数组中的**最后一个**元素，返回结果为**被删除的元素** | 会改变原数组 | | pop() | 删除数组中的**最后一个**元素，返回结果为**被删除的元素** | 会改变原数组 |
| unshift() | 在数组**最前面**插入一个或多个元素，返回结果为**新数组的长度** | 会改变原数组 | | unshift() | 在数组**最前面**插入一个或多个元素，返回结果为新数组的**长度** | 会改变原数组 |
| shift() | 删除数组中的**第一个**元素，返回结果为**被删除的元素** | 会改变原数组 | | shift() | 删除数组中的**第一个**元素，返回结果为**被删除的元素** | 会改变原数组 |
| | | | | | | |
| slice() | 从数组中**提取**指定的一个或多个元素，返回结果为**新的数组** | 不会改变原数组 | | slice() | 从数组中**提取**指定的一个或多个元素，返回结果为**新的数组** | 不会改变原数组 |
@ -183,7 +183,7 @@ console.log(arr); // 打印结果是数组：[1, "abc", true]
### push() ### push()
`push()`：向数组的**最后面**插入一个或多个元素，返回结果为**新数组的长度**。 `push()`：向数组的**最后面**插入一个或多个元素，返回结果为新数组的**长度**。会改变原数组，因为原数组变成了新数组。
语法： 语法：
@ -227,7 +227,7 @@ console.log(JSON.stringify(arr)); // 打印结果：["王一","王二"]
### unshift() ### unshift()
`unshift()`：在数组**最前面**插入一个或多个元素，返回结果为**新数组的长度**。插入元素后，其他元素的索引会依次调整。 `unshift()`：在数组**最前面**插入一个或多个元素，返回结果为新数组的**长度**。会改变原数组，因为原数组变成了新数组。插入元素后，其他元素的索引会依次调整。
语法： 语法：

56
05-JavaScript之ES6语法/07-剩余参数和扩展运算符.md
View File

@ -42,7 +42,7 @@ fn(1, 2, 3); //方法的定义中了四个参数，但调用函数时只使用
打印结果： 打印结果：
``` ```bash
1 1
2 2
undefined undefined
@ -80,6 +80,7 @@ const sum = (...args) => {
}; };
console.log(sum(10, 20, 30)); console.log(sum(10, 20, 30));
``` ```
打印结果：60 打印结果：60
### 剩余参数和解构赋值配合使用 ### 剩余参数和解构赋值配合使用
@ -104,7 +105,7 @@ console.log(s2); // ['李四', '王五']
```js ```js
const arr = [10, 20, 30]; const arr = [10, 20, 30];
...arr // 10, 20, 30 注意，这一行是伪代码 ...arr // 10, 20, 30 注意，这一行是伪代码，这里用到了扩展运算符
console.log(...arr); // 10 20 30 console.log(...arr); // 10 20 30
console.log(10, 20, 30); // 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)` 看看。 我们把`...arr` 打印出来，发现打印结果竟然是 `10 20 30`，为啥逗号不见了呢？因为逗号被当作了 console.log 的参数分隔符。如果你不信，可以直接打印 `console.log(10, 20, 30)` 看看。
接下来，我们看一下扩展运算符的应用。
**举例**：数组赋值的问题 ### 举例1：数组赋值
我们来分析一段代码：（将数组 arr1 赋值给 arr2） 数组赋值的代码举例：
```js
let arr2 = [...arr1]; // 将 arr1 赋值给 arr2
```
为了理解上面这行代码，我们先来分析一段代码：（将数组 arr1 赋值给 arr2）
```javascript ```javascript
let arr1 = ['www', 'smyhvae', 'com']; let arr1 = ['www', 'smyhvae', 'com'];
@ -139,11 +147,11 @@ console.log('arr2:' + arr2);
上方代码中，我们往往 arr2 里添加了`你懂的`，却发现，arr1 里也有这个内容。原因是：`let arr2 = arr1;`其实是让 arr2 指向 arr1 的地址。也就是说，二者指向的是同一个内存地址。 上方代码中，我们往往 arr2 里添加了`你懂的`，却发现，arr1 里也有这个内容。原因是：`let arr2 = arr1;`其实是让 arr2 指向 arr1 的地址。也就是说，二者指向的是同一个内存地址。
如果不想让 arr1 和 arr2 指向同一个内存地址，我们可以借助扩展运算符来做： 如果不想让 arr1 和 arr2 指向同一个内存地址，我们可以借助**扩展运算符**来做：
```javascript ```javascript
let arr1 = ['www', 'smyhvae', 'com']; let arr1 = ['www', 'smyhvae', 'com'];
let arr2 = [...arr1]; //arr2 会重新开辟内存地址 let arr2 = [...arr1]; //【重要代码】arr2 会重新开辟内存地址
console.log('arr1:' + arr1); console.log('arr1:' + arr1);
console.log('arr2:' + arr2); console.log('arr2:' + arr2);
console.log('---------------------'); console.log('---------------------');
@ -155,6 +163,40 @@ console.log('arr2:' + arr2);
运行结果： 运行结果：
![](http://img.smyhvae.com/20180304_1951.png) ```bash
arr1:www,smyhvae,com
arr2:www,smyhvae,com
---------------------
arr1:www,smyhvae,com
arr2:www,smyhvae,com,你懂得
```
我们明白了这个例子，就可以避免开发中的很多业务逻辑上的 bug。 我们明白了这个例子，就可以避免开发中的很多业务逻辑上的 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]; // 利用扩展运算符，将伪数组转为真正的数组
```

5
README.md
View File

@ -3,7 +3,7 @@
项目地址：<https://github.com/qianguyihao/Web> 项目地址：<https://github.com/qianguyihao/Web>
前端入门和进阶学习笔记。从零开始学前端，做一名精致的前端工程师。持续更新中。本项目的主要作用有： 前端入门到进阶图文教程。从零开始学前端，做一名精致的前端工程师。持续更新中。本项目的主要作用有：
- 1、网上的大部分入门教程，都不太适合初学者，本项目争取照顾到每一位前端入门者的同理心。即使你完全不懂前端，甚至不懂编程，通过这个教程，也能让小白入门。 - 1、网上的大部分入门教程，都不太适合初学者，本项目争取照顾到每一位前端入门者的同理心。即使你完全不懂前端，甚至不懂编程，通过这个教程，也能让小白入门。
@ -37,6 +37,7 @@
扫一扫，你将发现一个全新的世界，而这将是一场美丽的意外： 扫一扫，你将发现一个全新的世界，而这将是一场美丽的意外：
![](http://img.smyhvae.com/20190101.png) ![](http://img.smyhvae.com/20200101.png)