JS 知识点思维导图

变量

原始值储存在栈内存中变量名存储在栈内存，变量数据存储在堆内存

数据类型

简单数据类型

Number

数字

进制

十进制

八进制

以 0 开头，由0~7组成

十六进制

以 0x 开头，由 0~9，a~f 组成

浮点数

会出现精度丢失，不要进行浮点数的比较

NaN

不是一个数字

isNaN()

判断是否为 NaN

无穷

Infinity

无穷大

-Infinity

无穷小

String

字符串

字符串类型的内容必须使用引号包裹

""

双引号

''

单引号

转义符

\n

换行

\t

制表符

\b

空格

\r

回车

属性

length

字符串长度

拼接

+

方法

trim() 去除字符串两侧的空格

Boolean

布尔

false

false 为 0

假

true

true 为 1

真

Null

空

Undefined

无定义

undefined + number = NaN

复杂数据类型

Object

对象

相关属性和方法的集合

创建

var objName = {};

var objName = { key:value, funcName: function () { 方法体 } }

var obj = new Object();

通过给对象添加属性和方法来添加对象内容

通过自定义构造函数来声明

调用

属性

对象名.属性名

对象名['属性名']

方法

对象名.方法名()

操作

增

对象名.属性名 = 属性值

删

delete 对象名.属性名

改

对象名.属性名 = 新的属性值

查

对象名.属性名

将对象名换成方法名，就是对方法的增删改查

遍历

for (let i in obj) { if (obj[i]) { console.log(obj[i]) } }

A instanceof B

对象A是否由B构造函数构造出来的

内置对象

js 提供的对象，内部包含一些常用的属性和方法

Math

Math中的属性和方法都是静态的，不是函数对象

属性

PI 圆周率

方法

max() 最大值

没有参数放回 -Infinity

abs() 绝对值

floor() 向下取整

ceil() 向上取整

round() 四舍五入

负数往大的取

有无法转换为数字类型的变量，直接返回 NaN

random() 随机数

公式: Math.floor(Math.random() * (max - min + 1)) + min min 和 max 之间的随机数（包含min 和 max）

返回 [0,1) 的浮点数

无需参数

Date

需要实例化一个对象，来使用 Date 的属性和方法

参数

无参数

输出当前时间

有参数

‘2021-9-20 9:00:00’

方法

getFullYear()

获取当前年份

getMonth()

获取当前月份（0-11）

getDate()

获取当前日期

getDay()

星期天为 0

获取当前星期几（0-6）

getHours()

获取当前小时

getMinutes()

获取当前分钟

getSeconds()

获取当前秒

时间格式化

获取时间戳

当前时间距1970年1月1日的毫秒数

getTime()

计数器

