JavaScript 思维导图模板_ProcessOn思维导图、流程图

引入

应用

JavaScript主要用在浏览器端，指导网页的动态行为

IDE与编辑器

FireFox

右边Hamburger图标

Web Developer

Web Console

右下角多行显示图标

嵌入到HTML

函数嵌入在HTML文件的<head></head>部分

事件嵌入到标签属性

动态的文档操作嵌入到<body></body>部分

基本语法

句子结尾没有分号

数据类型

var

ES6之前只有全局作用域和函数作用域，没有块级作用域（大括号）

意思就是if大括号里面用var定义的值在大括号外面还可以访问到

变量提升

ES6

let

具有块级作用域

不存在变量提升

暂时性死区

const

具有块级作用域

不存在变量提升

必须赋初始值，内存地址不能更改

常量值不可更改

数组等可以更改内部值

const arr = [5,6]

arr[0]=100 // 可以

arr = [100,200] // 不可以

不需要监控值的变化，使程序效率更高

转换

参考资料

javascript数据类型转换

数字转换

parseInt()

parseFloat()

类型转换

String()

toString()

Number()

Boolean()

运算符

算术运算符

+

++

-

--

*

/

%

赋值运算符

=

+=

-=

*=

/=

%=

关系运算符（Relational Operators）

参考资料

JavaScript里面三个等号和两个等号的区别

>

>=

<

<=

==

!=

比较值

类型不同先做类型转换再比较值

===

!==

比较类型和值

类型不同一定不等

逻辑运算符（Logical Operators）

&&

||

非 !

三目运算符

?:

位运算符

按位取反（~）

按位与（&）

按位或（|）

异或（^）

右移（>>）

左移（<<）

无符号右移（>>>）

语句

条件语句（Conditional Statement）

if () {} else {}

switch () {
case case1:
default:
}

循环语句（Iterative Statement）

while

for (;;)

for (in)

异常语句

try catch finally

throw throws

其他控制语句

continue

break

结尾可以不加分号，但是最好还是加上

ES6

解构赋值

let [a,b,c] = [1,2,3]

对象解构

使用变量名匹配属性名

let {name, age, sex} = {name:"张三", age:16, sex:"男"}

let {name: myName, age=myAge, sex=mySex} = {name:"张三", age:16, sex:"男"}

函数

形式

function name(parameter list){

statements in the function body

}

例子

function triangleArea(base, height) {
return (base * height) / 2;
}

ES6

箭头函数

简化函数定义语法

(形参) => {}

通过赋值箭头函数给变量，通过变量来调用

const a fn = () => {

console.log("Shit happend！");

}

只有一句代码且代码执行结果为函数返回值，

可以省略大括号

const fn = (num1, num2) => num1+num2;

形参只有一个可以省略小括号

const fn = num => alert(num);

箭头函数中没有绑定this，

this指向所在位置this对象

剩余参数

将不定数量参数表示为一个数组

function sum(first, ...args){

console.log(first);

console.log(args);

}

sum(10,20,30);

const sum = (...args) => {}

省略function关键字

参考资料

js定义函数时可以不使用function关键字么？

面向对象

没有真正的class类，直到es6

function make_dog(name) {

return {
name: name,
bark: function () {
console.log('woof') }
}

}
var wuffles = make_dog('wuffles') wuffles.bark()

ES6

类的创建

