Live Note

Remain optimistic

简单的 Array 实现

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34
35
36
37
38
39
40
41
42
43
44
45
46
47
48
49
50
51
52
53
54
55
56
57
58
59
60
61
62
63
64
65
class Array {
constructor(size = 10) {
this.arr = [] // 数组
this.size = size // 最大长度
this.elems = 0 // 成员数量
}

add(elem) {
if (this.arr.length == this.size) {
console.log("Array is full")
return
}
this.arr[this.elems++] = elem
return true
}

find(elem) {
for (let i = 0, len = this.elems; i < len; i++) {
if (this.arr[i] == elem) return i
}
return -1
}

delete(elem) {
let index = this.find(elem)
if (index == -1) {
console.log("Element not found")
return
}
for (let i = index, len = this.elems - 1; i < len; i++)
this.arr[i] = this.arr[i + 1]
this.elems--
return true
}

update(oldVal, newVal) {
// only use for unique element
let index = this.find(oldVal)
if (index == -1) {
console.log("Element not found")
return
}
this.arr[index] = newVal
return true
}

display() {
let srt = ""
for (let i = 0, len = this.elems; i < len; i++) {
srt += "" + this.arr[i] + " "
}
console.log(srt)
}

length() {
return this.elems
}
}
var arr = new Array()
arr.add(1)
arr.add(2)
arr.add(3)
arr.add(4)
arr.display()
console.log(arr.length())

结果

1
2
1 2 3 4
4

简单的 Queue 实现

数组实现

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34
35
36
37
38
39
40
41
42
43
44
class Queue {
constructor(size = 10) {
this.size = size // 队列最大长度
this.top = 0 // 首位置
this.bottom = -1 // 尾位置
this.elems = 0 // 成员个数
this.arr = [] // 队列
}

add(elem) {
if (this.elems == this.size) {
console.log("Queue is full")
return
}
if (this.bottom == this.size - 1) {
// 循环队列
this.bottom = -1
}
this.arr[++this.bottom] = elem
this.elems++
return true
}

out() {
if (this.elems == 0) {
console.log("Queue is empty")
return
}
let elem = this.arr[this.top]
this.arr[this.top] = null
this.top++
if (this.top == this.size) {
this.top = 0
}
this.elems--
return elem
}
}
var queue = new Queue()
queue.add(3)
queue.add(2)
console.log(queue.out())
console.log(queue.out())
console.log(queue.out())
Read more »

简单的 Stack 实现

数组实现

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34
35
36
37
38
39
40
41
class Stack {
constructor(size = 10) {
this.arr = [] // 栈
this.size = size // 最大长度
this.top = -1 // 栈顶
}

push(elem) {
if (this.top == this.size) {
this.size *= 2
}
this.arr[++this.top] = elem
return true
}

pop() {
let elem = this.arr[this.top--]
return elem
}

peekTop() {
if (this.top == -1) {
console.log("stack is empty")
return
}
return this.arr[this.top]
}

print() {
let str = ""
for (let i = 0; i <= this.top; i++) {
str += this.arr[i] + " "
}
console.log(str)
}
}
var stack = new Stack()
stack.push(1)
stack.push(2)
stack.pop()
console.log(stack.peekTop())
Read more »

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34
35
36
37
38
39
40
41
42
43
44
45
46
47
48
49
50
51
52
53
54
55
56
57
58
59
60
61
62
63
64
65
66
67
68
69
70
71
72
73
74
75
76
77
78
79
80
81
82
83
84
85
86
87
class Node {
constructor(data = -1, prev = null, next = null) {
this.data = data
this.prev = prev // 向前指针
this.next = next // 向后指针
}
}

class LinkList {
constructor() {
this.head = this.tail = null // 首、尾指针
this.size = 0 // 元素个数
}

addHead(elem) {
let elemNode = new Node(elem)
if (this.size == 0) {
this.head = this.tail = elemNode
this.size++
} else {
this.head.prev = elemNode
elemNode.next = this.head
this.head = elemNode
this.size++
}
return true
}

deleteHead() {
if (this.size != 0) {
let elem = this.head.data
this.head.prev = null
this.head = this.head.next
this.size--
return elem
} else {
console.log("list is empty")
return
}
}

addTail(elem) {
let elemNode = new Node(elem)
if (this.size == 0) {
this.head = this.tail = elemNode
this.size++
} else {
elemNode.prev = this.tail
this.tail.next = elemNode
this.tail = elemNode
this.size++
}
return true
}

deleteTail() {
if (this.size != 0) {
let elem = this.tail.data
this.tail.next = null
this.tail = this.tail.prev
this.size--
return elem
} else {
console.log("list is empty")
return
}
}

display() {
let current = this.head,
count = this.size,
str = ""
while (count > 0) {
str += current.data + " "
current = current.next
count--
}
console.log(str)
}
}
let linklist = new LinkList()
linklist.addHead(1)
linklist.addHead(2)
linklist.addHead(3)
linklist.deleteHead()
linklist.addTail(4)
linklist.display()

结果

2 1 4

一个简陋的 VDOM

希望以后会慢慢完善吧…

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34
35
36
37
38
39
40
41
42
43
44
45
46
47
48
49
50
51
52
53
54
55
56
57
58
59
60
61
62
63
64
65
66
67
68
69
70
let data = {
tag: "div",
children: [
{
tag: "span",
children: [
{
tag: "#text",
content: "hello world",
},
],
},
{
tag: "p",
children: [
{
tag: "#text",
content: "This is a paragraph!",
},
{
tag: "h1",
children: [
{
tag: "#text",
content: "This is a H1 tag",
},
],
},
{
tag: "h6",
children: [
{
tag: "#text",
content: "and I'm h6",
},
],
},
],
},
],
}

class VDOM {
constructor(data) {
this.tag = data.tag
this.children = data.children
this.content = data.content
}
static render(data) {
let _this = new VDOM(data)
if (_this.tag === "#text") {
return document.createTextNode(_this.content)
}
let node = document.createElement(_this.tag)
_this.children.map((child) => node.appendChild(VDOM.render(child)))
return node
}
}

let diff = (root, oldV, newV, current = 0) => {
if (!oldV) root.appendChild(newV)
else if (!newV) root.removeChild(root.childNodes[current])
else if (newV.tag !== oldV.tag || newV.content !== oldV.content)
root.replaceChild(new VDOM(newV).render(), root.childNodes[current])
// 递归判断
else
for (let i = 0; i < newV.children.length || i < oldV.children.length; i++)
diff(root.childNodes[i], oldV.children[i], newV.children[i], i)
}
document.querySelector("#root").appendChild(VDOM.render(data))

结构为:

1
2
3
4
5
6
7
8
9
10
<div id="root">
<div>
<span>hello world</span>
<p>
This is a paragraph!
<h1>This is a H1 tag</h1>
<h6>and I'm h6</h6>
</p>
</div>
</div>