Skip to content

Commit ef327f9

Browse files
AmazingAngAmazingAng
authored
Merge pull request WTFAcademy#15 from shengxinjing/main
feat: add array
2 parents 2d97706 + 205ebb3 commit ef327f9

2 files changed

Lines changed: 217 additions & 0 deletions

File tree

‎06_Array/Array.js‎

Lines changed: 65 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,65 @@
1+
// ## 1. 数组的定义
2+
3+
// 没有元素的空数组
4+
let empty = []
5+
// 存储三个字符串的数组
6+
let courses = ["Solidity","Etherjs","Javascript"]
7+
// 存储不同数据类型的数组
8+
let mix = [1,'WTF',true]
9+
10+
// arr1是一个数组，包含两个元素，每个元素都是另外一个数组
11+
let arr1 = [
12+
[1,2,3],
13+
["Solidity","Etherjs","Javascript"]
14+
]
15+
16+
17+
// ## 2.数组的读写
18+
let arr = [1,2,3,["Solidity",true]]
19+
console.log(arr[0]) // 1
20+
// 获取嵌套数组的数据
21+
console.log(arr[3][0]) // Solidity
22+
23+
// 修改数组的第1个元素
24+
arr[1] = 6
25+
console.log(arr) //[1, 6, 3, Array(2)]
26+
27+
let arr = [1,2,3]
28+
console.log(arr.length) // 3
29+
30+
for(let course of courses){
31+
console.log("I love "+course)
32+
}
33+
// I love Solidity
34+
// I love Etherjs
35+
// I love Javascript
36+
37+
function getAverage(nums){
38+
let sum = 0
39+
for(let num of nums){
40+
sum = sum + num
41+
}
42+
return sum/nums.length
43+
}
44+
let average = getAverage([1,2,3,4,5,6])
45+
console.log(average) // 3.5
46+
47+
// i初始值是0，每次循环+1，当i小于courses长度时，就一直循环
48+
for(let i=0;i<courses.length;i++){
49+
// i就是当前的索引，通过courses[i]获取数组的值
50+
console.log(i + ": I love "+courses[i])
51+
}
52+
53+
let nums = [1,2,3]
54+
nums.push(4)
55+
console.log(nums) // [1, 2, 3, 4]
56+
let last = nums.pop()
57+
console.log(last) // 4 弹出
58+
console.log(nums) // [1, 2, 3]
59+
60+
// 数组.slice(开始位置, 结束位置)
61+
let nums = [1,2,3,4,5,6]
62+
// 从第1个到第4个的连续数据
63+
console.log(nums.slice(1,4)) // [2, 3, 4]
64+
// 只有一个参数，就是从第3个到数组结尾
65+
console.log(nums.slice(3)) // [4, 5, 6]

‎06_Array/README.md‎

