Skip to content

Commit 59c9ecd

Browse files
seasidejuvenile666seasidejuvenile666
authored
Add files via upload
1 parent dae6f00 commit 59c9ecd

8 files changed

Lines changed: 295 additions & 0 deletions

File tree

‎02_VariableAndConstant/index.js‎

Lines changed: 29 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,29 @@
1+
var variable = 'hello' //声明变量并初始化
2+
variable = 'world' //改变变量的值
3+
4+
//var多次声明
5+
var age = 15
6+
var age = 25
7+
var age = 35
8+
console.log(age) //35
9+
10+
//let冗余声明
11+
var name
12+
var name //合法
13+
14+
let age
15+
let age //SyntaxError: Identifier 'age' has already been declared
16+
17+
//混用也会导致冗余声明
18+
var gender
19+
let gender //SyntaxError: Identifier 'gender' has already been declared
20+
21+
let address
22+
var address //SyntaxError: Identifier 'address' has already been declared
23+
24+
const age=18
25+
age=20 //TypeError: Assignment to constant variable
26+
27+
//const不允许重复声明
28+
const age=18
29+
const age=20 //SyntaxError: Identifier 'age' has already been declared

‎02_VariableAndConstant/readme.md‎

Lines changed: 101 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,101 @@
1+
# WTF JavaScript 极简教程: 2. variable and constant
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+
这一讲，我们将介绍声明变量的三个关键字`var`、`let`和`const`，并讲解它们之间的区别和用法。
14+
15+
## var 关键字
16+
17+
要声明一个变量，可以使用var操作符，后面跟上变量名，而且声明变量时可以设置它的初始值。
18+
19+
```javascript
20+
var variable = 'hello' //声明变量并初始化
21+
```
22+
23+
在这个语句中，我们声明了一个名为`variable`的变量，并给它赋上了初始值`'hello'`。如果没有给它赋初始值，变量的值就为`undefined`。之后我们还可以改变变量的值。
24+
25+
```javascript
26+
var variable = 'hello'
27+
variable = 'world' //改变变量的值
28+
```
29+
30+
### var多次声明
31+
32+
多次使用`var`声明同一个变量是没问题的，但该变量会获取到最新的值。
33+
34+
```javascript
35+
var age = 15
36+
var age = 25
37+
var age = 35
38+
console.log(age) //35
39+
```
40+
41+
## let 关键字
42+
43+
`let`和`var`的作用类似，但在作用域上有非常显著的区别，这一块的内容我们会在后续讲到作用域时继续补充，现在先暂时跳过。
44+
45+
### 冗余声明
46+
47+
`let`不允许出现冗余声明，否则会报错：
48+
49+
```javascript
50+
var name
51+
var name //合法
52+
53+
let age
54+
let age //SyntaxError: Identifier 'age' has already been declared
55+
```
56+
57+
混用`let`和`var`同样会导致冗余声明报错
58+
59+
```javascript
60+
var gender
61+
let gender //SyntaxError: Identifier 'gender' has already been declared
62+
63+
let address
64+
var address //SyntaxError: Identifier 'address' has already been declared
65+
```
66+
67+
## const 关键字
68+
69+
`const`和`let`的作用类似，唯一一个重要的区别就是用`const`声明变量时必须给它赋值，同时之后不能改变它的值，因此`const`一般用来声明常量，也就是不会改变的值。
70+
71+
```javascript
72+
const age=18
73+
age=20 //TypeError: Assignment to constant variable
74+
```
75+
76+
由于`const`声明的值无法改变，因此它也不允许重复声明
77+
78+
```javascript
79+
const age=18
80+
const age=20 //SyntaxError: Identifier 'age' has already been declared
81+
```
82+
83+
## 使用规范
84+
85+
ES6新增的`let`和`const`很好地解决了行为怪异的`var`在作用域和语义上存在的诸多问题，也形成了开发时的使用规范。
86+
87+
### 1.能用`const`就用`const`
88+
89+
使用`const`声明可以确保一些重要的值不会被改变，同时也能迅速发现一些因意外赋值导致的不合理行为。
90+
91+
### 2.不能用`const`就用`let`，不使用`var`
92+
93+
当开发者提前知道某些变量未来需要被修改时就使用`let`，这样可以确保变量拥有明确的作用域和声明位置。
94+
95+
## 总结
96+
97+
这一讲我们介绍了声明变量的三个关键字`var`、`let`和`const`，并讲解了它们之间的区别和用法。在目前的开发中，能用`const`就用`const`，不能用`const`就用`let`，`var`基本上不会使用。
98+
99+
## 参考资料
100+
101+
JavaScript高级程序设计（第4版）3.3 变量

‎04_Function/img/4-1.png‎

8.72 KB
Loading

‎04_Function/img/4-2.png‎

6.2 KB
Loading

‎04_Function/img/4-3.png‎

15.8 KB
Loading

‎04_Function/img/4-4.png‎

9.28 KB
Loading

‎04_Function/index.js‎

