各省网站备案时长,网站建设 创业,利用养生网站做竞价引流,东莞网站排名优化摘要
马上就要毕业啦#xff0c;没有参加2023年的秋招#xff0c;准备在最近开始找全职或者实习工作#xff0c;然后也马上过年了#xff0c;总结和理一下自己的知识要点#xff0c;参加2024年的春招。
1. JS的执行流程
浏览器的V8引擎收到到执行的JS代码V8结构化这段代…摘要
马上就要毕业啦没有参加2023年的秋招准备在最近开始找全职或者实习工作然后也马上过年了总结和理一下自己的知识要点参加2024年的春招。
1. JS的执行流程
浏览器的V8引擎收到到执行的JS代码V8结构化这段代码生成AST抽象语法树同时生成相关作用域生成字节码介于AST和机器码之间解释器按照顺序执行字节码并输出执行结果
JS代码流程先编译后执行
2. 基本数据类型
undefinednullBooleanStringNumberSymbolBigIntObject只有他存在堆里面
3. 判断数据类型的方式TTIC
typeof判断基本数据类型判断null时会返回objectObject.prototype.toString.call(xx)返回一个[object 数据类型]instanceofA instanceof B 判断A和B是否有血缘关系不仅仅根据父子关系。constructor
4. ES6的新特性
const和let解构赋值模板字符串函数的扩展默认值、rest参数、函头函数数组的拓展Array.from()将类数组转换为数组、find()、findIndex()、entries()、keys()、values()includes()对象扩展属性名可以用表达式、Object.assign()、Object.keys()、Object.values()、Object.entries()SymbolSet、MapPromiseIterator和for…ofGenerator 和 async await
箭头函数和普通函数
语法更加简洁清晰箭头函数没有 prototype、所以箭头函数没有this箭头函数不会创建自己的this会自动继承最外层的thiscall | apply | bind 无法改变箭头指向箭头函数不能作为构造函数箭头函数不绑定arguments用rest(…)取代来访问箭头函数列表箭头函数不用用作Generator不能使用yield关键字
5. Promise 和 async/await
Promise Promise对象为了解决回调地狱而提出不是新的语法功能而是一种新的写法允许将回调函数嵌套改成链式调用 流程
Promise 接受一个executor()在new的时候立刻执行executor()内部的异步任务被放入宏\微任务等待执行then收集\失败回调executor的异步任务被执行触发resolve\reject从失败和成功队列中取出依次执行。
其实是设计模式中的一种观察者模式
收集依赖 then收集触发通知 触发resolve取出依赖执行 resolve执行
async await
是对Generator生成器的封装是个语法糖
*/yield和async/await的区别
async/await自带执行器不需要next()就能下一步async 返回的是Promise对象而Generator返回的是生成器对象await能够返回Promise的 reject/resolve的值
注意无论await后面跟的什么后面的代码都会被阻塞
和Promise区别
Promise解决了回调地狱但是他的语法问题纵向发展形成了一个回调链遇到复杂的业务场景这样的语法显然是不美观的。 async await看起来简洁一些看起来像同步代码其实它出现的意义就是提供异步的效果 两者其实都是非阻塞的
6. Generator
核心 保存上下文函数在真正意义中没有被挂起每一次yield其实都执行了一边生成器函数、在这个过程中用了一个context存储上下文每次执行生成器函数的时候都可以从上一个执行结果开始执行。
用babel编译后生成regeneratorRuntime
mark()方法为生成器函数绑定了一系列原型wrap() 相当于给Generator增加一个_invoke 方法
7. 迭代器
模式 可以把有些结构称为可迭代对象它们正式实现了Iterable接口可以通过迭代器消费是按需创建的一次性对象每个迭代器都会关联一个可迭代对象
协议 可迭代协议需要具备两种能力
支持迭代的自我识别能力创建实现Iterator接口的对象的能力
是一次性使用对象用于迭代与其关联的可迭代对象
迭代器api提供一个next()方法这个方法会返回两个属性
done是否还能取得下个值value可迭代对象下一个值
默认实现了Iterable的类型
StringArrayMapSetargumentsNodeList等Dom集合类型
接受可迭代对象的原生语言特性包括
for of数组结构扩展操作符Array.from()SetMapPromise.all()Promise.race()yield
8. 设计模式
三类C5S7B11
创建型模式五种 工厂方法、抽象工厂、单例、建造则、原型**结构型模式七种**适配器、装饰器、代理、外观、桥接、组合、享元**行为型模式十一种**策略、模板方法、观察者(发布订阅)、迭代子、责任链、命令、备忘录、状态、访问者、中介者、模板方法、解释器
9. WebGL
Canvas 是画布一般可以获取2D上下文和3D上下文3D上下文一般就是WebGL当然WebGL也能用于2D绘制并且WebGL提供硬件渲染加速性能更好。但是支持性不是特别好在不支持的情况下最好还是用Canvas可以用一些兜底的库如threehs、PIXI等
10. CommonJS和ES6 Module
首先CommonJS是同步加载ES6是异步加载前者主要用于Node.js服务端编程模块文件一般已经存在于本地硬盘所以记载比较快。而后者是异步加载所以适用于浏览器不会造成堵塞。
其次CommonJS模块输出的是一个值的拷贝也就是说一旦输出一个值模块内部变化就影响不到这个值ES6模块输出的是值的引用V8引擎在对JS进行静态分析的时候遇到import命令会等到脚本真正执行时才回到被加载模块中取值。
最后前者是运行时加载后者是编译时输出接口
注意CommonJS不适用于浏览器
11. 声明变量的方式
ES5
varfunction
ES6
letconstimportclass
12. 函数声明
function fn(…args) {}var fn function(…args){}new Function(‘x’,‘y’,‘return xy’)
13. Object/Map/WeakMap区别
Map是ES6提供的一种新特性是一种键不局限于字符串的一种键值对集合对于Object来说他的键只能使用字符串。
WeakMap结构和Map有点类似但是有两点区别
他只接受对象为键null除外键名所指向的对象不计入垃圾回收机制
总之WeakMap专用场合就是它的键所对应的对象可能会在将来消失WeakMap结构有助于防止内存泄露。
14. JS深浅复制
浅复制
扩展运算符Object.assign()Object,getOwnPropertyDescriptors()Object.defineProperties()
深复制
通过嵌套扩展运算符使用JSON手动实现FHT 利用for-in对对象的属性进行遍历自身属性继承属性)source.hasOwnProperty(i)判断是否非继承和可枚举类型typoeof source[i]object判断值的类型如果是对象递归处理
15. 闭包
闭包就是在JS种根据语法作用域规则内部函数总是可以访问到其外部函数中声明的变量当通过调用一个外部函数返回一个内部函数后即使该外部函数已经执行结束了。但是内部函数引用外部函数的变量依然保存在内存中就把这些变量的集合成为闭包。
16. Event Loop
也就是事件循环会不听从微/宏任务队列中取出对应任务的循环函数。在某种情况中你可以把它称为一个永动机。这些它取出的任务并将其推送到调用栈种执行主要有四个主要步骤
执行Scirpt用同步的方式执行script直到调用栈空才停下来。还会执行预编译操作。如变量提升执行一个宏任务挑选最老的到调用栈中执行直到调用栈为空执行所有微任务挑选最老的到调用栈中执行直到调用栈为空。但是继续从微任务队列种获取最老的执行。重复UI渲染然后跳到第二步挑选宏任务执行。
Event Loop 单次迭代过程被称为tick。
宏任务 Task Queue
也被称为{回调队列| Callback queue}调用栈适用于跟踪正在被执行函数宏任务则是跟踪将要被执行函数。 事件循环不停的运行着并且按照一定规则从宏任务队列中不停的去除对象。 宏任务是一个FIFO存储的宏任务会被事件循环探查到。记得这些人物都是阻塞的。 微任务Microtask Queue
和宏任务一样他也是FIFO同样会被探查到。不同的地方是微任务是在一个宏任务完成后在UI渲染之前被触发。它是专门处理ES6中Promise回调的。
17. GC
也就是垃圾回收机制。
如何实现算法
通过GC Root 标记空间中活动对象和非活动对象 V8 采用可访问性算法来判断对象是否为活动对象是将一些GC Root 作为初始存活的对象的集合从GC Root出发然后遍历所有对象通过遍历所得到的对象认为该对象是否为活动对象通过遍历所得到的对象认为该对象是否为非活动对象浏览器环境中GC Root包括1.全局的window对象 2. 文档DOM树 3.存放栈上变量 回收非活动对象所占据的内存内存整理
代际假说
是GC领域中的一个重要术语
两个特点
大部分对象都是朝生夕死的不死的对象会获得很久
堆空间
V8会把堆分为两个部分
新生代 存放的是生存时间短的1~8M容量副垃圾回收器负责新生代的垃圾回收 老生代 存放时间久的对象主垃圾回收器负责老生代的垃圾回收
副垃圾回收器
用Scavenge算法来处理九十八新生代区域分为两个区域对象区域和空闲区域。 当对象区域要被写满的时候就做一次垃圾清理操作
首先对对象区域的垃圾做标记然后把这些对象复制一份然后有序的丢到空闲区域然后复制结束后两者角色互换
副垃圾回收器采用对象晋升策略移动那些经过两次垃圾回收依然还活着的对象到老生代中
主垃圾回收器
负责老生代的垃圾回收除了新生代晋升的大的对象也会直接被存到老生代中有两个特点
活得久大得很
标记|清除 算法
标记过程从根元素遍历能够达到的为活动对象没有达到的为非活动对象垃圾清理过程主回收器直接把非活动对象清除
标记 - 整理
标记可回收清除不是对可回收对象清理二十让所有的活动对象向一端移动清理掉除了这里以外的内存。
18. 内存问题
内存泄漏 不需要的内存数据但是依然被其他对象引用着。
常见的 函数中声明变量时没有用var、let、const导致this指向window直接赋值到window对象中。
19. 作用域
3大类
声明式函数作用域、module作用域对象全局
声明式作用域
通过var/const/let/class/module/import/function生成常说的ES6块级作用域和函数作用域都属于函数式作用域
全局作用域
全局对象使用两个ER管理
对象ER将变量存储在全局对象中顶层作用域下var和function声明的变量被绑定在对象ER中浏览器为window声明式ER使用内部对象来存储顶层作用于下const/let/class声明的变量被绑定在声明ER中
两者存在相同名的变量时声明式ER优先级更高。
20. this
this是和上下文绑定的主要分为三种全局执行、函数执行、eval执行
全局
一般指向window对象这是this和作用域链唯一焦点作用域低端包含window对象
函数
默认情况调用一个函数他的上下文也是指向window
通过call/bind/apply设置上下文
let bar {myName : mango ,test1 : 1
}
function foo(){this.myName test
}
foo.call(bar)
console.log(bar) // mango
console.log(myName) // not definedthis的设计缺陷
嵌套函数中内部函数的this不会从外层函数中继承 解决方法
将this转化为作用域体系。使用ES6中的this函数他不会创建自己的上下文所以取决于他的外部函数。
普通函数中的 this 默认指向全局对象 window
可以设置严格模式函数上下文都是undefined
21. 图片懒加载
通过HTML提供的data-属性来嵌入自定义数据。 然后利用offsetTop计算位置。当图片出现在可视区域的时候加载图片也就是给img标签设置src。
22. 数组常用方法
改变原数组
pushpopshiftunshiftreversesortsplice
不会改变
concatjoinslicefilterreducefindfindIndex
