导图社区 JavaScript高级程序设计核心知识

JavaScript高级程序设计核心知识

整理JavaScrpt高级程序设计第4版核心知识思维导图。

编辑于2020-10-08 14:19:18

Web前端

前端挖矿工

他的近期作品查看更多>>

JavaScript高级程序设计核心知识

社区模板帮助中心，点此进入>>

前端挖矿工

他的近期作品查看更多>>

相似推荐
大纲

互联网9大思维
- 34.0k
- 915
- 2.4k
- 392
MindMaster
组织架构-单商户商城webAPP 思维导图。
- 14.6k
- 3
- 184
- 10
Kacyun
域控上线
- 1.6k
- 163
- 11
- 4
jackrao
python思维导图
- 5.4k
- 529
- 242
- 7
(*^▽^*)
css
- 1.2k
- 1
- 43
- 3
A张舫
CSS
- 3.3k
- 262
- 188
- 33
journey
计算机操作系统思维导图
- 4.2k
- 338
- 204
- 18
journey
计算机组成原理
- 1.5k
- 98
- 70
- 8
journey
IMX6UL(A7)
- 514
- 40
- 5
- 0
Handler XU
考试学情分析系统
- 688
- 50
- 10
- 1
蒋龙

JavaScript 核心知识

基础知识

什么是 JavaScript

ECMAScript

ECMAScript 由 ECMA-262 定义并提供核心功能：语法、类型、语句、关键字、保留字、操作符、全局对象

DOM

DOM 是一种手段和工具，使得 JavaScript 可以操作 HTML DOM Level1：目标映射文档结构 DOM Level2 新增模块：- DOM 视图- DOM 事件- DOM 样式- DOM 遍历和范围 DOM Level3:- 统一方式加载和保持文档的方法 DOM4 新增：- Mutations Observers 替代 Mutations Events

BOM

BOM 是一种手段和工具，使得 JavaScript 可以访问和操作浏览器  弹出新浏览器窗口的能力； 移动、缩放和关闭浏览器窗口的能力； navigator 对象，提供关于浏览器的详尽信息； location 对象，提供浏览器加载页面的详尽信息； screen 对象，提供关于用户屏幕分辨率的详尽信息； performance 对象，提供浏览器内存占用、导航行为和时间统计的详尽信息； 对 cookie 的支持； 其他自定义对象，如 XMLHttpRequest 和 IE 的 ActiveXObject。

脚本定义

async 异步属性：异步下载和执行脚本，不阻止其他页面动作，脚本文件执行没有顺序，谁先下载下来谁先执行，异步脚本保证会在页面的 load 事件前执行 defer 推迟属性：告诉浏览器立即下载，但脚本可以延迟到文档完全被解析和显示之后再执行，执行时机在DOMContentLoaded 事件之前执行，并且按脚本文件顺序执行 crossorigin：配置相关请求的CORS（跨源资源共享）设置 integrity：允许比对接收到的资源和指定的加密签名以验证子资源完整性，作用于确保内容分发网络（CDN）不会提供恶意内容。 src：表示包含要执行的代码的外部文件。浏览器外部资源可以被缓存 type：表示代码块中脚本语言的内容类型 JS 引擎是单线程，放在 head 里的脚本会被下载和执行，阻塞页面加载，把脚本放在body下，交互体验和性能更好

内嵌脚本

外部脚本（CDN)

变量声明

var 声明变量提升 let 和 const 声明1、暂时性死区，形成块级作用域2、必须先声明后使用，不会出现变量提升，不能重复声明3、不会挂载在 window 上4、const 声明必须初始化，不能重新赋值

var

let

const

数据类型

基本类型

1、按值传递、赋值的是值的副本2、存放在栈内存中3、通过 typeof 判断，它返回是字符串类型，值类型有："number", "string", "boolean", "undefined", "symbol", "object", "function"

null

1、表示空值，typeof null 等于 "object"2、可以用来清空内存

undefined

undefined 场景1、let、var 未初始值2、函数参数未接收到实惨3、函数不能返回值4、访问不存在到对象属性值

string

字符字面量：\n 换行、\t 制表、\b 退格、\r 回车、\f 换页切换字符方法：slice、substring、substr。substr 第二个参数返回切割的多少个字符，slice、substring 第二个参数返回切割字符的结尾位置 indexOflastIndexOfconcattrimtrimLeft()trimRight()toLowerCase、toLocaleLowerCasetoUpperCase、toLocaleUpperCase 转化为大写localeCompare 比较两个字符串 includesstartsWithendsWithtoFixedpadStartpadEndrepeat split 转化为数组search 返回第一个匹配的下标match 返回数组replace 替换字符

模版字符

number

parseInt：接收两个参数，第二个参数可选，表示可以转化的进制数，2，8，16，如果解析失败就停止解析 parseFloat：同理，从位置 0 开始检测每个字符，解析到一个无效的浮点数值字符为止 isInteger、isSafeInteger 判断整数数学计算库： mathjs、decimal.js

