一、变量类型和计算
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 合并分支
1006
被折叠的 条评论
为什么被折叠?
到【灌水乐园】发言
