Skip to content

Commit 89ef33c

Browse files
AmazingAngAmazingAng
authored
Merge pull request WTFAcademy#18 from holazz/split_lessons
Split condition and loop
2 parents 10c47b8 + 11bf2dd commit 89ef33c

6 files changed

Lines changed: 306 additions & 284 deletions

File tree

‎06_Condition/Condition.js‎

Lines changed: 97 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,97 @@
1+
/** if */
2+
{
3+
let x = 1
4+
5+
if (x > 0) {
6+
x = x + 1
7+
}
8+
9+
console.log(x) // 2
10+
}
11+
12+
/** if else */
13+
{
14+
let x = 1
15+
16+
if (x > 1) {
17+
x = x + 1
18+
} else {
19+
x = x - 1
20+
}
21+
22+
console.log(x) // 0
23+
}
24+
25+
/** if else if */
26+
{
27+
let x = 1
28+
29+
if (x === 0) {
30+
console.log('x 的值为 0')
31+
} else if (x === 1) {
32+
console.log('x 的值为 1')
33+
} else if (x === 2) {
34+
console.log('x 的值为 2')
35+
} else {
36+
console.log('x 为其它值')
37+
}
38+
39+
// x 的值为 1
40+
}
41+
42+
/** switch */
43+
{
44+
let x = 1
45+
46+
switch (x) {
47+
case 1: // if (x === 1)
48+
console.log('x 的值为 1')
49+
break
50+
51+
case 2: // if (x === 2)
52+
console.log('x 的值为 2')
53+
break
54+
55+
default:
56+
console.log('x 为其它值')
57+
break
58+
}
59+
60+
// x 的值为 1
61+
}
62+
63+
/** switch 省略 break */
64+
{
65+
let x = 1
66+
67+
switch (x) {
68+
case 1:
69+
console.log('x 的值为 1')
70+
71+
case 2:
72+
console.log('x 的值为 2')
73+
74+
default:
75+
console.log('x 为其它值')
76+
}
77+
78+
// x 的值为 1
79+
// x 的值为 2
80+
// x 为其它值
81+
}
82+
83+
/** switch case 分组 */
84+
{
85+
let x = 1
86+
87+
switch (x) {
88+
case 1:
89+
case 2:
90+
console.log('x 的值为 1 或 2')
91+
92+
default:
93+
console.log('x 为其它值')
94+
}
95+
96+
// x 的值为 1 或 2
97+
}

‎06_Condition/readme.md‎