boolean

转化为 false 值：false、'' 、0、NaN、null、undefined

symbol

Symbol用于防止属性名冲突而产生的，比如向第三方对象中添加属性时。Symbol 的值是唯一的，独一无二的不会重复的 Symbol 不能使用 for-in、for-of 遍历，可以使用 Object.getOwnPropertySymbols 获取所有 Symbol 属性遍历。或者 Reflect.ownKeys(obj) Symbol.for()Symbol.keyFor 根据使用 Symbol.for 登记的 Symbol 返回描述Symbol.iterator => @@iteratorSymbol.asyncIterator 表示实现异步迭代器 API 的函数Symbol.hasInstanceSymbol.matchSymbol.replaceSymbol.searchSymbol.speciesSymbol.splitSymbol.toPrimitiveSymbol.toStringTag

引用类型

1、按引用传递，拷贝的是引用的指针2、引用类型通过 instanceof(检测构造函数的 prototype 属性是否出现在某个实例对象的原型链上)、toString 判断3、存放在堆内存中

Object

属性constructor 方法hasOwnPropertyisPrototyOfpropertyIsEnumerabletoLocaleStringtoStringvalueOf

Array

原方法：pushpopshiftunshiftsortreverse 反序，改变原数组joinslicespliceconcatindexOflastIndexOf includesisArray of 将参数转化为数组from 将类数组转化为数组，比如 Map、元素集合copyWithinfill keyvaluesentries 迭代数组mapforEachfilterreducereduceRightsomeeveryfindfindIndex ArrayBuffer

Function

Date

getFullYear 年getMonth 月gerDate 日getDay 星期getHours 小时getMinutes 分钟getSeconds 毫秒getTime 日期毫秒 JavaScript 时间库http://momentjs.cn 或英文官网 https://momentjs.com

RegExp

 g：全局模式，表示查找字符串的全部内容，而不是找到第一个匹配的内容就结束。 i：不区分大小写，表示在查找匹配时忽略 pattern 和字符串的大小写。 m：多行模式，表示查找到一行文本末尾时会继续查找。 y：粘附模式，表示只查找从 lastIndex 开始及之后的字符串。 u：Unicode 模式，启用 Unicode 匹配。 s：dotAll 模式，表示元字符.匹配任何字符（包括\n 或\r）。方法search()match()matchAll()split()replace() 正则方法test()exec()

JSON

JSON.parse 反序列化JSON.stringify 序列号toJSON()它接收三个参数，第一个是序列号和反序列化的值；第二个参数是函数，他有两个参数 key, value，可以根据 key 做相应的操作，比如数据过滤；第三个参数控制字符串缩进。

Math

minmaxround 四舍五入ceil 向上取整floorrandom

Error

运算符和流程控制

运算符

算术运算符

加、减、乘、除、取模

复合运算符

一元运算符

比较运算符

逻辑运算符

流程控制

条件

if、switch、三目运算符

循环

for、do……white、whitefor……in 遍历对象for……of 变量数组、字符串、Map、Set

变量、作用域与内存

原始值与引用值

原始值1、按值访问，拷贝值的副本，存储在栈中2、原始值大小固定引用值1、按引用访问，拷贝地址的指针，存储在堆中2、大小不固定

执行上下文与作用域

执行上下文全局执行上下文、函数执行上下文、eval 函数执行上下文变量对象存放执行上下文的所有变量和函数活动对象代码正在执行的上下文是函数作用域全局作用域、函数作用域、块级作用域。作用域是变量起作用的范围代码执行流每进入一个新上下文，都会创建一个作用域链，用于搜索变量和函数变量的执行上下文用于确定什么时候释放内存

垃圾回收

自动内存管理实现内存分配和闲置资源回收

标记清除

标记清理JavaScript 最常用的垃圾回收策略当变量进入上下文，比如在函数内部声明一个变量，这个变量会被打上标记，不会被释放它的内存，当变量离开上下文它会被加上离开上下文的标记，等到合适的时机回收它的内存

引用计数

引用计数不是常用的垃圾回收策略对每个值都记录它被引用的次数。当一个值的引用数为 0 时，就说明没办法再访问到这个值了，因此可以安全地收回其内存了。

性能

写代码要尽快释放内存，特别是注册事件或引用第三方库的时候。

内存管理

内存管理1、通过 const 和 let 声明提升性能。这两个关键字可能会更早地让垃圾回收程序介入，尽早回收应该回收的内存2、隐藏类和删除操作。new 多个实例会使用同一个隐藏类，删除属性可以使用 null 赋值，避免使用 delete，还是使用同一个隐藏类，性能更好3、内存泄露没有回收应该回收的内存空间，造成内存泄露4、静态分配与对象池减少浏览器执行垃圾回收的次数，减少 new 频繁分配内存空间的次数

集合引用类型

Set

用于存储任何类型的唯一值，无论是基本类型还是对象引用。 1、只能保存值没有键名2、严格类型检测如字符串数字不等于数值型数字3、值是唯一的4、遍历顺序是添加的顺序，方便保存回调函数属性size 方法add()has()delete()clear()keys()values()entries()