Lines changed: 38 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,38 @@
1+
//函数声明
2+
function sum(num1,num2){
3+
return num1 + num2
4+
}
5+
6+
//函数表达式
7+
let sum = function(num1,num2){
8+
return num1 + num2
9+
}
10+
11+
//箭头函数(arrow function)
12+
let sum = (num1,num2) => {
13+
return num1+num2
14+
}
15+
16+
//箭头函数可以省略小括号
17+
let add = x => {return x + 1} //只有一个参数
18+
let getRandom = () =>{return Math.random()} //没有参数需要括号
19+
let sum = (num1,num2) => {return num1 + num2} //多个参数需要括号
20+
let sum = num1,num2 => {return num1 + num2} // 错误的写法
21+
22+
//箭头函数可以省略大括号
23+
let double = x => x * 2 //返回x的2倍
24+
let print = x => console.log(x) //返回undefined
25+
26+
//形参
27+
function sum1(num1) {
28+
console.log('num1 =',num1) //num1 = undefined
29+
}
30+
31+
//函数作为参数
32+
function ft1(x) {
33+
console.log('x =',x)
34+
}
35+
function ft2(){
36+
console.log('我是fn2函数')
37+
}
38+
ft1(ft2)

‎04_Function/readme.md‎

Lines changed: 127 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,127 @@
1+
# WTF JavaScript 极简教程: 6. function
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+
这一讲，我们将介绍JS中的`function`，包括三种定义函数的语法、函数引用和函数的参数。
14+
15+
## 三种定义函数的语法
16+
17+
下面我们以加法为例使用三种方法来定义具有相同功能的函数。
18+
19+
### 函数声明
20+
21+
```javascript
22+
function sum(num1,num2){
23+
return num1 + num2
24+
}
25+
```
26+
27+
`function`表示函数类型，`sum`代表函数名。
28+
29+
小括号中的`num1`、`num2`表示函数的两个参数，大括号中的语句表示函数体，也就是调用函数后要执行的代码。
30+
31+
`return`关键字指定函数的返回值，任何值都可以作为返回值。如果不写`return`或者只写`return`后面不跟任何值，就相当于`return undefined`。
32+
33+
如果函数体中存在`return`，那么函数执行到`return`就结束了，后面写再多语句也是无效的。
34+
35+
### 函数表达式
36+
37+
```javascript
38+
let sum = function(num1,num2){
39+
return num1 + num2
40+
}
41+
```
42+
43+
函数表达式与函数声明几乎一样，唯一的区别就是与函数声明相比，`sum`被提到前面作为变量，同时函数被赋值给它，因此该函数可以通过变量`sum`来引用。
44+
45+
### 箭头函数（arrow function）
46+
47+
ES6新增了使用`=>`语法来定义函数，这种语法比函数声明和函数表达式都更为简洁。
48+
49+
```javascript
50+
let sum = (num1,num2) => {
51+
return num1+num2
52+
}
53+
```
54+
55+
在上面的语句中，`=`右边的就是箭头函数，该函数同样也是被赋值给变量`sum`。
56+
57+
箭头函数如果只有一个参数，可以不使用小括号。只有在没有参数，或者有多个参数的情况下，才必须使用小括号：
58+
59+
```javascript
60+
let add = x => {return x + 1} //只有一个参数
61+
let getRandom = () =>{return Math.random()} //没有参数需要括号
62+
let sum = (num1,num2) => {return num1 + num2} //多个参数需要括号
63+
let sum = num1,num2 => {return num1 + num2} // 错误的写法
64+
```
65+
66+
箭头函数的大括号也可以省略，如果不使用大括号，那么箭头后面就只能有一行代码，并且如果这行代码有值的话会被返回。
67+
68+
```javascript
69+
let double = x => x * 2 //返回x的2倍
70+
let print = x => console.log(x) //返回undefined
71+
```
72+
73+
## 函数引用
74+
75+
在上述三种定义函数的例子中，`sum`均为函数名。
76+
77+
使用不带括号的函数名会返回该函数，带上括号后才会执行该函数。
78+
79+
![](./img/4-1.png)
80+
81+
## 函数的参数
82+
83+
函数的参数分为形参和实参。
84+
85+
### 形参
86+
87+
在下面这个函数中，`num1`是在定义函数时创建的形式参数（形参），并且`num1`会自动在函数内部声明但不会被赋值。
88+
89+
```javascript
90+
function sum1(num1) {
91+
console.log('num1 =',num1) //num1 = undefined
92+
}
93+
```
94+
95+
![](./img/4-2.png)
96+
97+
### 实参
98+
99+
在调用函数时，可以通过函数的`()`传递任意数量的实参，实参会赋值给对应位置的形参并遵循以下规则：
100+
101+
1. 如果实参和形参数量一样，则实参和形参的值一一对应。
102+
2. 如果实参比形参多，那么多余的实参不会被使用。
103+
3. 如果形参比实参多，那么多余的形参为`undefined`，也就是未被赋值。
104+
105+
![](./img/4-3.png)
106+
107+
### 函数也可以作为参数
108+
109+
```javascript
110+
function ft1(x) {
111+
console.log('x =',x)
112+
}
113+
function ft2(){
114+
console.log('我是fn2函数')
115+
}
116+
ft1(ft2)
117+
```
118+
119+
![](./img/4-4.png)
120+
121+
## 总结
122+
123+
这一讲，我们具体介绍了JS中的`function`，包括三种定义函数的语法、函数引用和函数的参数。箭头函数和函数表达式其实存在一些区别，学员可以自行探索一下。
124+
125+
## 参考资料
126+
127+
JavaScript高级程序设计（第4版）10 函数

0 commit comments

Comments
 (0)