前端知识体系演讲人2020-12-0101JavaScriptJavaScript变量、作用域、闭包、this、内存基本概念ES6/7/8
新基础特性面向对象浏览器模型BOM网页模型DOMJavaScriptHTML事件模型Js图形JSON网络编程异步编程离线应用
（PWA）与客户端存储JavaScriptABC模块化前端框架多媒体DEF动画其他常考知识点常见问题JavaScriptABCDJ
s工具库Js动画utils函数重载010203关键字和保留字变量数据类型JavaScript060504基本概念结构控制语句编码操
作符020301JavaScriptES6解构赋值ES6proxy函数基本概念基本类型stringnumberbooleanU
ndefinedNull基本类型string字符字面量+concat()转换为字符串ACCII码转换基本类型number浮点数数
值范围NaN数值转换包装类型newNumber()基本类型boolean包装类型newBoolean()引用类型P6P5内
置对象P4DateP3FunctionP2RegExpP1ArrayObject引用类型ObjectObject.entries(
)Object.fromEntries()Object.values()Object.keys()Object.assign(ta
rget,source1,source2)删除对象属性引用类型Array特点数组基本操作检测数组转换方法栈方法LIFO和队列
方法FIFO重排序方法引用类型Array操作方法位置方法迭代方法归并方法ES6+数组方法引用类型Functionrest参数和a
rguments引用类型Date根据毫秒数返回日期返回日期毫秒数Date.UTC()继承的对象方法格式化方法直接取得和设置日期值中
特定部分的方法引用类型内置对象GlobalMath操作符&&||编码https://www.cnblogs.c
om/xianyulaodi/p/6052334.htmlES6解构赋值数组解构赋值ES6解构赋值对象解构赋值ES6解构
赋值字符解构赋值ES6解构赋值数值和布尔值解构赋值ES6解构赋值函数参数解构赋值ES6解构赋值圆括号问题应用场景交换变
量的值提取数据取(函数return)对象的值提取JSON数据遍历Map结构/Object.entries()/Arra
y.from()函数参数函数参数的定义函数参数的默认值ES6proxyexample010203JavaScript对象基础
创建对象实例继承面向对象A从构造函数中实例化对象newSomeObject()对象基础对象字面量{}创建对象B对象成员名
字值属性方法01点表示法对象基础02访问/设置对象的属性和方法括号表示法03小技巧深入了解对象属性对象的属性数据属性访问器属性
对像属性的操作定义/修改属性的特性读取属性的特性对象的遍历forofObject.keys()Object.values()
Object.entries()forin创建对象基础组合使用构造函数和原型模式原型模式D构造函数模式C工厂模式BA创建对象基础
构造函数模式普通构造函数模式new操作符构造函数创建对象实例的问题创建对象基础原型模式理解原型对象普通原型模式内置对象的原型原型模
式创建对象实例的问题动态原型模式寄生构造函数模式创建对象实例更多创建对象实例的方式稳妥构造函数模式继承原型链继承基于原型链的继承继
承基于构造函数的继承继承组合继承020103继承寄生式继承原型式继承Object.Creat()寄生式组合继承其他继承方式ES
6class继承class基本语法class继承ES6class继承class基本语法类中this的指向静态方法static
取值函数get和存值函数set类方法名表达式[变量](){}类名表达式私有方法和私有属性ES6class继承class继承
extends关键字super关键字mixin模式实现01作用域JavaScript02变量、作用域、闭包、this、内存闭包03
thisJs编译器原理编译步骤分词/词法分析解析/语法分析代码生成理解作用域处理涉及模块引擎编译器作用域工作模型词法作用域（Js）
修改作用域动态作用域（Perl、Bash等，作为了解）作用域函数作用域和块作用域作用域提升闭包作用域和闭包setTimeout
()闭包函数导致Js不会对其进行垃圾收集，因还有引用事件监听函数只要使用了回调函数，实际上就产生了闭包实际问题循环和闭包块级作用
域块级作用域this箭头函数bind()更好的解决方案隐式传递对象引用let、const原型继承和Class继承JavaScri
ptES6/7/8新基础特性模块化let、constlet块级作用域不存在变量提升暂时性死区不允许重复声明constJavaS
cript浏览器模型BOM浏览器缓存机制浏览器缓存机制缓存位置缓存策略强缓存协商缓存Node-节点DOM操作常见问题JavaS
cript网页模型DOMElement属性Document类型Element类型Node-节点12种Node类型someNod
e.nodeType12Node属性nodeTypenodeNamenodeValue010203childNodefirstCh
ildlastChild040506Node属性010302parentNodenextSiblingpreviousSilbli
ngNode属性childNodechildNode[idx]childNode.item(idx).lengthnodeList
转数组父子节点兄弟节点Node-节点节点关系someNode.appendChild(Node)someNode.insertB
efore(带插入Node,带插入位置Node/null)Node-节点someNode.replaceChild(带插入N
ode,待插入位置childNode)Node节点方法someNode.removeChild(带插入Node,待插入位置c
hildNode)someNode.cloneNode(true/false)深拷贝（含子节点）/浅拷贝（不含子节点）DOM操
作常见问题原生拖放dragablehttps://segmentfault.com/a/1190000019554950缩放h
ttps://segmentfault.com/q/1010000016883342Element.scrollIntoView(
true/false)宽高ABCclientscrolloffset宽高clientElement.clientHeightEl
ement.clientWidthElement.clientLeftElement.clientTop宽高scrollEleme
nt.scrollHeight只读Element.scrollWidth只读Element.scrollLeft可读可写El
ement.scrollTop可读可写宽高offsetoffsetTopoffsetWidthoffsetHeightoffse
tLeft020301JavaScript事件绑定常见问题模拟事件事件委托HTML事件模型contenteditable属性tab
index属性B事件绑定常见问题A非表单元素绑定键盘事件模拟事件模拟鼠标hoverP3P2WebGLP1JavaScriptS
vgCanvasJs图形WebGLthree.js原生WebGL020301JavaScript常用头字段网络通讯数据类型fetc
h网络编程网络通讯数据类型子主题030201事件监听回调函数EventLoopJavaScript060504异步编程Iterat
or迭代器Promise异步操作状态机发布/订阅JavaScript异步编程ABCDGenerator可遍历状态机Async
/Await《你不知道的JavaScirpt》并发和并行EventLoop消息队列messagequeue调用堆栈thec
allstack01020102Heap03事件循环040304宏任务与微任务0505Promise是微任务setTim
eout是宏任务回调函数回调地狱Promise异步操作状态机在右侧编辑区输入内容特点优点对象的状态不受外界影响缺点一旦状态改变，
就不会再变Promise新建后就会立即执行Promise会吃掉错误特点对象的状态不受外界影响一旦状态改变，就不会再变特点缺点无法取
消Promise如果Promise没有回调函数，内部的异常不能捕获到pending状态时无法得知Promise的进展代码冗余，原来
的任务被Promise包装了一下，不管什么操作，一眼看去都是一堆then，原来的语义变得很不清楚。创建Promise01Pro
mise异步操作状态机指定回调函数Promise.prototype.then()02捕获异常Promise.prototy
pe.catch()03Promise实例基本用法ES2018Promise.prototype.finally()04Prom
ise.all()p1,p2,p3状态都fullfilled时候，新promise才fullfilled，返回值为三个p返回值组
成的数组p1,p2,p3其中一个状态rejected时候,新promise就会rejected，返回的是第一个reject传递的值
Promise.race()Promise.resolve()将对象/function封装为一个PromisePromise
.reject()提案Promise.try()Promise对象用法Promise异步操作状态机应用Promise异步
操作状态机在右侧编辑区输入内容02ECMA规范阅读计划ECMA规范阅读计划03TypeScriptTypeScript04Bab
elBabel05跨平台开发跨平台开发06NodeJsNodeJs07前端工程化前端工程化08HTMLHTML09CC10GoGo11重学Python重学Python12CSSCSS13参考资料合集（主要部分）参考资料合集（主要部分）14项目项目15https://carbon.now.sh/https://carbon.now.sh/16线性表-数据结构关系线性表-数据结构关系17底层知识、基础原理底层知识、基础原理18性能优化性能优化19GitGit20可视化可视化21IDEIDE感谢聆听 |
|