function timeDifference(date) { var nowtime = new Date().getTime(); // 现在时间转换为时间戳 var futruetime = new Date(date).getTime(); // 设置时间转换为时间戳 var msec = nowtime-futruetime; // 毫秒现在时间-设置时间 var time = (msec/1000); // 毫秒/1000 var day = parseInt(time/86400); // 天 24*60*60*1000 var hour = parseInt(time/3600)-24*day; // 小时 60*60 总小时数-过去的小时数=现在的小时数 var minute = parseInt(time%3600/60); // 分 -(day*24) 以60秒为一整份取余剩下秒数秒数/60 就是分钟数 var second = parseInt(time%60); // 以60秒为一整份取余剩下秒数 return { day: day, hour: hour, minute: minute, second: second }; }

Date.now()

H5新加

+new Date()

无参

当前时间毫秒数

有参

输入时间毫秒数

Array

数组

创建

let arr = new Array();

let arr = [];

用逗号来分隔元素列表

arr[index]

获取 arr 数组中位于 index 索引位置的数据

数组 index 索引是从0开始的

二维数组

let arr = [][];

属性

length

数组长度

遍历

for (let i in arr) { code } i 为数组索引 for (let item of arr) { code } item 为数组元素使用迭代遍历数组

将数组中的元素从第一个到最后一个全部取出来

判断对象是否为数组

Array.isArray(对象)

H5新加

方法

添加

push()

尾部添加

unshift

头部添加

放回改变后数组的长度

删除

pop()

删除最后一位元素

shift()

删除第一个元素

返回删除的元素的值

翻转

reverse()

升序排序

sort()

arr.sort(function(a,b){ return a-b;//升序 return b-a;//降序 });

索引

indexOf()

查找元素在数组中的索引返回第一个满足条件的

没有找到该元素，返回 -1

lastIndexOf()

从后往前找

转换为字符串

toString()

join()

无参数使用逗号分隔

参数为分隔符

Set

集合

集合内元素具有唯一性

声明赋值

声明方式

var

声明一个变量，可初始化一个值

let

声明一个块作用域局部变量，可初始化一个变量

尽可能使用 let 声明变量而不是 var

const

声明一个块作用域局部常量

常量无法重新赋值

var name = value;

同时声明多个变量，用英文状态下的逗号隔开

声明变量但为初始赋值，则其值为undefined

命名规则

变量名必须以英文字母、$、_ 开头

变量名不能以关键字和保留字命名

区分大小写

命名规范

变量名必须由意义

遵循驼峰命名法

首单词小写，后面的单词首字母大写

方法

typeof

获取变量数据类型

类型转换

隐式转换：系统自动将数据类型进行转换

toString()

将变量转换为字符串

null 和 undefined 没有 toString 方法

String()

将 null 和 undefined 转换为字符串时使用

隐式转换

在拼接的数据之间用 + 连接（数据中有一个字符串类型数据）

Number()

将数据转换为数字类型

parseInt()

遇见数字就转换，遇见非数字就返回第一个字符就是非数字就返回 NaN

将数据转换为整数

parseFloat()

将数据转换为浮点型

隐藏转换

在数据前面加上 - 或 *，/，也可以将数据转换成数字类型

转换布尔类型数据返回 NaN

Boolean()

将数据转换为布尔类型

false

null

undefined

‘’ 空字符串

0

NaN

true

操作符

算数运算符

+

加

-

减

*

乘

/

除

%

取余

**

ES6 加入

幂

浮点数计算，精度会出现问题尽量避免直接使用浮点数进行计算

解决方法：将浮点数乘以百、千、万，使其成为整数进行计算；得到结果后，将结果除以百、千、万，回到原来的数值

一元运算符

配合变量进行使用

--

自减

++

自增

前置

先自变，后返回

后置

先返回，后自变

比较运算符

>

大于

小于

==

等于

会默认转型

>=

大于等于

小于等于

!=

不等于

===

全等

!==

不全等

逻辑运算符

&&

两个都是真才是真,否则为假

与

||

两个其中一个为真就是真，两个都是假才是假

或

！

取反

非

返回值为布尔类型

短路运算

逻辑与

第一个为真，返回第二个值

第一个为假，直接返回第一个值

逻辑或

第一个为真，直接返回第一个值

第一个为假，返回第二个值

赋值运算符

=

+=

num=num+1 => num+=1

-=

num=num-1 => num-=1

*=

num=num*1 => num*=1

/=

num=num/1 => num/=1

%=

num=num%1 => num%=1

流程控制

顺序结构

从上向下依次执行

分支结构

if

单分支

if

if(表达式){ code } 表达式为真，执行 code 否则不执行 code，继续执行后面的代码

双分支

if-else

if(表达式){ code1 }else { code2 } 表达式为真，执行 code1, 否则执行 code2

多分支

if-else if-else

if (表达式1) { code1 }else if(表达式2) { code2 }else { code3 } 满足表达式1，执行 code1，满足表达式2，执行 code2, 最后执行 code3

switch

switch(表达式) { case value1 : code1; break; case value2 : code2; break; ... default: code } 表达式的值与后面的选项值匹配，则执行对应的 code，否则执行 default 中的 code

选项中break未写，会继续执行后面选项的代码

三元表达式

表达式 ? value1 : value2 表达式为真，输出 value1 否则输出 value2

循环结构

for

for (初始化变量; 终止条件; 操作表达式) { code }

while

while(条件表达式){ code } 满足条件表达式，进入 while 循环，执行code

do-while

do { code }while(条件表达式) 先执行一次 code 再进行判断

枚举

for (let i in obj) { code }

跳出循环

continue

结束本次循环，进入下一次循环

break

结束整个循环

this

全局作用域

this === window

方法

谁调用，指向谁

构造函数

指向构造函数实例

箭头函数

上下文

执行队列

同步任务

按照顺序执行

执行栈

异步任务

回调才执行

任务队列

先执行执行栈中的任务，当执行栈执行完以后，再将任务队列中的任务放在执行栈中执行

事件循环

执行执行栈中的任务，再将任务队列中的任务放入执行栈，再执行执行栈的任务，再看任务队列有没有任务需要放入执行栈执行

特效

offset 偏移量

offsetLeft

到定位父元素左边框的距离

offsetTop

到定位父元素上边框的距离

父元素没有定位，以 body 为准

offsetWidth

元素宽度

offsetHeight

元素高度

包括 padding 和 border

offsetParent

返回带有定位的父元素

没有，则返回 body

offset 与 style 的区别

offset 只读，style 可读写

offset 包括内边距和边框，style 不包括

offset 没有单位，style 有单位

client 可视区

clientLeft

clientTop

clientWidth

元素的宽度

clientHeight

元素的高度

包含 padding，不包含 border

scroll 滚动

scrollWidth

元素内容的宽度

scrollHeight

元素内容的高度

包含 padding，不包含 border

scrollTop

元素内容顶部到元素上边框的距离

scrollLeft

元素内容左边框到元素左边框的距离

pageYOffset

与scrollTop效果相同

pageXOffset

与scrollLeft效果相同

window.scroll(x, y)

滚动到指定的位置

不要单位

动画

原理：通过定时器使元素不断变化来实现动画

元素必须加定位

BOM

浏览器·对象模式

window 为全局顶级变量

load

等待页面内容全部加载完才调用

DOMContentLoased

DOM 结构加载完就调用

弹窗

alert()

浏览器弹窗显示

prompt()

浏览器弹窗输入

定时器

Interval

循环

setInterval(function, time)

clearInterval(定时器对象)

每次开启定时器之前，都清除一下定时器防止同时开启多个定时器

Timeout

一次性

setTimeout(function, time)

clearTimeout(定时器对象)

控制器

console

log()

打印内容

dir()

打印 Element 对象的属性和方法

事件

resize

窗口大小发生变化

URL

location

href

地址

sreach

参数

reload

刷新

系统信息

navigator

userAgent

浏览器相关信息

历史记录

history

forward()

前进

back()

回退

go(number)

根据number参数进行操作

正数前进

负数后退

本地存储

将数据存储在浏览器中

sessionStorage

关闭浏览器时，销毁

同一个窗口下数据可以共享

以键值对的形式存储

方法

setItem(key,value)

存储数据

getItem(key)

获取数据

removeItem(key)

移除数据

clear()

清除全部数据

localStorage

数据可长期保存

多窗口可共享

键值对是以字符串形式储存

方法

setItem(key,value)

存储数据

getItem(key)

获取数据

removeItem(key)

移除数据

clear()

清除全部数据

DOM

文档对象模型可以改变页面的结构，元素，样式

获取元素

对象为 document 也可以是父元素 Element

getElementById('IdName')

通过 Id 名获取元素

getElementsByTagName('tagName')

通过标签名获取元素

getElementsByClassName('className')

通过 class 名获取元素

querySelector('selector')

通过选择器获取第一个元素

querySelectorAll('selector')

通过选择器获取所有的元素

可以使用复杂选择器

返回 Element 对象

获取 body元素

document.body

获取 html 元素

document.documentElement

添加元素

对象为 document

write('标签')

重绘页面

不推荐使用

修改元素

innerText

function getInnerText (element) { if (typeOf element.innerText === 'string') { return element.innerText; } else {//兼容火狐浏览器 return element.textContent; } }

获取元素的文本，不包含标签会自动去除空格和换行

element.innerText = "修改的内容"

Firefox 不支持

Firefox 提供了和它相同效果的属性 textContent

innerHTML

获取元素的内容，包含标签

element.innerHtml = "修改的内容"

可读写

事件

三要素

事件源

事件类型

鼠标

click

点击

focus

获得焦点

blur

失去焦点

mouseover

鼠标经过

mouseout

鼠标离开

mousemove

鼠标移动

键盘

keydown

键盘按下

keypress

键盘按下

keyCode 区分大小写

keyup

键盘弹起

事件处理程序

btn.onclick = function () {} btn 为事件源 onclick 为事件类型 function () {} 为事件处理程序

事件绑定

ele.onxxx = function(event){}

兼容行好，但一个事件只能有一个处理函数

obj.addEventListener(事件类型, 处理函数, 事件流)

一个事件可以有多个处理函数

IE 9以上版本才支持

第三个参数

true 事件捕获

false 事件冒泡

ele.attachEvent('on' + 事件类型，处理函数);

IE独占

事件解绑

ele.onxxx = null;

obj.removeEventListener(事件类型, 处理函数, false);

ele.detachEvent('on' + 事件类型，处理函数);

修改样式

Element.style

行内样式

样式属性采用驼峰命名法

例子：div.style.backgroundColor = '#ccc'

Element.className

更改 Element 元素的 class

例子：div.className = 'change'

修改属性

Element.属性

例子：div.id = 'box'

class 特殊，应该使用 className

classList

IE10版本以上才支持

获取元素全部类名

方法

add()

添加类名

remove()

移除类名

toggle()

有就移除，没有就添加

切换类名

自定义属性

H5 规范

自定义属性以 data- 开头

例子：data-index

Element.dataset.属性名

获取以 data- 开头的自定义属性

返回值为一个集合

属性名采用驼峰命名法

IE 11 以上版本才兼容

例子：div.dataset.index

Element.getAttribute('属性名')

获得自定义属性

例子：li.getAttribute('data-index')

Element.setAttribute(‘属性名’, ‘属性值’)

设置自定义属性

例子：li.setAttribute('data-index','1')

Element.removeAttribute('属性名')

移除属性

例子：li.removeAttribute('data-index')

节点

页面中的所有内容都是节点

nodeType

节点类型

元素节点 -- 1

属性节点 -- 2

文本节点 -- 3

注释节点 -- 8

document -- 9

该节点的类型，只读

nodeName

节点名称

元素的标签名，以大写形式表示，只读

nodeValue

节点值

Text节点或Comment节点的文本内容，可读写

节点关系

父节点

parentNode

没有父节点，返回 null

子节点

childNodes

子节点们

包含全部的子节点，包括元素节点和文本节点等等

children

子元素节点

返回一个伪数组

firstChild

第一个子节点

lastChild

最后一个子节点

firstElementChild

第一个子元素节点

lastElementChild

最后一个子元素节点

IE 9以上版本兼容

兄弟节点

nextSibling

下一个兄弟节点

previousSibling

上一个兄弟节点

nextElementSibling

下一个兄弟元素节点

previousElementSibling

上一个兄弟元素节点

没有兄弟节点。则返回 null

创建节点

document.createElement('节点元素')

创建元素节点

添加节点

node.appendChild(节点)

node.insertBefore(节点，参考节点)

在参考节点前面添加节点

删除节点

node.removeChild(节点)

复制节点

node.cloneNode()

参数为空或 false，则只复制元素，不复制内容

事件流

页面接收事件的顺序

事件冒泡

从里到外

事件捕获

从外至里

事件对象 event

事件相关数据的集合

事件函数会默认接收事件对象当作参数

target

绑定事件的对象的相关属性集合

阻止行为

preventDefault()

阻止浏览器默认行为

return false 也可以阻止浏览器默认行为

stopPropagation()

阻止事件冒泡

坐标

clientX

可视区X轴坐标

clientY

可视区Y轴坐标

pageX

文档页面X轴坐标

pageY

文档页面Y轴坐标

keyCode

键盘事件的触发的按键的 ASCII 值

函数

可复用的代码块

声明

function funcName (参数) { 函数体 return 返回值; }

没有 return 返回 undefined

调用

funcName()

函数之间可以互相调用

封装

将一个或多个功能模块通过函数的方式包裹起来，对外提供简单的接口

参数

可以没有，也可以有多个

形参

声明函数时使用的参数

实参

调用函数时使用的参数

形参用来接收实参

参数之间用逗号来隔开

arguments

不确定参数的时候，可以使用

当前对象的内置对象，存储传递过来的所有实参

所有函数都有arguments对象，也只有函数才有arguments对象

arguments 是伪数组

function (...arr) {}

将传入的所有参数包装在 arr 数组中

return

抛出一个返回值;

终止函数

匿名函数

var funcName = function (参数){ 函数体 return 返回值; }

一般用来配合事件使用

立即执行函数

(function (形参) { return 返回值; } (实参))

函数执行完，立即销毁

立即执行函数内部是一个独立的作用域

构造函数

function 构造函数名称(参数...) { this.属性名: 属性值, this.方法名: function() { } }

将对象的属性和方法封装起来的函数

构造函数名称首字母大写

构造函数不需要 return，就可以返回结果

构造函数中的属性值和方法可以通过参数来设置

预解析

变量提升

js 引擎会将 var 声明变量提升到当前作用域最前面，但不提升赋值操作

函数提示

js 引擎会将函数声明提升到当前作用域最前面，但不调用函数

作用域

限制代码名字可用性的代码范围

全局作用域

单独的 js 文件

局部作用域

函数内部的范围

块级作用域

一对大括号包围的范围

变量

全局变量

在全局作用域中的变量

没有声明直接赋值的变量

关闭浏览器才销毁

局部变量

在局部作用域中的变量

函数的形参

程序执行完毕就销毁

作用域链

内部函数访问外部函数的变量使用链式查找方式访问变量

就近原则

注释

//

单行注释

/**/

多行注释

组成

DOM

文档对象模型

BOM

浏览器对象模型

ECMAScript

语法规则

移动端

事件

touchstart

手指触碰

touchmove

手指移动

touched

手指离开

事件对象属性

touches

触摸手指列表

targetTouches

正在触摸手指的列表

changeTouches

手指状态改变的列表

返回值为伪数组