WeakSet

WeakSet结构同样不会存储重复的值，它的成员必须只能是对象类型的值垃圾回收不考虑WeakSet，即被WeakSet引用时引用计数器不加一，所以对象不被引用时不管WeakSet是否在使用都将删除因为WeakSet 是弱引用，由于其他地方操作成员可能会不存在，所以不可以进行 forEach( ) 遍历等操作也是因为弱引用，WeakSet 结构没有keys( )，values( )，entries( )等方法和size属性因为是弱引用所以当外部引用删除时，希望自动删除数据时使用 WeakMap属性size方法add()has()delete()

Map

属性size 方法set()get()delete()clear()has()keys()values()entries()

WeakMap

键只能是 Object，或基础于 Object。没有迭代方法属性size 方法set()get()delete()has()

函数

默认参数

rest 参数

箭头函数

递归调用

1、不确定循环调用次数2、要有结束条件

this 用法

普通函数调用

指向 window

new 构造函数调用

指向新创建的对象

对象方法调用

指向该对象

call、apply 调用

指向被调用的第一个参数，null 值指向 window

BOM

window 对象

Global 作用域

窗口关系

self、top、parent

窗口位置与像素比

窗口位置：moveTo 和 moveBy像素比：window.devicePixelRatio

窗口大小

innerWidth、innerHeight、outerWidth 和 outerHeight。 outerWidth 和 outerHeight 返回浏览器窗口自身的大小（不管是在最外层 window 上使用，还是在窗格<frame>中使用）。innerWidth和 innerHeight 返回浏览器窗口中页面视口的大小（不包含浏览器边框和工具栏）。 resizeTo()和resizeBy() 调整窗口大小

location

页面加载信息 replace()reload() 有可能从缓存中获取reload(true) 从服务器获取assign

navigator 对象

获取浏览器信息

screen 对象

history 对象

go()back()forwark() hashchange 事件：在页面 URL 的散列变化时被触发 history.pushState()：让开发者改变浏览器 URL 而不会加载新页面，接收 3 个参数：一个 state 对象、一个新状态的标题和一个（可选的）相对 URL。history.pushState(stateObject, "My title", "baz.html"); popstate() 后退事件 history.state 获取当前的状态对象 history.replaceState()

客户端检测

navigator.userAgent

DOM

Node 节点

firstChildlastChildparentNodechildNodeschildrennextSibiingpreviousSiblingnormalize 处理文档子树中的文本节点。节点操作appendChildinsertBeforeremoveChildreplaceChildcloneNode

Element 类型

getAttribute()、setAttribute()removeAttribute()createElement()createDocumentFragment()attributes 属性attributes 属性包含一个 NamedNodeMap 实例，是一个类似 NodeList 的“实时”集合,包含下列方法 getNamedItem(name)，返回 nodeName 属性等于 name 的节点； removeNamedItem(name)，删除 nodeName 属性等于 name 的节点； setNamedItem(node)，向列表中添加 node 节点，以其 nodeName 为索引； item(pos)，返回索引位置 pos 处的节点。let id = element.attributes["id"].nodeValue;

Text 类型

createTextNode nodeType 等于 3； nodeName 值为"#text"； nodeValue 值为节点中包含的文本； parentNode 值为 Element 对象； 不支持子节点。文本节点暴露了以下操作文本的方法： appendData(text)，向节点末尾添加文本 text； deleteData(offset, count)，从位置 offset 开始删除 count 个字符； insertData(offset, text)，在位置 offset 插入 text； replaceData(offset, count, text)，用 text 替换从位置 offset 到 offset + count 的文本； splitText(offset)，在位置 offset 将当前文本节点拆分为两个文本节点； substringData(offset, count)，提取从位置 offset 到 offset + count 的文本。

Comment 类型

 nodeType 等于 8； nodeName 值为"#comment"； nodeValue 值为注释的内容； parentNode 值为 Document 或 Element 对象； 不支持子节点。document.createComment()方法创建注释节点

MutationObserver 接口

可以在 DOM 被修改时异步执行回调。新创建的 MutationObserver 实例不会关联 DOM 的任何部分。要把这个 observer 与 DOM 关联起来，需要使用 observe()方法创建一个观察者（observer）并配置它观察<body>元素上的属性变化let observer = new MutationObserver(() => console.log('<body> attributes changed')); observer.observe(document.body, { attributes: true });提前终止执行回调，可以调用 disconnect()方法

Selectors API

查询 APISelectors API Level 1 的核心是两个方法：querySelector()和 querySelectorAll()Selectors API Level 2 规范在 Element 类型上新增了更多方法，比如 matches()、find()和 findAll()。不过，目前还没有浏览器实现或宣称实现 find()和 findAll()matches()方法（在规范草案中称为 matchesSelector()）接收一个 CSS 选择符参数，如果元素匹配则该选择符返回 true，否则返回 false。

