Skip to content

Commit

Permalink
docs: update docs
Browse files Browse the repository at this point in the history
  • Loading branch information
XPoet committed Mar 31, 2021
1 parent c7701e6 commit 77edb89
Show file tree
Hide file tree
Showing 26 changed files with 856 additions and 816 deletions.
17 changes: 11 additions & 6 deletions README.md
Original file line number Diff line number Diff line change
@@ -1,12 +1,15 @@
# JavaScript 数据结构与算法

本仓库内容根据哔哩哔哩 [coderwhy的JavaScript数据结构与算法](https://www.bilibili.com/video/BV1x7411L7Q7?p=1) 视频整理的学习笔记,视频教程讲的特别好,配合本仓库的代码测试环境来练习,学习效果更佳,欢迎同学们 Star 和 Fork。
本仓库内容根据哔哩哔哩 [JavaScript 数据结构与算法](https://www.bilibili.com/video/BV1x7411L7Q7?p=1) 视频整理的学习笔记,视频教程讲的特别好,配合本仓库的代码测试环境来练习,学习效果更佳,欢迎同学们 Star 和 Fork。

推荐大家按照目录结构的顺序来学习,由浅入深,循序渐进,轻松搞定数据结构和算法。
推荐大家按照目录顺序来学习,由浅入深,循序渐进,轻松搞定数据结构和算法。

代码部分均采用 ES6 编写,使用 webpack 和 babel 将 ES6 自动转换成 ES5。

> 重点要掌握数据结构与算法的思想,编程语言只是一种实现工具。
> 重点要掌握数据结构与算法的思想和原理,使用哪种编程语言区别不大。
**访问作者博客 [《JavaScript 数据结构与算法》](https://xpoet.cn/2020/07/JavaScript%E6%95%B0%E6%8D%AE%E7%BB%93%E6%9E%84%E4%B8%8E%E7%AE%97%E6%B3%95%E5%AD%A6%E4%B9%A0%E7%AC%94%E8%AE%B0%EF%BC%88%E4%B8%93%E8%BE%91%EF%BC%89/) 可获取更好的阅读体验。**
**[传送门 🏃](https://xpoet.cn/2020/07/JavaScript%E6%95%B0%E6%8D%AE%E7%BB%93%E6%9E%84%E4%B8%8E%E7%AE%97%E6%B3%95%E5%AD%A6%E4%B9%A0%E7%AC%94%E8%AE%B0%EF%BC%88%E4%B8%93%E8%BE%91%EF%BC%89/)**

## 文档目录

Expand All @@ -21,8 +24,9 @@
- [JavaScript 数据结构与算法(九)字典](assets/doc/09_JavaScript数据结构与算法(九)字典.md)
- [JavaScript 数据结构与算法(十)哈希表](assets/doc/10_JavaScript数据结构与算法(十)哈希表.md)
- [JavaScript 数据结构与算法(十一)树](assets/doc/11_JavaScript数据结构与算法(十一)树.md)
- [JavaScript 数据结构与算法(十二)二叉搜索树](assets/doc/12_JavaScript数据结构与算法(十二)二叉搜索树.md)
- [JavaScript 数据结构与算法(十三)图](assets/doc/13_JavaScript数据结构与算法(十三)图.md)
- [JavaScript 数据结构与算法(十二)二叉树](assets/doc/12_JavaScript数据结构与算法(十二)二叉树.md)
- [JavaScript 数据结构与算法(十三)二叉搜索树](assets/doc/13_JavaScript数据结构与算法(十三)二叉搜索树.md)
- [JavaScript 数据结构与算法(十四)图](assets/doc/14_JavaScript数据结构与算法(十四)图.md)

## 代码目录

Expand Down Expand Up @@ -50,6 +54,7 @@ npm run start
```

开启**测试环境**的服务后,可在 `src/index.js` 选择要测试的代码,查看具体值输出。
比如:我要测试****,把 `// import './Stack'` 的注释去掉,要测试哪个就去掉哪个的注释。

```js
// 导入栈结构的封装及测试代码
Expand Down Expand Up @@ -77,7 +82,7 @@ npm run start
// import './HashTable';

// 导入树结构的封装及测试代码
import './Tree';
// import './Tree';

// 导入图结构的封装及测试代码
// import './Graph';
Expand Down
Original file line number Diff line number Diff line change
Expand Up @@ -56,7 +56,7 @@
### 常见的数据结构

- 数组(Aarray)
- 栈(Queue
- 栈(Stack
- 链表(Linked List)
- 图(Graph)
- 散列表(Hash)
Expand Down
51 changes: 36 additions & 15 deletions assets/doc/02_JavaScript数据结构与算法(二)数组.md
Original file line number Diff line number Diff line change
@@ -1,55 +1,76 @@
## JavaScript 数据结构与算法(二)数组结构
# JavaScript 数据结构与算法(二)数组

几乎所有的编程语言都原生支持数组类型,因为数组是最简单的内存数据结构。
数组通常情况下用于存储一系列同一种数据类型的值。
但在 JavaScript 里,数组中可以保存不同类型的值。但我们还是要遵守最佳实践,别这么做(大多数语言都没这个能力)。

### 创建和初始化数组
## 创建和初始化数组

- new Array()
`const daysOfWeek = new Array('Sunday', 'Monday', 'Tuesday', 'Wednesday','Thursday', 'Friday', 'Saturday');`
- `new Array()`

- []
`const daysOfWeek = ['Sunday', 'Monday', 'Tuesday', 'Wednesday', 'Thursday', 'Friday', 'Saturday'];`
```js
const daysOfWeek = new Array(
"Sunday",
"Monday",
"Tuesday",
"Wednesday",
"Thursday",
"Friday",
"Saturday"
);
```

- `[]`
```js
const daysOfWeek = [
"Sunday",
"Monday",
"Tuesday",
"Wednesday",
"Thursday",
"Friday",
"Saturday",
];
```

### 数组常见操作
## 数组常见操作

#### 添加元素
### 添加元素

- 添加一个元素到数组的最后位置 `array.push(item)`
- 在数组首位插入一个元素 `array.unshift(item)`
- 在指定索引位置插入元素 `array.splice(index.js, 0, item)`
splice() 第二个参数为 0 时,表示插入数据。
- 在指定索引位置插入元素 `array.splice(index, 0, item)`
> splice() 第二个参数为 0 时,表示插入数据。
```js
let myArray = [1, 2, 3];
// 在 索引 0 的位置,插入 A
myArray.splice(0, 0, "A");
console.log(myArray); //--> ['A', 1, 2, 3]
```

#### 删除元素
### 删除元素

- 删除数组最后的元素 `array.pop(item)`
- 删除数组首位的元素 `array.shift(item)`
- 删除指定索引位置的元素 `array.splice(start, number)`
例如:
```js
let myArray2 = [1, 2, 3, 4, 5];
// 删除索引 3 位置起,2 个元素
myArray2.splice(3, 2);
// 删除索引 4 位置起,2 个元素
myArray2.splice(4, 2);
console.log(myArray2); //--> [1, 2, 3]
```

### 修改元素

- 修改指定索引位置的元素 `array.splice(index.js, 1, item)`
- 修改指定索引位置的元素 `array.splice(index, 1, item)`
```js
let myArray3 = [1, 2, 3, 4, 5, 6];
// 修改 索引 1 的位置的元素为 AA
myArray2.splice(1, 1, "AA");
console.log(myArray3); //--> [1, "AA", 3, 4, 5, 6]
```
- 修改指定索引位置的几个元素 `array.splice(index.js, number, item)`
- 修改指定索引位置的几个元素 `array.splice(index, number, item)`
```js
let myArray4 = [1, 2, 3, 4, 5, 6, 7];
// 在 索引 2 的位置起,修改两个元素为 AA BB
Expand Down
29 changes: 15 additions & 14 deletions assets/doc/03_JavaScript数据结构与算法(三)栈.md
Original file line number Diff line number Diff line change
@@ -1,9 +1,11 @@
## JavaScript 数据结构与算法(三)栈结构
## JavaScript 数据结构与算法(三)

数组是一个线性结构,并且可以在数组的任意位置插入和删除元素。
但是有时候,我们为了实现某些功能,必须对这种任意性加以限制。
栈和队列就是比较常见的受限的线性结构。

## 什么是栈

栈(stack)是一种运算受限的线性表:

- `LIFO(last in first out)`表示就是后进入的元素,第一个弹出栈空间。类似于自动餐托盘,最后放上的托盘,往往先把拿出去使用。
Expand All @@ -12,19 +14,19 @@
- 从一个栈删除元素又称作出栈或退栈,它是把栈顶元素删除掉,使其相邻的元素成为新的栈顶元素。

如下图所示:
![stack](https://user-images.githubusercontent.com/24516169/88035463-caf63780-cb74-11ea-910d-e396a83659ea.png)
![image](https://cdn.jsdelivr.net/gh/XPoet/image-hosting@master/JavaScript-数据结构与算法/image.71xt32okr3k0.png)

栈的特点:**先进后出,后进先出**

### 程序中的栈结构
## 程序中的栈结构

- 函数调用栈:A(B(C(D()))):
即 A 函数中调用 B,B 调用 C,C 调用 D;在 A 执行的过程中会将 A 压入栈,随后 B 执行时 B 也被压入栈,函数 C 和 D 执行时也会被压入栈。所以当前栈的顺序为:A->B->C->D(栈顶);函数 D 执行完之后,会弹出栈被释放,弹出栈的顺序为 D->C->B->A;

- 递归:
为什么没有停止条件的递归会造成栈溢出?比如函数 A 为递归函数,不断地调用自己(因为函数还没有执行完,不会把函数弹出栈),不停地把相同的函数 A 压入栈,最后造成栈溢出(Queue Overfloat)。

### 练习
## 练习

题目:有 6 个元素 6,5,4,3,2,1 按顺序进栈,问下列哪一个不是合法的出栈顺序?

Expand All @@ -42,9 +44,9 @@
- C 答案:6543 进栈,3 出栈,4 出栈,之后应该 5 出栈而不是 6,所以错误。
- D 答案:65432 进栈,2 出栈,3 出栈,4 出栈,1 进栈出栈,5 出栈,6 出栈。符合入栈顺序。

### 栈结构实现
## 栈结构实现

#### 栈常见的操作
### 栈常见的操作

- `push()` 添加一个新元素到栈顶位置。
- `pop()` 移除栈顶的元素,同时返回被移除的元素。
Expand All @@ -53,12 +55,11 @@
- `size()` 返回栈里的元素个数。这个方法和数组的 `length` 属性类似。
- `toString()` 将栈结构的内容以字符串的形式返回。

#### JavaScript 代码实现栈结构
### JavaScript 代码实现栈结构

```js
// 栈结构的封装
class Map {

constructor() {
this.items = [];
}
Expand Down Expand Up @@ -90,16 +91,16 @@ class Map {

// toString() 返回以字符串形式的栈内元素数据
toString() {
let result = '';
let result = "";
for (let item of this.items) {
result += item + ' ';
result += item + " ";
}
return result;
}
}
```

#### 测试封装的栈结构
### 测试封装的栈结构

```js
// push() 测试
Expand All @@ -124,7 +125,7 @@ console.log(stack.size()); //--> 2
console.log(stack.toString()); //--> 1 2
```

### 栈结构的简单应用
## 栈结构的简单应用

利用栈结构的特点封装实现十进制转换为二进制的方法。

Expand All @@ -142,7 +143,7 @@ function dec2bin(dec) {
dec = Math.floor(dec / 2); // 除数除以二,向下取整
}

let binaryString = '';
let binaryString = "";
// 不断地从栈中取出元素(0 或 1),并拼接到一起。
while (!stack.isEmpty()) {
binaryString += stack.pop();
Expand All @@ -152,7 +153,7 @@ function dec2bin(dec) {
}
```

#### 测试
### 测试

```js
// dec2bin() 测试
Expand Down
43 changes: 21 additions & 22 deletions assets/doc/04_JavaScript数据结构与算法(四)队列.md
Original file line number Diff line number Diff line change
@@ -1,6 +1,6 @@
## JavaScript 数据结构与算法(四)队列结构
# JavaScript 数据结构与算法(四)队列

### 认识队列
## 认识队列

队列(Queue)是一种运算受限的线性表,特点:先进先出。(FIFO:First In First Out)

Expand All @@ -14,25 +14,25 @@
- 排队,比如在电影院,商场,甚至是厕所排队。
- 优先排队的人,优先处理。 (买票、结账、WC)。

![queue](https://user-images.githubusercontent.com/24516169/88038526-e9f6c880-cb78-11ea-859d-1faaaebed3bf.png)
![image](https://cdn.jsdelivr.net/gh/XPoet/image-hosting@master/JavaScript-数据结构与算法/image.5mmiw2kdwbs0.png)

#### 队列图解
### 队列图解

![queue](https://user-images.githubusercontent.com/24516169/88038782-45c15180-cb79-11ea-8439-bdc7e240d10d.png)
![image](https://cdn.jsdelivr.net/gh/XPoet/image-hosting@master/JavaScript-数据结构与算法/image.mq92bw3am0g.png)

#### 队列在程序中的应用
### 队列在程序中的应用

- 打印队列:计算机打印多个文件的时候,需要排队打印。
- 线程队列:当开启多线程时,当新开启的线程所需的资源不足时就先放入线程队列,等待 CPU 处理。

### 队列的实现
## 队列的实现

队列的实现和栈一样,有两种方案:

- 基于数组实现。
- 基于链表实现。

#### 队列常见的操作
### 队列常见的操作

- `enqueue(element)` 向队列尾部添加一个(或多个)新的项。
- `dequeue()` 移除队列的第一(即排在队列最前面的)项,并返回被移除的元素。
Expand All @@ -41,11 +41,10 @@
- `size()` 返回队列包含的元素个数,与数组的 length 属性类似。
- `toString()` 将队列中的内容,转成字符串形式。

#### 代码实现
### 代码实现

```js
class Queue {

constructor() {
this.items = [];
}
Expand Down Expand Up @@ -77,25 +76,25 @@ class Queue {

// toString() 将队列中的元素以字符串形式返回
toString() {
let result = '';
let result = "";
for (let item of this.items) {
result += item + ' ';
result += item + " ";
}
return result;
}
}
```

#### 测试代码
### 测试代码

```js
const queue = new Queue();

// enqueue() 测试
queue.enqueue('a');
queue.enqueue('b');
queue.enqueue('c');
queue.enqueue('d');
queue.enqueue("a");
queue.enqueue("b");
queue.enqueue("c");
queue.enqueue("d");
console.log(queue.items); //--> ["a", "b", "c", "d"]

// dequeue() 测试
Expand All @@ -116,13 +115,13 @@ console.log(queue.size()); //--> 2
console.log(queue.toString()); //--> c d
```

### 队列的应用
## 队列的应用

使用队列实现小游戏:**击鼓传花**

分析:传入一组数据集合和设定的数字 number,循环遍历数组内元素,遍历到的元素为指定数字 number 时将该元素删除,直至数组剩下一个元素。

#### 代码实现
### 代码实现

```js
// 利用队列结构的特点实现击鼓传花游戏求解方法的封装
Expand Down Expand Up @@ -161,11 +160,11 @@ function passGame(nameList, number) {
}
```

#### 测试代码
### 测试代码

```js
// passGame() 测试
const names = ['lily', 'lucy', 'tom', 'tony', 'jack'];
const names = ["lily", "lucy", "tom", "tony", "jack"];
const targetIndex = passGame(names, 4);
console.log('击鼓传花', names[targetIndex]); //--> lily
console.log("击鼓传花", names[targetIndex]); //--> lily
```
Loading

0 comments on commit 77edb89

Please sign in to comment.