Lines changed: 189 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,189 @@
1+
# WTF JavaScript 极简教程: 6. 条件语句
2+
3+
WTF JavaScript 教程，帮助新人快速入门 JavaScript。
4+
5+
**推特**：[@WTFAcademy\_](https://twitter.com/WTFAcademy_) ｜ [@0xAA_Science](https://twitter.com/0xAA_Science)
6+
7+
**WTF Academy 社群：** [官网 wtf.academy](https://wtf.academy/) | [WTF Solidity 教程](https://github.com/AmazingAng/WTFSolidity) | [discord](https://discord.wtf.academy/) | [微信群申请](https://docs.google.com/forms/d/e/1FAIpQLSe4KGT8Sh6sJ7hedQRuIYirOoZK_85miz3dw7vA1-YjodgJ-A/viewform?usp=sf_link)
8+
9+
所有代码和教程开源在 github: [github.com/WTFAcademy/WTF-JavaScript](https://github.com/WTFAcademy/WTF-JavaScript)
10+
11+
---
12+
13+
这一讲，我们介绍 JavaScript 中的条件语句，它可以让我们做到根据不同条件执行不同的操作。
14+
15+
## if 语句
16+
17+
`if` 语句的基本结构如下：
18+
19+
```js
20+
if (条件) {
21+
语句
22+
}
23+
```
24+
25+
当 `if` 语句的条件为  `true` 时，则会执行对应的代码块。例如：
26+
27+
```js
28+
let x = 1
29+
30+
if (x > 0) {
31+
x = x + 1
32+
}
33+
34+
console.log(x) // 2
35+
```
36+
37+
`if` 语句会计算圆括号内的表达式，并将计算结果转换为布尔类型，下列值将会被计算为 `false` ：
38+
39+
- `false`
40+
- `undefined`
41+
- `null`
42+
- `0`
43+
- `NaN`
44+
- 空字符串（`""`）
45+
46+
当传递给 `if` 语句所有其他的值，包括所有对象会被计算为 `true`
47+
48+
## else 语句
49+
50+
`if` 代码块后还可以跟随一个 `else` 代码块，如果判断条件不成立，则会执行它内部的代码。
51+
52+
```js
53+
let x = 1
54+
55+
if (x > 1) {
56+
x = x + 1
57+
} else {
58+
x = x - 1
59+
}
60+
61+
console.log(x) // 0
62+
```
63+
64+
## else if 语句
65+
66+
有时我们需要进行多次判断，可以通过使用  `else if` 语句实现：
67+
68+
```js
69+
let x = 1
70+
71+
if (x === 0) {
72+
console.log('x 的值为 0')
73+
} else if (x === 1) {
74+
console.log('x 的值为 1')
75+
} else if (x === 2) {
76+
console.log('x 的值为 2')
77+
} else {
78+
console.log('x 为其它值')
79+
}
80+
```
81+
82+
## switch 语句
83+
84+
`switch` 语句有至少一个  `case` 代码块和一个可选的  `default` 代码块，基本结构如下：
85+
86+
```js
87+
switch (表达式) {
88+
case value1:
89+
语句1
90+
break
91+
92+
case value2:
93+
语句2
94+
break
95+
96+
default:
97+
语句3
98+
break
99+
}
100+
```
101+
102+
`switch` 语句比较表达式的值是否与 `case` 的值**严格相等，**如果相等则执行当前 `case` 下的代码块，直到遇到最靠近的  `break` 语句，否则与下一个 `case` 进行比较，如果没有符合的 case，则执行  `default` 代码块。
103+
104+
```js
105+
let x = 1
106+
107+
switch (x) {
108+
case 1: // if (x === 1)
109+
console.log('x 的值为 1')
110+
break
111+
112+
case 2: // if (x === 2)
113+
console.log('x 的值为 2')
114+
break
115+
116+
default:
117+
console.log('x 为其它值')
118+
break
119+
}
120+
121+
// x 的值为 1
122+
```
123+
124+
上面代码根据变量 `x` 的值，选择执行相应的 `case` 。如果所有 `case` 都不符合，则执行最后的`default` 部分。
125+
126+
需要注意的是，如果 `case` 代码块内部没有 `break` 语句时，程序将不经过任何检查就会继续执行下一个  `case`，而不是跳出`switch` 结构。像下面这样：
127+
128+
```js
129+
let x = 1
130+
131+
switch (x) {
132+
case 1:
133+
console.log('x 的值为 1')
134+
135+
case 2:
136+
console.log('x 的值为 2')
137+
138+
default:
139+
console.log('x 为其它值')
140+
}
141+
142+
// x 的值为 1
143+
// x 的值为 2
144+
// x 为其它值
145+
```
146+
147+
共享同一段代码的几个  `case` 分支可以被分为一组，比如我们希望 `case 1` 和 `case 2` 执行相同的逻辑，我们可以这样做：
148+
149+
```js
150+
let x = 1
151+
152+
switch (x) {
153+
case 1:
154+
case 2:
155+
console.log('x 的值为 1 或 2')
156+
157+
default:
158+
console.log('x 为其它值')
159+
}
160+
161+
// x 的值为 1 或 2
162+
```
163+
164+
## 习题
165+
166+
将下面 `switch` 结构的代码写成 `if..else` 结构：
167+
168+
```jsx live
169+
function TestJS06(props) {
170+
const name = 'JavaScript'
171+
172+
switch (name) {
173+
case 'Solidity':
174+
return 'Hello, WTF Solidity!'
175+
176+
case 'HTML':
177+
case 'CSS':
178+
case 'JavaScript':
179+
return 'Hello, WTF Web!'
180+
181+
default:
182+
return 'Hello, WTF Academy!'
183+
}
184+
}
185+
```
186+
187+
## 总结
188+
189+
这一讲我们介绍了 JavaScript 的条件语句。JavaScript 提供了 `if` 和 `switch` 两种条件语句结构进行条件判断，只有满足预设的条件，才会执行相应的语句。

07_ControlFlow/index.js renamed to 07_Loop/Loop.js

Lines changed: 0 additions & 98 deletions
Original file line numberDiff line numberDiff line change
@@ -1,101 +1,3 @@
1-
/** if */
2-
{
3-
let x = 1
4-
5-
if (x > 0) {
6-
x = x + 1
7-
}
8-
9-
console.log(x) // 2
10-
}
11-
12-
/** if else */
13-
{
14-
let x = 1
15-
16-
if (x > 1) {
17-
x = x + 1
18-
} else {
19-
x = x - 1
20-
}
21-
22-
console.log(x) // 0
23-
}
24-
25-
/** if else if */
26-
{
27-
let x = 1
28-
29-
if (x === 0) {
30-
console.log('x 的值为 0')
31-
} else if (x === 1) {
32-
console.log('x 的值为 1')
33-
} else if (x === 2) {
34-
console.log('x 的值为 2')
35-
} else {
36-
console.log('x 为其它值')
37-
}
38-
39-
// x 的值为 1
40-
}
41-
42-
/** switch */
43-
{
44-
let x = 1
45-
46-
switch (x) {
47-
case 1: // if (x === 1)
48-
console.log('x 的值为 1')
49-
break
50-
51-
case 2: // if (x === 2)
52-
console.log('x 的值为 2')
53-
break
54-
55-
default:
56-
console.log('x 为其它值')
57-
break
58-
}
59-
60-
// x 的值为 1
61-
}
62-
63-
/** switch 省略 break */
64-
{
65-
let x = 1
66-
67-
switch (x) {
68-
case 1:
69-
console.log('x 的值为 1')
70-
71-
case 2:
72-
console.log('x 的值为 2')
73-
74-
default:
75-
console.log('x 为其它值')
76-
}
77-
78-
// x 的值为 1
79-
// x 的值为 2
80-
// x 为其它值
81-
}
82-
83-
/** switch case 分组 */
84-
{
85-
let x = 1
86-
87-
switch (x) {
88-
case 1:
89-
case 2:
90-
console.log('x 的值为 1 或 2')
91-
92-
default:
93-
console.log('x 为其它值')
94-
}
95-
96-
// x 的值为 1 或 2
97-
}
98-
991
/** while */
1002
{
1013
let i = 0

0 commit comments

Comments
 (0)