一、变量类型和计算
1-1.typeof能判断哪些类型
1.识别所有值类型
2.识别函数
3.判断是否是引用类型(不可再细分)
答案:1.识别所有值类型 2.识别函数 3.判断是否是引用类型(不可细分)
1-2.何时使用=== 何时使用==
答案:判断除了null之外,其他都一律用===(PS:==的话会做一些值的类型转换,如下图所示)
1-3.值类型和引用类型的区别
补充:
常见值类型:
let a // undefined
const s = 'abc'
const n = 100
const b = true
const s = Symbol('s')
常用引用类型:
案例及答案:
【PS:obj1 = {x: 101, y: 200}】
1-4.手写深拷贝
注意判断值类型和引用类型
注意判断是数组还是对象
递归
【未完待续】
1-5.变量计算-类型转换
1-5-1.字符串拼接
1-5-2.if语句和逻辑运算
truly变量: !!a === true的变量
falsely变量: !!a === false的变量
if语句里面判断里面的值是truly变量还是falsely变量,来确定执行。
逻辑判断
二、原型和原型链
考题
2-1.如何准确判断一个变量是不是数组
答:a instanceof Array
2-2.手写一个简易的jQuery,考虑插件和扩展性
【未完待续】
2-3.class的原型本质,怎么理解?
答:1.原型和原型链的图示
2.属性和方法的执行规则
知识点
2-4class和继承
1.constructor
2.属性
3.方法
2-5类型判断instanceof
2-6原型和原型链
1.原型
说明:
1)每个class都有显示原型
2)每个实例都有隐式原型__proto__
3)实例的__proto__指向对应class的prototype
基于原型的执行规则
1)获取属性xialuo.name或执行方法xialuo.sayhi()时
2)先在自身属性和方法寻找
3)如果找不到则自动去__proto__中查找
原型链
注:
1.class是ES6语法规范,由ECMA委员会发布
2.ECMA只规定语法规则,即我们代码的书写规范,不规定如何实现
3.以上实现方式都是V8引擎的实现方式
三、作用域和闭包
问答
3-1.this的不同应用场景,如何取值
答:1.作为普通函数
2.使用call apply bind
3.作为对象方法被调用
4.在class方法中调用
5.箭头函数
3-2.手写bind函数(补充:理解bind、apply、call全部手写)
3-3.实际开发中闭包的应用场景,举例说明
答:隐藏数据,如做一个简单的cache工具
3-4
说明:点击每次的结果都是10,PS:i是全局变量,执行点击事件的时候,for循环已经完成了,此时的i值是10
解决问题方法:
第一行和第二行代码修改
let a
for(let i = 0.........)
知识点
3-5.作用域和自由变量
作用域分为:
1.全局作用域
2.函数作用域
3.块级作用域
自由变量:
1.一个变量在当前作用域没有定义,但被使用了
2.向上级作用域,一层一层依次寻找,直到找到为止
3.如果到全局作用域都没找到,则报错 xx is not defined
3-6.闭包
作用域应用的特殊情况,有两种表现:
1.函数作为参数被传递
2.函数作为返回值被返回
PS:所有自由变量的查找,是在函数定义的地方,向上级作用域查找,不是在执行的地方。
3-7.this
1.作为普通函数
2.使用call apply bind
3.作为对象方法被调用
4.在class方法中调用
5.箭头函数
PS:this取什么值是在函数执行的时候决定的不是定义的时候决定。
四、异步和单线程
问答
4-1.同步和异步的区别
答:1.基于JS是单线程语言
2.异步不会阻塞代码执行
3.同步会阻塞代码执行
4-2.手写用Promise加载一张图片
答:
定义方法:
开始调用:
4-3.前端使用异步的场景有哪些
答:1.网络请求,如ajax图片加载
2.定时任务,如setTimeout
4-4.
答:执行顺序是"13542"
知识点
4-5.单线程和异步
JS是单线程语言,只能同时做一件事儿
浏览器和nodejs已经支持JS启动进程,如Web Worker
JS和DOM渲染共用同一个线程,因为js可修改DOM
遇到等待(网络请求,定时任务)不能卡主
需要异步
回调callback
PS:异步和同步,异步不会阻塞代码执行,同步会阻塞。
4-6.异步应用场景
1.网络请求,如ajax图片加载、定时任务,如setTimeout
4-7.callback hell 和Promise
callback hell
Promise
备注:7-5的内容总结很重要!!!!
五、JS异步--进阶
面试题
5-1.请描述event loop(事件循环/事件轮询)的机制,可画图
答:
PS:此处非答案,需要结合下面知识点来完成。面试官不仔细问和DOM渲染的关系,微任务和宏任务...的不同处理就不需要画。
5-2.什么是宏任务和微任务,两者有什么区别?
答:1.宏任务:setTimeout、setInterval、Ajax、DOM事件;微任务:Promise、async/await
2.微任务执行时机比宏任务要早
5-3.Promise有哪三种状态?如何变化?
答:1.pending resolved reject
2.pending -> resolved 或 pending -> rejected
3.变化不可逆
5-4.场景题-promise then 和catch的连接
答:1 3
答:1 2 3
答:1 2
5-5.场景题async/await语法
答:a 是个Promise函数 b是100
答:start a,100 b,200
5-6.场景题-promise和setTimeout的顺序
答:100 400 300 200
5-7.场景题-外加async/await的顺序问题
答:script start 、async1 start、async2、promise1、script end、【PS:之前的同步代码执行完毕,类似event loop-call stack被清空】、async1 end 、promise2、【PS:微任务执行完成,然后找寻尝试DOM渲染这里没有】、setTimeout【PS:触发Event Loop,执行宏任务】
知识点
5-1.event loop
概念:
1.JS是单线程运行的
2.异步要基于回调来实现
3.event loop就是异步回调的实现原理
补充:
JS如何执行?
1.从前到后,一行一行执行
2.如果某一行执行报错,则停止下面代码的执行
3.先把同步代码执行完,再执行异步
总结:
1.同步代码,一行一行放在Call Stack执行
2.遇到异步,会先记录下,等待时机(定时,网络请求等)
3.时机到了,就移动到Callback Queue
4.如Call Stack为空(即同步代码执行完)Event Loop开始工作
5.轮询查找Callback Queue,如有则移动到Call Stack执行
6.然后继续轮询查找(永动机一样)
DOM事件和event loop
1.JS是单线程的
2.异步(setTimeout, ajax等)使用回调,基于event loop
3.DOM事件也使用回调,基于event loop 【PS:点击事件之类】
5-2.promise进阶
5-2-1.三种状态
pending(过程中) resolved(解决成功了) rejected(失败了)
过程变化:
pending -> resolved 或 pending -> rejected
变化不可逆
5-2-2.状态的表现和变化
pending状态,不会触发then和catch
resolved状态,会触发后续的then回调函数
rejected状态,会触发后续的catch回调函数
5-2-3.then和catch对状态的影响
then正常返回resolved,里面有报错则返回rejected
catch正常返回resolved,里面有报错则返回rejected
5-3.async/await
5-3-1.概念和理解
异步回调 callback hell
Promise then catch链式调用,但也是基于回调函数
async/await是同步语法,彻底消灭异步
另一种写法:
5-3-2.async/await和Promise的关系
1.async/await是消灭异步回调的终极武器
2.但和Promise并不互斥
3.两者相辅相成
4.执行async函数,返回的是Promise对象
5.await相当于Promise的then
6.try...catch可捕获异常,代替了Promise的catch
5-3-3.异步的本质
1.async/await是消灭回调的终极武器
2.JS还是单线程,还得是有异步,还得是基于event loop
3.async/await只是一个语法糖,但这颗糖真香!
PS:和下面代码拼接
5-3-4. for...of
1.for...in(以及forEach for)是常规的同步遍历
2.for...of常用于异步的遍历
async/await总结:
1.async/await解决了异步回调,是一个很香的语法糖
2.async/await和Promise的关系,重要!
3.for...of的使用
5-4.微任务/宏任务
5-4-1.什么是宏任务,什么是微任务
宏任务:setTimeout,setInterval,Ajax,DOM事件
微任务:Promise async/await
微任务执行时机比宏任务要早
5-4-2.event loop和DOM渲染
JS是单线程的,而且和DOM渲染共用一个线程
JS执行的时候,得留一些时机供DOM渲染
每次Call Stack清空(即每次轮询结束),即同步任务执行完
都是DOM重新渲染的机会,DOM结构如有改变则重新渲染
然后再去触发下一次Event Loop
5-4-3.微任务和宏任务的区别
宏任务:DOM渲染后触发,如setTimeout
微任务:DOM渲染前触发,如Promise
根本区别:
微任务是ES6语法规定的
宏任务是由浏览器规定的
JS Web API部分
六、DOM
问答
6-1.DOM是哪种数据结构
答:树(DOM树)
6-2.DOM操作的常用API
答:DOM节点操作、DOM结构操作 【PS:知识点中有说】、property和attribute
6-3.attr和property的区别
答:1.property:修改对象属性,不会体现到html结构中
2.attribute:修改html属性,会改变html结构
3.两者都有可能引起DOM重新渲染
6-4.一次性插入多个DOM节点,考虑性能
答:1.考虑DOM节点的缓存
2.通过创建DocumentFragment来操作
知识点
6-5.DOM本质
DOM即我们所看到的网页,其在浏览器背后的文档结构(树状分支结构),涵盖了每一个节点(称之为对象)。可以通过JS等言语去操作改变每一个节点,达到我们想要呈现的效果。
DOM是对象,JS是语言,语言可以操作对象。
6-6.DOM节点操作
获取DOM节点
attribute
property
总结:
property:修改对象属性,不会体现到html结构中
attribute:修改html属性,会改变html结构
两者都有可能引起DOM重新渲染
6-7.DOM结构操作
1.新增/插入节点
2.获取子元素列表,获取父元素
【PS:过滤text节点,这块需要自己补充】
const childNodes = Array.prototype.slice.call(child=>{
if(child.nodeType === 1){
return true;
}
return false
})
3.删除子节点
6-8.DOM性能(如何优化)
DOM操作非常“昂贵”,避免频繁的DOM操作
如何优化?
1.对DOM查询做缓存
2.将频繁操作改为一次性操作
七、BOM操作
问答
7-1.如何识别浏览器的类型
答:
7-2.分析拆解url各个部分
答:
知识点
7-3.navigator
7-4.screen
7-5.location
7-6.history
八、事件绑定和事件冒泡
问答:
8-1.编写一个通用的事件监听函数
答:
8-2.描述事件冒泡的流程
答:1.基于DOM树形结构
2.事件会顺着触发元素往上冒泡
3.应用场景:代理
8-3.无限下拉的图片列表,如何监听每个图片的点击
答:1.事件代理
2.用e.target获取触发元素
3.用matches来判断是否是触发元素
知识点:
8-4.事件绑定
8-5.事件冒泡
8-6.事件代理
代码简洁
减少浏览器内存占用
但是不要滥用
【PS:代理需结合视频更进一步学习!课堂笔记完成!!!】
九、ajax
问答
9-1.手写一个建议的ajax
答:
9-2.跨域的常用实现方式
答:1.JSONP 2.CORS
知识点
9-3.XMLHttpRequest
9-4.状态码
xhr.readyState
0-(未初始化)还没有调用send()方法
1-(载入)已调用send()方法,正在发送请求
2-(载入完成)send()方法执行完成,已经接收到全部响应内容
3-(交互)正在解析响应内容
4-(完成)响应内容解析完成,可以在客户端调用
xhr.status
2xx-表示成功处理请求,如200
3xx-需要重定向,浏览器直接跳转,如301,302,304
4xx-客户端请求错误,如404 403
5xx-服务器端错误
9-5.跨域:同源策略,跨域解决方案
9-5-1.什么是跨域(同源策略)
ajax请求时,浏览器要求当前网页和server必须同源(安全)
同源:协议、域名、端口,三者必须一致
加载图片css js可无视同源策略
<img src=跨域的图片地址 />
<link href=跨域的css地址 />
<script src=跨域的js地址></script>
<img />可用于统计打点,可使用第三方统计服务
<link /> <script>可使用CDN,CDN一般都是外域
<script>可实现JSONP
跨域:
所有的跨域,都必须经过server端允许和配合
未经server端允许就实现跨域,说明浏览器有漏洞,危险信号
9-5-2.JSONP
访问https//....,服务端可以任意拼接数据返回,只要符合html格式要求
同理于<script src="....js" />
概念:
1.<script>可绕过跨域限制
2.服务器可以任意动态拼接数据返回
3.<script>可以获得跨域的数据,只要服务端愿意返回
jQuery实现JSONP
9-5-3.CORS(服务端支持)
服务器设置http header
9-5.实际项目中ajax的常用插件
1.jquery中
2.fetch
3.axios
十、如何理解cookie
问答
10-1.描述cookie localStorage sessionStorage区别
答:1.容量区别 cookie只有4KB,localStorage和sessionStorage有5M
2.API的易用性 cookie使用document.cookie,localStorage和sessionStorage使用setItem getItem
3.是否跟随http请求发送出去,cookie发送,其他不
PS:localStorage和sessionStorage区别
4.localStorage数据会永久存储,除非代码或手动删除
5.sessionStorage数据只存在于当前会话,浏览器关闭则清空
6.一般用localStorage会更多一些
知识点
10-2.cookie
本身用于浏览器和server通讯
被“借用”到本地存储来
可用document.cookie='...'来修改
PS:同一个key会覆盖,不同key会追加
缺点:
1.存储大小,最大4KB
2.http请求时需要发送到服务端,增加请求数据量
3.只能用document.cookie='...'来修改,太过简陋
10-3.localStorage和sessionStorage
共同:
HTML5专门为存储而设计,最大可存5M
API简单易用setItem getItem
不会随着http请求被发送出去
区别:
localStorage数据会永久存储,除非代码或手动删除
sessionStorage数据只存在于当前会话,浏览器关闭则清空
一般用localStorage会更多一些
十一、http
问答
11-1.http常见的状态码有哪些?
答:200 成功
301 永久重定向(配合location,浏览器自动处理)
302 临时重定向(配合location,浏览器自动处理)
304 资源未被修改
403 没有权限
404 资源未找到
500 服务器错误
504 网关超时
11-2.http常见的header有哪些 http method有哪些(分开答)
答:见知识点
11-3.什么是Restful API
答:见知识点
11-4.描述一下http的缓存机制(重要)
答:见知识点
知识点
11-5.状态码分类
1xx服务器收到请求
2xx请求成功,如200
3xx重定向,如302
4xx客户端错误,如404
5xx服务端错误,如500
11-6.常见状态码
200 成功
301 永久重定向(配合location,浏览器自动处理)
302 临时重定向(配合location,浏览器自动处理)
304 资源未被修改
403 没有权限
404 资源未找到
500 服务器错误
504 网关超时
11-7.关于协议和规范
就是一个约定
要求大家都跟着执行
不要违反规范,例如IE浏览器
11-8.http methods
1.传统的methods
get获取服务器的数据
post向服务器提交数据
简单的网页功能,就这两个操作
2.现在的methods
get获取数据
post新建数据
patch/put更新数据
delete删除数据
3.Restful API
一种新的API设计方法(早已推广使用)
传统API设计:把每个url当做一个功能
Restful API设计:把每个url当做一个唯一的资源
PS:
如何设计成一个资源
1.尽量不用url参数
传统API设计:/api/list?pageIndex=2
Restful API设计:/api/list/2
2.用method表示操作类型
传统API设计:
post请求 /api/create-blog
post请求 /api/update-blog?id=100
get请求 /api/get-blog?id=100
Restful API设计:
post请求 /api/blog
patch请求 /api/blog/100
get请求 /api/blog/100
11-9.http headers
1.常见的Request Headers
Accept 浏览器可接收的数据格式
Accept-Encoding浏览器可接收的压缩算法,如gzip
Accept-Language 浏览器可接收的语言,如zh-CN
Connection: keep-alive一次TCP连接重复使用
cookie
Host
User-Agent(简称UA)浏览器信息
Content-type 发送数据的格式,如application/json
2.常见的Response Headers
Content-type返回数据的格式,如application/json
Content-length 返回数据的大小,多少字节
Content-Encoding 返回数据的压缩算法,如gzip
Set-Cookie 服务端修改cookie
自定义header
缓存相关的headers
Cache-Control Expires
Last-Modified If-Modified-Since
Etag If-None-Match
11-10.http缓存
11-10-1.关于缓存的介绍
补充:哪些资源可以被缓存----静态资源(js css img)
11-10-2.http缓存策略(强制缓存+协商缓存)
1.强制缓存
Cache-Control
Response Headers中
控制强制缓存的逻辑
例如Cache-Control: max-age = 31536000(单位是秒)
表示将该内容在客户端缓存一年
缓存过期之后,重新发起请求,重新缓存。
cache-control的值:
max-age 设置缓存的最大过期时间 【用的比较多】
no-cache 不用本地强制缓存,正常向服务端请求 【用的比较多】
no-store 不用本地强制缓存,也不用服务端的缓存
private 只允许最终用户缓存
public 允许中间路由代理缓存
Expire 【面试基本不会考】
同在Response Headers中 同为控制缓存过期,已经被Cache-Control代替
协商缓存
a.服务端缓存策略 【服务端来判断是否缓存】
b.服务器判断客户端资源,是否和服务端资源一样
c.一致则返回304,否则返回200和最新的资源
资源标识:
在Response Headers中有两种
a.Last-Modified 资源的最后修改时间
b.Etag资源的唯一标识(一个字符串,类似人类指纹)
Headers示例
Last-Modified和Etag
1.会优先使用Etag
2.Last-Modified只能精确到秒级
3.如果资源被重复生成,而内容不变,则Etag更精确
http缓存-综述
11-10-3.刷新操作方式,对缓存的影响
1.三种刷新操作
a.正常操作:地址栏输入url,跳转链接,前进后退等
b.手动刷新:F5,点击刷新按钮,右击菜单刷新
c.强制刷新:ctrl + F5
正常操作:强制缓存有效,协商缓存有效
手动刷新:强制缓存失效,协商缓存有效
强制刷新:强制缓存失效,协商缓存失效
十二、前端开发常用的开发工具
git,调试工具,抓包,webpack babel,linux常用命令
12-1.git
最常用的代码版本管理工具
大型项目需要多人协作开发,必须熟练使用git
常用git命令
git add .
git checkout xxx
git commit -m 'xxx'
git push origin master
git pull origin master
git branch
git checkout -b xxx / git checkout xxx
git merge xxx 合并分支