Lines changed: 152 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,152 @@
1+
# WTF JavaScript 极简教程: 5. 数组
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+
这一讲，我们会介绍Javascript中用到最多的复杂类型：数组（Array)，可以把多个数据有序的存储在一起，下面我们来一起学习数组这个数据结构的`定义`,`数据读取`,`遍历`以及`增加和修改`
13+
14+
## 1. 数组的定义
15+
创建数组最简单的方式，就是在一对中括号`[]`内部用逗号`,`分割的列表，例如
16+
17+
```js
18+
// 没有元素的空数组
19+
let empty = []
20+
// 存储三个字符串的数组
21+
let courses = ["Solidity","Etherjs","Javascript"]
22+
// 存储不同数据类型的数组
23+
let mix = [1,'WTF',true]
24+
25+
```
26+
27+
数组中除了存储基础类型，也可以是另外一个数组，这样你就可以通过数组存储比较复杂的嵌套数据
28+
29+
```js
30+
// arr是一个数组，包含两个元素，每个元素都是另外一个数组
31+
let arr = [
32+
[1,2,3],
33+
["Solidity","Etherjs","Javascript"]
34+
]
35+
36+
```
37+
38+
## 2.数组的读写
39+
40+
我们可以在变量上使用中括号`[]`来读取数组元素, 需要注意的是数组的索引是从0开始计算的,你还对数组某个位置进行赋值来修改数组
41+
42+
```js
43+
let arr = [1,2,3,["Solidity",true]]
44+
console.log(arr[0]) // 1
45+
// 获取嵌套数组的数据
46+
console.log(arr[3][0]) // Solidity
47+
48+
// 修改数组的第1个元素
49+
arr[1] = 6
50+
console.log(arr) //[1, 6, 3, Array(2)]
51+
```
52+
53+
除了通过中括号读取值之外，数组变量上还有一些属性可以读取，比如每个数组的length属性会返回数组的长度
54+
55+
```js
56+
let arr = [1,2,3]
57+
console.log(arr.length) // 3
58+
59+
```
60+
61+
## 数组的遍历
62+
63+
数组中存储着多个数据，我们需要一种方式能够读取一个数组内部所有的值进行处理，最简单的就是使用for/of循环
64+
65+
```js
66+
let courses = ["Solidity","Etherjs","Javascript"]
67+
for(let course of courses){
68+
console.log("I love "+course)
69+
}
70+
// I love Solidity
71+
// I love Etherjs
72+
// I love Javascript
73+
```
74+
上面的代码中，for关键字后面的小括号中，我们使用变量`course of 数组`的方式依次读取数组，在后面的大括号`{}`内部就可以通过`course`获取数组中的每个元素
75+
76+
比如我们可以实现一个获取数组平均值的函数
77+
```js
78+
function getAverage(nums){
79+
let sum = 0
80+
for(let num of nums){
81+
sum = sum + num
82+
}
83+
return sum/nums.length
84+
}
85+
let average = getAverage([1,2,3,4,5,6])
86+
console.log(average) // 3.5
87+
88+
```
89+
90+
如果你需要知道每个元素是第几个，我们可以使用for循环,具体的语法格式如下
91+
```js
92+
for(定义数值是; 循环是否继续;每次循环结束执行){
93+
代码
94+
}
95+
```
96+
比如我们可以使用`for`循环的方式获取数组中每个元素
97+
```js
98+
let courses = ["Solidity","Etherjs","Javascript"]
99+
// i初始值是0，每次循环+1，当i小于courses长度时，就一直循环
100+
for(let i=0;i<courses.length;i++){
101+
// i就是当前的索引，通过courses[i]获取数组的值
102+
console.log(i + ": I love "+courses[i])
103+
}
104+
```
105+
上面代码中的`for/of`和`for`循环都是可以嵌套使用的，可以遍历多层
106+
## 数组的增加和修改
107+
108+
数组内置了很多的操作方法，我们这里介绍使用最多的`push`,`pop`，`slice`, 关于更多的数组操作方法可以参考 [MDN教程](https://developer.mozilla.org/zh-CN/docs/Web/JavaScript/Reference/Global_Objects/Array#%E5%AE%9E%E4%BE%8B%E6%96%B9%E6%B3%95)
109+
110+
数组中我们可以使用`push`方法在数组最后`推入`一个新数据，也可以使用`pop`方法`弹出一个数据`
111+
112+
```js
113+
let nums = [1,2,3]
114+
nums.push(4)
115+
console.log(nums) // [1, 2, 3, 4]
116+
let last = nums.pop()
117+
console.log(last) // 4 弹出
118+
console.log(nums) // [1, 2, 3]
119+
120+
```
121+
122+
数组内部还可以通过`slice`方法获取连续区域的值，我们称之为`切片`
123+
124+
```js
125+
// 数组.slice(开始位置, 结束位置)
126+
let nums = [1,2,3,4,5,6]
127+
// 从第1个到第4个的连续数据
128+
console.log(nums.slice(1,4)) // [2, 3, 4]
129+
// 只有一个参数，就是从第3个到数组结尾
130+
console.log(nums.slice(3)) // [4, 5, 6]
131+
132+
```
133+
134+
## 习题
135+
arr是一个不重复数字组成的数组，在下面新增代码，
136+
找到数组中的两个数字相加之和为18
137+
138+
```js
139+
let arr = [1,5,3,9,6,8,10,7,12] //全部是不重复的数字
140+
for(let num1 of arr){
141+
for(let num2 of arr){
142+
// 新增代码
143+
console.log(num1,num2) // num1+num2 == 18
144+
}
145+
}
146+
147+
148+
```
149+
150+
## 总结
151+
152+
这一讲我们介绍了Javascript中的数组，包括数组的定义，数组元素的读取和修改，如何遍历一个数组，数组是我们日常开发中经常用到的数据结构，还有很多操作数组的方法我们会在后续的教程里使用，你一定要好好掌握

0 commit comments

Comments
 (0)