javaScript
2021-04-27 16:20:16 0 举报AI智能生成
登录查看完整内容
看web高级课做的笔记
作者其他创作
大纲/内容
数组和字符串的方法
数组
concat
copyWithin
entries
every
some
fill
filter
find
findIndex
indexOf
lastIndexOf
includes
forEach
map
join
keys
pop
push
unshift
reduce
reduceRight
reverse
shift
slice
sort
splice
toLocaleString
flat(扁平化)
字符串
for of和for in
for of
1.遍历自己定义的类数组或者对象会报错
2.原型上必须有Symbol.iterator属性，就是一个迭代器
for in
1.index索引为字符串型数字，不能直接进行几何运算
2.遍历顺序有可能不是按照实际数组的内部顺序
使用for in会遍历数组所有的可枚举属性，包括原型。例如上栗的原型方法method和name属性
区别
底层原理
堆栈
浏览器渲染原理
1.css渲染
link
@import
style内嵌
2.js渲染
1.默认的script标签
2.默认的script src标签
3.defer和async
3.dom渲染
回流
重绘
回流和重绘的优化
扩展：并发
js的运算顺序
成员访问优先级是大于赋值的
连等
优先级mdn
基于http网络协议层的优化（输入URL到看到页面，中间经历的环节）
1.URL解析
2.缓存检测
1.强缓存
2.协商缓存
3.DNS解析
4.TCP三次握手
5.数据传输，基于传输协议
6.TCP四次挥手：断开TCP连接通道
性能优化汇总总结
1.优化总结
2.http2.0
检测数据类型的四种方式
1.typeof
2.instanceof
3.constructor
4.Object.prototype.toString.call
事件
事件绑定
DOM0
DOM2
事件对象
阻止事件默认行为
href=\"javascript:;\"
绑定事件的时候通过事件对象阻止
返回false
preventDefault
事件的传播机制(顺序执行)
1.捕获阶段
2.目标阶段
3.冒泡传播
阻止冒泡传播，ev.stopPropagation()
DOM2的事件绑定方法，第三个参数传true，就是说明在捕获阶段执行，用到的情况几乎没有，DOM0只能在目标阶段和冒泡阶段执行
图解
事件委托(事件代理)
onmouseover和onmouseenter的区别
深浅克隆
浅克隆
对象的浅克隆
循环遍历
展开运算符
Object.assign
数组的浅克隆
1.基于slice/concat...这些办法也可以实现
2.循环 forEach/map
3.基于展开运算符或者Object.assign
深克隆
JSON
自己实现深克隆
跨域（非同源策略）
什么是跨域
产生的原因
1.前后端分离，不在一个服务器部署
2.为了保证服务器合理利用，有图片服务器，视频服务器，前端服务器，后端服务器
3.项目太大，需要子域名，比如v.qq.com lol.qq.com，lol官网调用腾讯视频的视频
解决的方法
1.最早的方案，在开发的时候，后端的代码也放到前端的电脑上，而且搭建后的环境，之后用wamp修改Host文件实现
2.其他的方案，存在很短的时间
1.window.name
2.postMessage
3.jsonp
4.CORS跨域资源共享
5.webapck的proxy
6.nginx反向代理，真实生产环境用的
函数
非严格模式函数参数是可以映射的
函数具名化
函数防抖
函数节流
jquery
1.jquery的加载方式，暴露api，看看是否有Window，然后选择是commenjs方式还是esmoudle方式
2.jquery的使用时创建实例的方法，工厂模式
1.平时都是用new 创建实例，但是jquery直接$()就可以
3.平时$().each啥的函数都是在jquery的prototype上得
4.平时$.ajax的东西其实用的jquery的静态属性方法
3.jquery里面常用的数据类型检测的源码
4.jquery选择器
1.$() -> 返回的都是JQ类的实例(JQ对象) 「格式：空实例对象、类数组集合...」
2.[selector] 选择器支持的格式
3.把JQ对象(一般类数组集合) 转换为 原生DOM对象：可以调用浏览器提供的内置的属性和方法
4.优化点，如果不想链式调用，嫌不好看，可以这样
选择器实现的源码
5.each
Iterator迭代器和Generator生成器
Iterator
含义
拥有next方法用于依次遍历数据结构的成员
拥有Symbol.iterator属性的数据结构(值)，也就是可以直接for of的
部分类数组：arguments/NodeList/HTMLCollection...
String
Set
generator object
Iterator这个内置对象默认不具备Symbol.iterator，属于不可被遍历的数据结构
Symbol.iterator和Iterator内置类的实现源码
Generator
他不能被new，否则会报错，函数运行，就返回一个Generator实例
yield
每一次执行next，遇到yield会暂停函数的执行，value -> yield后面的值
return方法
执行next还可以传递值「第一次没必要，其余每次传递的值，都是给上一次yield的处理结果
yield如果返回一个Generator，想让他运行就加一个*
生成器函数虽然是个实例，但是其中的this不是其实例，而是window/undefined
javaScript
数据类型
引用数据类型(值类型)
Object
对象{}
正则/^$/
日期对象
Math
实例对象
function
基本数据类型
Number
NaN
boolean
null
undefined
symbol唯一值(es6)
数据类型转换，中间的几个步骤
其它的数据类型转换为number类型
Number(隐式转换)
Number('null') =0
Number(false) == 0
Number('12px') = NaN
parseInt（显式）
二进制的扩展
把其它进制转换为10进制
各种进制的样式
带小数点转换为10进制
0.1+0.2!=0.3
面向对象
对象的细分
自定义对象
new一个函数
自己写一个new
object.create()，创建一个对象，让其原型链指向所传的属性，但是创建的对象没有constructer，也可以说是纯粹的对象
原型和原型链
完整图解
建议看笔记几道题
简易图解
原型重构
将原型对象直接赋值一个对象会造成的影响
1.丢失了constructor
2.原始内置原型对象的属性和方法也会丢失
解决方案
object.assign()
用的很少，但也有这样用的
用的很少，但是有面试题
Function类和Object类的关系
万物接对象
Function.prototype === Function.__proto__ ===Object.__proto__
私有属性和公有属性的检测方法
hasOwnProperty检测是否为私有属性
hasPubProperty检测是否为公有属性（自己定义的，一层层递归向下找）
getPrototypeOf获取原型上的属性
创建基本数据类型值和引用数据类型值的时候是不同的
es6创建类和es5创建类
es6创建的fn只能被new，直接执行fn()会报错，图片里面有
JS中THIS的五种情况梳理
1.事件行为
2.普通函数执行
拓展hasOwnProperty和in
3.构造函数执行
4.箭头函数的this
5.call/apply/bind可以改变函数中this的指向（强行改变）
js继承的4种方式
1.原型继承
2.call继承
3.寄生组合继承
4.es6类继承
es6
结构赋值
...运算符
Arrray
from
of
flat
数组去重
Map
同步异步
异步场景（浏览器端）
定时器
JS中的事件绑定
Ajax/Fetch请求的发送（HTTP事务）
Promise设计模式管控异步编程的（包括：async/await...）
异步操作的运行机制
宏任务
ajax等http请求
微任务
promise(不是new Promise)
await
genertor
题
ajax的同步异步
AJAX的状态
异步过程
变量提升
如果出现if条件判断的话
如果出现事件绑定
作用域块的变量提升
作用域块变量提升详解图
形参赋值的变量提升
js打包模式
umd
主要是支持commonjs（node）后端和 amd规范（require.js定义的规范），常用工具打包是webpack，这样打包umd之后是直接在项目里面跑完之后在浏览器运行的
esm
这个打包之后是为es6准备，可以直接import啥的
分组件打包
这个就是打包成按需加载那种，具体得看项目代码
gulp
一般都是用来打包css样式，现在用的很少了
Promise
实例结构
promise.reject()返回一个错误状态的实例
promise.resolve()返回一个正确状态的实例
同步异步（then）
无定时器情况下，resolve和reject只是改变内部状态，改变是同步的
无定时器情况下，then里面的回调函数不会立即执行，而且放到eventqueue的微任务队列里面，等主进程结束再执行，所以是异步
有定时器情况下，先将定时器放到宏任务队列，then的时候，状态还是pending，定时器还没执行呢，所以不会执行then里面的回调函数，只是先存起来。等定时器结束之后，里面的resolve或者reject执行的时候，先同步状态，然后再讲then里的回调放到微任务队列，执行完定时器里面的其他主进程任务后，再执行微任务的回调函数
所以，可以说，promise是同步的（改变内部状态），只不过then的时候，或者resolve和reject执行的时候会出现异步
链式then
1.首先then这个方法会返回一个新的promise实例
2.不管执行的then里面失败的回调还是成功的回调，只要运行回调函数时不报错
1.运行回调函数时返回一个新的promise，那么这个新的promise就是下一个then运行的promise
2.运行回调返回一个值，就是说return一个新的值，那么下一个then就是运行成功的回调，参数就是return的值，如果没return值，那下一个then的成功回调的参数就是undefined
3.运行任何一个函数时报错了，下一个then就会运行失败的回调，参数是报错的原因
面试题（看不太懂），谁先知道可执行，就谁先执行
穿透性
1.如果then的时候成功回调是个null，那么下一个then的成功会掉就是上上个的成功回调返回的值
2.如果then是失败回调是个null，那么下一个then的失败回调就是上上个失败回调返回的值
catch
1.catch其实就是只处理状态为失败下做的事情
2.实现原理，内部其实就是运行了一个then，返回了一个新的promise，但是这个promise实例，但是这个实例then的时候，成功回调是null，直接穿透了，用上上个then的，所以新的promise实例只有一个参数，就是失败的回调，看备注代码
3.使用，一般项目使用，最后都加个catch
4.其实promise在new时候的，内部也做了一个 try catch的操作，所以只要代码报错了，catch方法就能捕获到
all
race
回调地狱指的就是那种不用promise然后包了很多次success的ajax请求
async（控制函数返回promise实例）
1.函数内部执行报错，则返回失败的promise实例，值是失败的原因
2.自己返回一个promise，以自己返回的为主
3.如果函数内部做了异常捕获，则还是成功态
4.返回一个值，就是返回的一个成功的promise实例，参数为传的值
1.面应该放置一个promise实例「我们书写的不是，浏览器也会把其变为promise实例」，await中断函数体中，其下面的代码执行「await表达式会暂停整个async函数的执行进程并出让其控制权」；只有等待await后面的promise实例是成功态之后，才会把之前暂停的代码继续执行，如果后面的promise实例是失败的，则下面的代码就不在执行了；
2.函数体中遇到await，后面代码该咋地咋地，但是下面的代码会暂停执行「把他们当做一个任务，放置在EventQueue的微任务队列中」
3.await是异步的微任务
收藏
0 条评论
回复 删除
下一页