class ClassName{

// 构造方法

constructor(uname){

this.name = uname;

}

method1(){

}

类名首字母大写

所有方法（类里面叫方法，独立的叫函数）不要加function

多个方法之间不要加逗号分隔

对象的实例化

var ldh = new ClassName("刘德华");

属性的调用

ldh.uname

继承

class Son extends Father{

constructor(x,y){

super(x,y);

}

不重载父类构造方法的话也可以

数据结构

参考资料

8种常见数据结构及其Javascript实现

JavaScript之Set和Map数据结构

数组（Array） - 自带栈（Stack）

参考资料

map、reduce、filter

Js中的所有数组方法（包含ES5和ES6）

扩展运算符

与剩余参数相反，将数组拆分成逗号分隔的参数序列

...ary

转化伪数组

拓展方法

push

ary1.push(...ary2);

Array.from()

转化伪数组

var arrayLike = {

"0":"张三",

"1":"李四",

"2":"王五",

"length": 3

}

var ary = Array.from(arrayLike);

console.log(ary)

array.length

长度

集合（Set）- ES6

创建

const s = new Set();

const s = new Set([1,2,3,4,4]);

属性

长度

console.log(s.size())

CURD

增

add(value)

添加某个值，返回set本身

删

delete(value)

删除某个值，返回布尔值表示删除是否成功

clear()

清除所有人员，没有返回值

查

has(value)

返回布尔值，表示value是否为set成员

遍历

forEach(value => {})

使用回调函数遍历每个成员，没有返回值

keys()/values()

返回键名/键值的遍历器

Set 结构没有键名，只有键值（或者说键名和键值是同一个值）

entries()

返回键值对的遍历器

图（Map）- ES6

创建

set形式

const set = new Set([
['foo', 1],
['bar', 2]
]);
const m1 = new Map(set);

二维数组形式

const m2 = new Map([['baz', 3]]);

map形式

const m3 = new Map(m2);

属性

长度

console.log(m.size())

CURD

增

set(key, value)

set方法设置键名key对应的键值为value，然后返回整个 Map 结构。

如果key已经有值，则键值会被更新，否则就新生成该键。

set方法返回的是当前的Map对象，因此可以采用链式写法。

删

delete(key)

delete方法删除某个键，返回true。如果删除失败，返回false。

clear()

clear方法清除所有成员，没有返回值。

查

get(key)

get方法读取key对应的键值，如果找不到key，返回undefined。

has(key)

has方法返回一个布尔值，表示某个键是否在当前 Map 对象之中。

遍历

forEach(value => {})

使用回调函数遍历每个成员，没有返回值

keys()

返回键名的遍历器

values()

返回键值的遍历器

entries()

返回键值对的遍历器

ES5

创建

const AIRPORT_CODES = {
'ATL': 'Atlanta, GA, USA',
'ORD': 'Chicago, IL, USA',
'LHR': 'London, England, United Kingdom', 'HND': 'Tokyo, Japan',
'LAX': 'Los Angeles, CA, USA',
'CDG': 'Paris, France',
'DFW': 'Dallas/Ft Worth, TX, USA', 'FRA': 'Frankfurt, Germany',
'PEK': 'Beijing, China'
}

遍历

for (let key in map) {
let value = map[key];
}

对象

创建对象

let clerk = {
name: 'Bob Cratchit',
title: 'clerk',
salary: 25
};

访问对象

clerk.salary

JSON

（JavaScript Object Notation）

参考资料

JSON与JavaScript的关系

JSON格式语法

常用类库

字符串

参考

ES5与ES6字符串方法总结

JavaScript String 对象

js中ASCII码和字符互相转换的方法

JavaScript里面三个等号和两个等号的区别

长度

str.length

索引

str.charAt(0)

拼接

+

只要两个操作数中有一个string，+就表示拼接

子字符串

str.substring(p1, p2)

从p1到p2-1位置截取

比较

===

<, <=, >, >=

小写字母大于大写字母

搜索

str.indexOf(subString)

返回子字符串第一个字符出现的位置或者-1

str.lastIndexOf(subString)

从后往前搜索

其他一些方法

数学库（Math）

含0不含1

输入输出

输出

控制台

console.log()

弹窗

alert()

JSConsole输出

clear

print

println

log

JSConsole输入

requestInput(prompt,fn)

控制台JS文件

JSConsole.js

移动图形库（Portable Graphics Library）

图形库JS文件

JSGraphics.js

视图层

GWindow

GWindow(width, height)

GObject

GLine

GLine(x0,y0,x1,y1)

GArc

GArc(x0,y0,start_angle,sweep_angle)

GFillableObject

GRect

GRect(x,y,width,height)

GOval

GOval(x,y,width,height)

GPolygon

addVertex(x, y)

adds a new vertex relative to the reference point

addEdge(dx, dy)

adds a new vertex relative to the preceding one

addPolarEdge(r, theta)

adds a new vertex using polar coordinates

GLabel

GLabel(text, x, y)

GImage

GImage(filename, x, y))

image.scale(gw.getWidth() / image.getWidth());

getPixelArray()

使用示例

使用步骤

Step 01

定义窗口

const GWINDOW_WIDTH = 500;
const GWINDOW_HEIGHT = 300;
let gw = GWindow(GWINDOW_WIDTH, GWINDOW_HEIGHT);

Step 02

定义物体

const SQUARE_SIZE = 25;
const CIRCLE_SIZE = 20;

let x = x0 + col * SQUARE_SIZE;
let y = y0 + row * SQUARE_SIZE;
let sq = GRect(x, y, SQUARE_SIZE, SQUARE_SIZE);

sq.setFilled((row + col) % 2 !== 0);
sq.setFillColor('grey');

Step 03

添加物体到窗口

gw.add(sq);

事件层

时间（Date）

参考资料

JavaScript获取时间戳的坑

文档对象 - DOM

浏览器对象 - BOM

参考文档

JavaScript 参考

ES5、ES6、ES7文档地址

ES6 英文版

ES5 中文版与其他ES版本规范

ES6 入门教程 - 阮一峰