Live Note

Function

function has special rules:

1. It must work for every possible input value
2. And it has only one relationship for each input value

Although each input will only have one output, but for different inputs may have the same output.

Pure function

Given all these, pure functions have a big set of advantages. They are easier to read and understand, as they do one thing. There is no need to look outside the function code and check for variables. There is no need to think how changing the value of the variable will affect other functions. No mutations in other functions will affect the result of the pure function for a specific input.
Pure functions are easier to test, as all dependencies are in the function definition and they do one thing.
For Example:

1
2
3
4
5
6
7
8
9
10

var arr = [1, 2, 3]

// Pure
arr.slice(0, 2) // [1, 2]
arr.slice(0, 2) // [1, 2]
arr.slice(2, 3) // [3]

// Impure
arr.splice(0, 2) // [1, 2]
arr.splice(0, 2) // [3]

Another Example:

1
2
3
4
5
6
7
8
9
10
11

// Impure
var sign = 3

// The return value depends on the system status
var isBigger = (num) => num > 3

// Pure
var isBigger = (num) => {
  var sign = 3
  return num > sign
}

Functional Programming

经过这几天的了解，越觉得 FP 十分有趣
给个例子:

1
2
3
4
5
6
7
8

// a simple function
function add(a, b) {
  return a + b
}
/// the same as
let add = function (a, b) {
  return a + b
}

在 ES6 中，存在着箭头函数。所以上面的函数可以写成这个形式：

1

let add = (a, b) => a + b

• background: 背景的可爱萌妹子, 当然可以自定义背景
• beautify: 代码格式化
• Dracula Official: 颜色主题
• Haskell Syntax Highlighting: Haskell 语法高亮
• HTML Snippets: HTML 自动补全
• HTML CSS Support
• JavaScript (ES6) code snippets: JS 自动补全
• Markdown PDF: 神器, 但是默认会装一个 Chromium
• npm Intellisense: 自动导入模块
• Path Intellisense: 自动补全文件名
• Quokka.js: 方便 debug
• Vetur
• vscode-icons: vscode 文件图标
• Vue 2 Snippets
• yddict(npm): 查词, 非常方便, 安装:sudo npm i yddict -g, 用法: yd hello
• http-server(npm)

邻接表

存储方式：表头存放节点，相邻节点存放于之后的链表中。
** 使用 Map 模拟 **

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23

class Graph {
  constructor() {
    this.point = []
    this.map = new Map()
  }

  addPoint(point) {
    this.point.push(point)
    this.map.set(point, [])
  }

  // 无向
  addEdge(pointA, pointB) {
    this.map.get(pointA).push(pointB)
    this.map.get(pointB).push(pointA)
  }

  print() {
    for (let item of this.point) {
      console.log(item + " -> " + this.map.get(item).join(","))
    }
  }
}

Test

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15

var graph = new Graph()
var topArr = ["A", "B", "C", "D", "E", "F", "G", "H", "I"]
for (let item of topArr) {
  graph.addPoint(item)
}

graph.addEdge("A", "B")
graph.addEdge("A", "D")
graph.addEdge("A", "E")
graph.addEdge("A", "H")
graph.addEdge("F", "G")
graph.addEdge("I", "B")
graph.addEdge("I", "C")

graph.print()

Binary Search Tree

• 若左子树不空，则左子树上所有结点的值均小于它的根结点的值。
• 若右子树不空，则右子树上所有结点的值均大于它的根结点的值。
• 左、右子树也分别为二叉排序树。
• 没有键值相等的节点。

实现

Node:

1
2
3
4
5
6
7
8

let print = (key) => console.log(key)
class Node {
  constructor(key) {
    this.key = key
    this.left = null
    this.right = null
  }
}

并查集

用集合中的某个元素来代表这个集合，该元素称为集合的代表元。
一个集合内的所有元素组织成以代表元为根的树形结构。
对于每一个元素parent[x]指向 x 在树形结构上的父亲节点。如果 x 是根节点，则令parent[x] = x。
对于查找操作，假设需要确定 x 所在的的集合，也就是确定集合的代表元。可以沿着parent[x]不断在树形结构中向上移动，直到到达根节点。

广度优先搜索

在 N * M 的网格中，从 start 走到 end 。
广度解法：需要一个队列，从 start 节点开始，当一个节点抛出时，将它周围的节点入队，直至抛出的节点是 end 节点。
模拟网格：

1
2
3
4
5
6
7
8
9
10
11

var map = [
  // map[x][y]
  [0, 0, 0, 0, 0, 0],
  [0, 0, 0, 0, 0, 0],
  [0, 0, 0, 0, 0, 0],
  [0, 0, 1, 0, 0, 0],
  [0, 0, 0, 0, 0, 0],
  [0, 0, 0, 0, 0, 0],
  [0, 0, 0, 0, 0, 2],
]
find(map)

HTML 框架

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15

<style>
  #box {
    width: 300px;
    height: 300px;
    background-color: #ddd;
  }
  #child {
    width: 200px;
    height: 100px;
    background-color: orange;
  }
</style>
<div id="box">
  <div id="child">target</div>
</div>

同源策略

• 同源策略（MDN 解释）：限制从一个源加载的文档或脚本如何与来自另一个源的资源进行交互。这是一个用于隔离潜在恶意文件的关键的安全机制。
• 源：协议、域名、端口。
• 限制：无法获取 Cookie 、 LocalStorage 和 IndexDB ，无法操作 dom ，不能发送 Ajax 。

.gitignore 文件的配置

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

# Numerous always-ignore extensions

_.bak
_.patch
_.diff
_.err

# temp file for git conflict merging

_.orig
_.log
_.rej
_.swo
_.swp
_.zip
_.vi
_~
_.sass-cache
_.tmp.html
\*.dump

# OS or Editor folders

.DS*Store
.*_
.cache
.project
.settings
.tmproj
_.esproj
_.sublime-project
_.sublime-workspace
nbproject
thumbs.db
\*.iml

# Folders to ignore

.hg
.svn
.CVS
.idea
node_modules/
jscoverage_lib/
bower_components/
dist/