HTML 5

HTML5 增加了一些特性以方便使用 CSS 类。1、getElementsByClassName2、classList 属性：add() 、contains()、remove()、toggle()3、焦点管理 document.activeElement 、document.hasFocus()

HTMLDocument 扩展

readyState 页面加载属性

document.readyState 属性有两个可能的值： loading，表示文档正在加载； complete，表示文档加载完成。

compatMode 模式属性

标准模式下 document.compatMode 的值是"CSS1Compat"，而在混杂模式下， document.compatMode 的值是"BackCompat"：

head 属性

自定义数据属性

使用前缀 data-以便告诉浏览器，这些属性既不包含与渲染有关的信息，也不包含元素的语义信息。自定义属性后，可以通过 dataset 获取，它是一个DOMStringMap 的实例，包含一组键/值对映射

插入标记

innerHTML 属性outerHTML 属性插入标签的最后两个新增方法是 insertAdjacentHTML()和 insertAdjacentText() "beforebegin"，插入当前元素前面，作为前一个同胞节点； "afterbegin"，插入当前元素内部，作为新的子节点或放在第一个子节点前面； "beforeend"，插入当前元素内部，作为新的子节点或放在最后一个子节点后面； "afterend"，插入当前元素后面，作为下一个同胞节点。

scrollIntoView

滚动页面中的某个区域

元素尺寸

offset 家族

 offsetHeight，元素在垂直方向上占用的像素尺寸，包括它的高度、水平滚动条高度（如果可见）和上、下边框的高度。 offsetLeft，元素左边框外侧距离包含元素左边框内侧的像素数。 offsetTop，元素上边框外侧距离包含元素上边框内侧的像素数。 offsetWidth，元素在水平方向上占用的像素尺寸，包括它的宽度、垂直滚动条宽度（如果可见）和左、右边框的宽度。offsetParent

client 家族 (客户端尺寸)

clientWidth：padding + widthclientHeight：padding + height

scroll 家族(滚动尺寸)

 scrollHeight，没有滚动条出现时，元素内容的总高度。 scrollLeft，内容区左侧隐藏的像素数，设置这个属性可以改变元素的滚动位置。 scrollTop，内容区顶部隐藏的像素数，设置这个属性可以改变元素的滚动位置。 scrollWidth，没有滚动条出现时，元素内容的总宽度。

getBoundingClientRect

浏览器在每个元素上都暴露了 getBoundingClientRect()方法，返回一个 DOMRect 对象, 包含 6 个属性：left、top、right、bottom、height 和 width, 在页面中相对于视口的位置

选择 API

结合操作范围 API document.createRange()let range = document.createRange(); range.setStart(helloNode, 2); range.setEnd(worldNode, 3);

selectNode

selectNodeContents

setStart

setEnd

事件

DOM 事件流

事件捕获

到底目标

事件冒泡

事件处理程序

DOM0事件

click

DOM2 事件

addEventListener

removeEventListener

IE 事件处理程序

attachEvent()

detachEvent()

事件对象

属性

bubbles：事件是否冒泡, IE 是 cancelBubblecancelable：是否可以取消事件的默认行为currentTarget：当前事件处理程序所在的元素defaultPrevented：true 表示已经调用 preventDefault()方法（DOM3 Events 中新增）detail：事件相关的其他信息type: 被触发的事件类型。IE 是 srcElementtarget: 事件目标

方法

eventPhase：表示调用事件处理程序的阶段：1 代表捕获阶段，2 代表到达目标，3 代表冒泡阶段preventDefault()：用于取消事件的默认行为，只有 cancelable 为 true 才可以调用这个方法。IE 是 returnValuestopImmediatePropagation()：用于取消所有后续事件捕获或事件冒泡，并阻止调用任何后续事件处理程序（DOM3 Events 中新增）stopPropagation()：用于取消所有后续事件捕获或事件冒泡。只有 bubbles为 true 才可以调用这个方法

事件类型

用户界面事件

涉及与 BOM 交互的通用浏览器事件

load

在 window 上当页面加载完成后触发，在窗套（<frameset>）上当所有窗格（<frame>）都加载完成后触发，在<img>元素上当图片加载完成后触发，在<object>元素上当相应对象加载完成后触发。

unload

abort

在<object>元素上当相应对象加载完成前被用户提前终止下载时触发

error

在 window 上当 JavaScript 报错时触发，在<img>元素上当无法加载指定图片时触发，在<object>元素上当无法加载相应对象时触发，在窗套上当一个或多个窗格无法完成加载时触发。

select

在文本框（<input>或 textarea）上当用户选择了一个或多个字符时触发

resize

scroll

焦点事件

在元素获得和失去焦点时触发

blur

当元素失去焦点时触发。这个事件不冒泡

focus

鼠标事件

事件执行顺序：(1) mousedown(2) mouseup(3) click(4) mousedown(5) mouseup(6) click(7) dblclick

事件类型

mousedownmouseupclickdbclickmouseenter：这个事件不冒泡，也不会在光标经过后代元素时触发mouseleavemousmovemouseoutmouseover

客户端坐标

clientXclientY

页面坐标

pageXpageY在页面没有滚动时，pageX 和 pageY 与 clientX 和 clientY 的值相同

屏幕坐标

screenX 和 screenY

修饰键

修饰键 Shift、Ctrl、Alt 和 Meta：shiftKey、ctrlKey、altKey 和 metaKey

滚轮事件

scroll

mousewheel

输入事件

键盘事件

keydown

keypress

keyup

合成事件

在使用某种 IME（Input Method Editor，输入法编辑器）输入字符时触发。

HTML5 事件

contextmenu 事件

beforeunload 事件

页面即将从浏览器中卸载时触发

DOMContentLoaded

在 DOM 树构建完成后立即触发，而不用等待图片、JavaScript文件、CSS 文件或其他资源加载完成。

readystatechange 事件

uninitialized：对象存在并尚未初始化。 loading：对象正在加载数据。 loaded：对象已经加载完数据。 interactive：对象可以交互，但尚未加载完成。 complete：对象加载完成。

hashchange 事件

onhashchange 事件处理程序必须添加给 window，每次 URL 散列值发生变化时会调用它window.addEventListener("hashchange", (event) => { console.log(`Old URL: ${event.oldURL}, New URL: ${event.newURL}`); });

设备事件

orientationchange 事件

水平、垂直模式

deviceorientation 事件

反映设备在空间中的朝向，而不涉及移动相关的信息。

devicemotion 事件

devicemotion 事件可以用来确定设备正在掉落或者正拿在一个行走的人手里

触摸及手势事件

触摸事件和手势事件存在一定的关系。当一个手指放在屏幕上时，会触发 touchstart 事件。当另一个手指放到屏幕上时，gesturestart 事件会首先触发，然后紧接着触发这个手指的 touchstart事件。如果两个手指或其中一个手指移动，则会触发 gesturechange 事件。只要其中一个手指离开屏幕，就会触发 gestureend 事件，紧接着触发该手指的 touchend 事件。

触摸事件

当手指点触屏幕上的元素时，依次会发生如下事件（包括鼠标事件）：(1) touchstart(2) mouseover(3) mousemove（1 次）(4) mousedown(5) mouseup(6) click(7) touchend

touchstart

手指放到屏幕上时触发

touchmove

手指在屏幕上滑动时连续触发。在这个事件中调用 preventDefault()可以阻止滚动。

touchend

手指从屏幕上移开时触发

touchcancel

系统停止跟踪触摸时触发。

手势事件

手势事件会在两个手指触碰屏幕且相对距离或旋转角度变化时触发。手势事件有以下 3 种。 gesturestart：一个手指已经放在屏幕上，再把另一个手指放到屏幕上时触发。 gesturechange：任何一个手指在屏幕上的位置发生变化时触发。 gestureend：其中一个手指离开屏幕时触发。

gesturestart

gesturechange

gestureend

事件委托

DOM 事件模拟

使用 document.createEvent()方法创建一个 event 对象let btn = document.getElementById("myBtn"); // 创建 event 对象let event = document.createEvent("MouseEvents"); // 初始化 event 对象event.initMouseEvent("click", true, true, document.defaultView, 0, 0, 0, 0, 0, false, false, false, false, 0, null); // 触发事件btn.dispatchEvent(event);

进阶知识

动画与 Canvas 图形

动画

requestAnimationFrame

cancelAnimationFrame

canvas

getContext

填充

填充以指定样式（颜色、渐变或图像）自动填充形状

fillStyle

描边

描边只为图形边界着色

strokeStyle

绘制矩形

fillRect()、strokeRect()和 clearRect()

绘制路径

首先调用 beginPath()方法以表示要开始绘制新路径 arc(x, y, radius, startAngle, endAngle, counterclockwise)：以坐标(x, y)为圆心，以 radius 为半径绘制一条弧线，起始角度为 startAngle，结束角度为 endAngle（都是弧度）。最后一个参数 counterclockwise 表示是否逆时针计算起始角度和结束角度（默认为顺时针）。 arcTo(x1, y1, x2, y2, radius)：以给定半径 radius，经由(x1, y1)绘制一条从上一点到(x2, y2)的弧线。 bezierCurveTo(c1x, c1y, c2x, c2y, x, y)：以(c1x, c1y)和(c2x, c2y)为控制点，绘制一条从上一点到(x, y)的弧线（三次贝塞尔曲线）。 lineTo(x, y)：绘制一条从上一点到(x, y)的直线。 moveTo(x, y)：不绘制线条，只把绘制光标移动到(x, y)。 quadraticCurveTo(cx, cy, x, y)：以(cx, cy)为控制点，绘制一条从上一点到(x, y)的弧线（二次贝塞尔曲线）。 rect(x, y, width, height)：以给定宽度和高度在坐标点(x, y)绘制一个矩形。这个方法与 strokeRect()和 fillRect()的区别在于，它创建的是一条路径，而不是独立的图形。

绘制文本

变换

 rotate(angle)：围绕原点把图像旋转 angle 弧度。 scale(scaleX, scaleY)：通过在 x 轴乘以 scaleX、在 y 轴乘以 scaleY 来缩放图像。scaleX和 scaleY 的默认值都是 1.0。 translate(x, y)：把原点移动到(x, y)。执行这个操作后，坐标(0, 0)就会变成(x, y)。 transform(m1_1, m1_2, m2_1, m2_2, dx, dy)：像下面这样通过矩阵乘法直接修改矩阵 setTransform(m1_1, m1_2, m2_1, m2_2, dx, dy)：把矩阵重置为默认值，再以传入的参数调用 transform()。

绘制图像

阴影

渐变

图案

合成

webGL

表单

处理剪贴板

与剪贴板相关的 6 个事件。 beforecopy：复制操作发生前触发。 copy：复制操作发生时触发。 beforecut：剪切操作发生前触发。 cut：剪切操作发生时触发。 beforepaste：粘贴操作发生前触发。 paste：粘贴操作发生时触发。clipboardData 对象上有 3 个方法：getData()、setData()和 clearData()，

JavaScript API

SharedArrayBuffer 和 Atomics

Atomics API 用于保护代码在多线程内存访问模式下不发生资源争用

跨上下文消息

postMessage

postMessage() API 支持从不同源跨文档发送消息，同时保证安全和遵循同源策略

Encoding API

Encoding API 用于实现字符串与缓冲区之间的无缝转换（越来越常见的操作）提供了两种将字符串转换为定型数组二进制格式的方法：批量编码和流编码

批量编码 TextEncoder

const textEncoder = new TextEncoder(); const decodedText = 'foo'; const encodedText = textEncoder.encode(decodedText);

流编码 TextEncoderStream

File API 与 Blob API

File 类型

File API 提供了发送、接收和读取大型二进制对象的可靠工具

FileReader 类型

表示一种异步文件读取机制，从文件系统读取文件，而不是从服务器读取数据。读取方法是异步的，所以每个 FileReader 会发布几个事件，其中 3 个最有用的事件是 progress、error 和 load，分别表示还有更多数据、发生了错误和读取完成读取文件的方式 readAsText(file, encoding)：从文件中读取纯文本内容并保存在 result 属性中。第二个参数表示编码，是可选的。 readAsDataURL(file)：读取文件并将内容的数据 URI 保存在 result 属性中。 readAsBinaryString(file)：读取文件并将每个字符的二进制数据保存在 result 属性中。 readAsArrayBuffer(file)：读取文件并将文件内容以 ArrayBuffer 形式保存在 result 属性。

FileReaderSync 类型

类型就是 FileReader 的同步版本

Blob 与部分读取

blob 表示二进制大对象（binary larget object），是 JavaScript 对不可修改二进制数据的封装类型

读取拖放文件

event.dataTransfer.files

媒体视音频文件

媒体元素<audio>和<video>拥有自己的 API，用于操作音频和视频。并不是每个浏览器都会支持所有媒体格式，使用 canPlayType()方法可以检测浏览器支持情况。

原生拖放

拖放 API 支持方便地将元素标识为可拖动，并在操作系统完成放置时给出回应。可以利用它创建自定义可拖动元素和放置目标。

事件

dragstart

drag

dragend

dragenter

dragover

dragleave 或 drop

dataTransfer 对象

// 传递文本event.dataTransfer.setData("text", "some text"); let text = event.dataTransfer.getData("text");

setData

getData

dropEffect 与 effectAllowed'

dropEffect 属性可以告诉浏览器允许哪种放置行为。这个属性有以下 4 种可能的值。 "none"：被拖动元素不能放到这里。这是除文本框之外所有元素的默认值。 "move"：被拖动元素应该移动到放置目标。 "copy"：被拖动元素应该复制到放置目标。 "link"：表示放置目标会导航到被拖动元素（仅在它是 URL 的情况下）。设置 effectAllowed，否则 dropEffect 属性也没有用。effectAllowed 属性表示对被拖动元素是否允许 dropEffect。这个属性有如下几个可能的值。 "uninitialized"：没有给被拖动元素设置动作。 "none"：被拖动元素上没有允许的操作。 "copy"：只允许"copy"这种 dropEffect。 "link"：只允许"link"这种 dropEffect。 "move"：只允许"move"这种 dropEffect。 "copyLink"：允许"copy"和"link"两种 dropEffect。 "copyMove"：允许"copy"和"move"两种 dropEffect。 "linkMove"：允许"link"和"move"两种 dropEffect。 "all"：允许所有 dropEffect。必须在 ondragstart 事件处理程序中设置这个属性。

Notifications API 通知权限

Notifications API 提供了一种浏览器中立的方式，以此向用户展示消通知弹层。

Page Visibility API

 document.visibilityState 值，表示下面 4 种状态之一。 页面在后台标签页或浏览器中最小化了。 页面在前台标签页中。 实际页面隐藏了，但对页面的预览是可见的（例如在 Windows 7 上，用户鼠标移到任务栏图标上会显示网页预览）。 页面在屏外预渲染。 visibilitychange 事件，该事件会在文档从隐藏变可见（或反之）时触发。 document.hidden 布尔值，表示页面是否隐藏。这可能意味着页面在后台标签页或浏览器中被最小化了。这个值是为了向后兼容才继续被浏览器支持的，应该优先使用 document.visibilityState检测页面可见性。要想在页面从可见变为隐藏或从隐藏变为可见时得到通知，需要监听 visibilitychange 事件。document.visibilityState 的值是以下三个字符串之一： "hidden" "visible" "prerender

Streams API

Streams API 支持以全新的方式读取、写入和处理数据

可读流

ReadableStreamasync function* ints() { // 每 1000 毫秒生成一个递增的整数 for (let i = 0; i < 5; ++i) { yield await new Promise((resolve) => setTimeout(resolve, 1000, i)); } } const readableStream = new ReadableStream({ async start(controller) { for await (let chunk of ints()) { controller.enqueue(chunk); } controller.close(); } }); console.log(readableStream.locked); // false const readableStreamDefaultReader = readableStream.getReader(); console.log(readableStream.locked); // true

可写流

const readableStream = new ReadableStream({ write(value) { console.log(value); } });console.log(writableStream.locked); // false const writableStreamDefaultWriter = writableStream.getWriter(); console.log(writableStream.locked); // true要把获得的数据写入流，可以通过流的 getWriter()方法获取 WritableStreamDefaultWriter的实例。

转换流

转换流用于组合可读流和可写流，数据块在两个流之间的转换是通过 transform()方法完成const { writable, readable } = new TransformStream({ transform(chunk, controller) { controller.enqueue(chunk * 2); } });

计时 API - 页面性能

Performance 接口由多个 API 构成： High Resolution Time API  Performance Timeline API  Navigation Timing API  User Timing API  Resource Timing API  Paint Timing APITiming API 提供了一组度量数据进出浏览器时间的可靠工具。

High Resolution Time API

performance.now()

Performance Timeline API

度量客户端延迟的工具

performance.mark()

performance.getEntries()

performance.measure

performance.getEntriesByType('measure')

Web 组件

Web Components API 为元素重用和封装技术向前迈进提供了有力支撑

Web Cryptography API

让生成随机数、加密和签名消息成为一类特性。

错误处理和调试

错误处理

try……catch

throw

错误类型

 Error InternalError EvalError RangeError ReferenceError SyntaxError TypeError URIError

error 事件

任何没有被 try/catch 语句处理的错误都会在 window 对象上触发 error 事件

调试技术

打印日志

使用 JavaScript 调试器

1、debugger2、单步调试3、抛出错误

网络请求与远程资源

网络请求

超时：timeoutoverrideMimeType()方法用于重写 XHR 响应的 MIME 类型

XMLHttpRequest

setRequestHeader

getResponseHeader

请求方法

get

查询字符串中的每个名和值都必须使用encodeURIComponent()编码用于向服务器查询某些信息。必要时，需要在 GET 请求的 URL后面添加查询字符串参数。对 XHR 而言，查询字符串必须正确编码后添加到 URL 后面，然后再传给open()方法。

post

用于向服务器发送应该保存的数据,每个 POST 请求都应该在请求体中携带提交的数据

put

delete

head

HTTP 头部

 Accept：浏览器可以处理的内容类型。 Accept-Charset：浏览器可以显示的字符集。 Accept-Encoding：浏览器可以处理的压缩编码类型。 Accept-Language：浏览器使用的语言。 Connection：浏览器与服务器的连接类型。 Cookie：页面中设置的 Cookie。 Host：发送请求的页面所在的域。 Referer：发送请求的页面的 URI。注意，这个字段在 HTTP 规范中就拼错了，所以考虑到兼容性也必须将错就错。（正确的拼写应该是 Referrer。） User-Agent：浏览器的用户代理字符串。

FormData 类型

let data = new FormData(); data.append("name", "Nicholas");

进度事件

 loadstart：在接收到响应的第一个字节时触发。 progress：在接收响应期间反复触发。 error：在请求出错时触发。 abort：在调用 abort()终止连接时触发。 load：在成功接收完响应时触发。 loadend：在通信完成时，且在 error、abort 或 load 之后触发。

load

load 事件用于替代 readystatechange 事件。load 事件在响应接收完成后立即触发，这样就不用检查 readyState 属性了。onload 事件处理程序会收到一个 event 对象，其 target 属性设置为 XHR 实例，在这个实例上可以访问所有 XHR 对象属性和方法。

progress

CORS 跨域资源共享

 Access-Control-Allow-Origin：与简单请求相同。 Access-Control-Allow-Methods：允许的方法（逗号分隔的列表）。 Access-Control-Allow-Headers：服务器允许的头部（逗号分隔的列表）。 Access-Control-Max-Age：缓存预检请求的秒数。Access-Control-Allow-Credentials: true 凭据请求

JSONP

JSONP 格式包含两个部分：回调和数据function handleResponse(response) { console.log(` You're at IP address ${response.ip}, which is in ${response.city}, ${response.region_name}`); } let script = document.createElement("script"); script.src = "http://freegeoip.net/json/?callback=handleResponse"; document.body.insertBefore(script, document.body.firstChild);

Web Socket

通过一个长时连接实现与服务器全双工、双向的通信。Web Socket使用了自定义协议 ws://和 wss:// WebSocket.OPENING（0）：连接正在建立。 WebSocket.OPEN（1）：连接已经建立。 WebSocket.CLOSING（2）：连接正在关闭。 WebSocket.CLOSE（3）：连接已经关闭。 open：在连接成功建立时触发。 error：在发生错误时触发。连接无法存续。 close：在连接关闭时触发。let socket = new WebSocket("ws://www.example.com/server.php"); socket.onopen = function() { alert("Connection established."); }; socket.onerror = function() { alert("Connection error."); }; socket.onclose = function() { alert("Connection closed."); };

WebSocket

socket.send

socket.onmessage

安全

XSS

CSRF

 要求通过 SSL 访问能够被 Ajax 访问的资源。 要求每个请求都发送一个按约定算法计算好的令牌（token）。注意，以下手段对防护 CSRF 攻击是无效的。 要求 POST 而非 GET 请求（很容易修改请求方法）。 使用来源 URL 验证来源（来源 URL 很容易伪造）。 基于 cookie 验证（同样很容易伪造）。

客户端存储

Web Storage

 clear()：删除所有值；不在 Firefox 中实现。 getItem(name)：取得给定 name 的值。 key(index)：取得给定数值位置的名称。 removeItem(name)：删除给定 name 的名/值对。 setItem(name, value)：设置给定 name 的值。

sessionStorage

localStorage

IndexedDB

模块

CommonJS

同步声明依赖的模块

AMD

UMD

ES6 模块

workers 工作者线程

工作者线程可以运行异步 JavaScript 而不阻塞用户界面。这非常适合复杂计算和数据处理，特别是需要花较长时间因而会影响用户使用网页的处理任务。工作者线程有自己独立的环境，只能通过异步消息与外界通信。

对象

OOP

对象是属性和方法的集合即封装将复杂功能隐藏在内部，只开放给外部少量方法，更改对象内部的复杂逻辑不会对外部调用造成影响即抽象继承是通过代码复用减少冗余代码根据不同形态的对象产生不同结果即多态

特性

属性configurable 是否课配置，false 不能通过 delete 删除属性enumerable 是否可以通过 for-in 枚举writable 是否可写，false 不能修改值value 属性值方法get 方法set 方法

常用方法

Object.is() 判断两个值是否相等Object.assign() 浅拷贝getPrototypeOf()setPrototypeOf()Object.create() 继承创建对象hasOwnProperty 判断自定义属性getOwnPropertyDescriptors 获取属性描述Object.getOwnPropertyNames()Object.getOwnPropertySymbols()Obect.keys()Object.values()Object.entries()

new 运算符的原理

(1) 在内存中创建一个新对象。(2) 这个新对象内部的[[Prototype]]特性被赋值为构造函数的 prototype 属性。 (3) 构造函数内部的 this 被赋值为这个新对象（即 this 指向新对象）。(4) 执行构造函数内部的代码（给新对象添加属性）。(5) 如果构造函数返回非空对象，则返回该对象；否则，返回刚创建的新对象。

创建对象的方式

new / 对象字面量

工厂模式

构造函数模式

原型模式

prototype 函数属性__proto__ 对象属性

原型与继承

原型

函数拥有多个原型，prototype 用于实例对象使用，__proto__用于函数对象使用

继承

原型链继承

盗用构造函数继承

组合继承

原型式继承

寄生式继承

寄生组合继承

class 类 extends 继承

类

class 与函数的区别

异：1、class 定义的方法不能枚举2、class 默认使用strict 严格模式执行3、class 可以设置静态属性，可以直接通过类访问属性和方法

异步编程

Promise

then

catch

finally

all

race

resolve

reject

async/await

代理与反射

proxy

构造函数接收两个参数：目标对象和处理程序对象。使用场景：跟踪属性访问、隐藏属性、阻止修改或删除属性、函数参数验证、构造函数参数验证、数据绑定，以及可观察对象。

Reflect

方法Reflect.defineProperty()Reflect.preventExtensions()Reflect.getPrototypeOf()Reflect.setPrototypeOf()Reflect.apply()Reflect.ownKeys() -> Object.keys()  Reflect.get()：可以替代对象属性访问操作符。 Reflect.set()：可以替代=赋值操作符。 Reflect.has()：可以替代 in 操作符或 with()。 Reflect.deleteProperty()：可以替代 delete 操作符。 Reflect.construct()：可以替代 new 操作符。

最佳实践