基于【🐯初/中级前端面经】中小型公司面试时都会问些什么? - 掘金 (juejin.cn)整理
js数据类型
1、 基本数据类型
1-1. Number 数值类型
1-2. String 字符串类型
1-3. Boolean 布尔类型
1-4. Undefined 空类型
1-5. Null 空类型
1-6. Symbol 表示唯一的值
2、 复杂数据类型
2-1. Object 对象类型
2-2. Array 数组类型
2-3. Function 函数类型
BFC
BFC是一个独立的渲染区域，规定了块元素如何排版布局
BFC的布局规则
1、定义快元素垂直排列，上下显示
2、同一个BFC区域内，上下的盒子margin会重叠
3、盒子左边的外边距会跟边框接触
4、BFC区域和浮动区域不会重叠
5、每个BFC都是独立的容器，相互之间不会影响
6、计算BFC高度时，浮动元素也参与高度计算
BFC的触发条件
根元素（html）
float属性不为none
position为absolute或fixed
display为inline-block、flex
overflow值为hidden、auto、scroll都会触发BFC
用BFC解决什么问题
1、自适应两栏布局（后台管理系统的布局）
2、BFC解决高度塌陷 （高度塌陷：如果用高度自适应，不管是min-height，还是不设置高度，如果内容浮动后，内容不占位，父元素识别不了内容的高度，高度塌陷）
3、BFC解决margin重叠
外边距常见的问题
1、上下margin重叠问题 如果两个盒子，上下显示，两个盒子中间都设置了外边距，上下的外边距会重叠，谁大听谁的
2、margin-top的传递问题 当父元素下的第一个子元素设置margin-top的时候，margin-top会错误的传递给父元素
盒模型
标准盒模型
总宽度：width+左右的padding+左右的border
怪异盒模型
总宽度：width(包含border和padding)
转换成怪异盒模型 box-sizing:border-box
axios请求拦截：
内部提供的CancelToken来取消请求
axios.get('/user/12345', {
cancelToken: source.token
}).catch(function(thrown) {
if (axios.isCancel(thrown)) {
console.log('Request canceled', thrown.message);
} else { // 处理错误 } });
XSS、CSRF
-
防御 XSS 攻击---跨站脚本攻击
- HttpOnly 防止劫取 Cookie
- 用户的输入检查
- 服务端的输出检查
-
防御 CSRF 攻击---跨站请求伪造
- 验证码
- Referer Check
- Token 验证
如何解决跨域问题
协议、域名、端口号 任意一个不同就是跨域
jsonp、nginx反向代理、cros后端处理
-
CORS支持所有类型的HTTP请求，是跨域HTTP请求的根本解决方案
-
JSONP只支持GET请求，JSONP的优势在于支持老式浏览器，以及可以向不支持CORS的网站请求数据。
-
不管是Node中间件代理还是nginx反向代理，主要是通过同源策略对服务器不加限制。
跨域问题实际上改的是 http 里面哪个参数
Access-Control-Allow-Origin
ES6新特性
解构赋值、函数入参初始化、symbol、扩展运算符（...）、set（它类似于数组，但是成员的值都是唯一的，没有重复的值。）、map
promise 都有哪些方法
then、catch、all、allSettled、race、any
虚拟 dom 和真实 dom 的区别
- 虚拟
DOM不会进行排版与重绘操作 - 虚拟
DOM就是把真实DOM转换为Javascript代码 - 虚拟
DOM进行频繁修改，然后一次性比较并修改真实DOM中需要改的部分，最后并在真实DOM中进行排版与重绘，减少过多DOM节点排版与重绘损耗
组件传值的 n 种方式
props、$refs、子父通信（$emit）、bus事件总线（非父子关系的组件通信）、vuex
bus事件总线
- 定义
Vue.prototype.$bus = new Vue()
- 向bus事件总线发送数据
bus.$emit(自定义事件名,数据包)
- 监听自定义事件，接收数据
bus.$on(自定义事件名,回调函数(参数))
ts 和 js 的优缺点
ts是js的超集，即你可以在ts中使用原生js语法。ts需要静态编译，它提供了强类型与更多面向对象的内容。ts最终仍要编译为弱类型，基于对象的原生的js，再运行。
闭包
闭包 即可以长久的保存变量，又不会造成全局污染
闭包就是能够读取其它函数内部变量的函数。
函数柯里化
fun(){
return 新fun()
}
fun()()()调用
微任务、宏任务、事件循环
宏任务：setTimeOut、setTimeInterval、同步任务：script代码块
微任务：Promise.then
事件循环：
-
宏任务：同步任务；setTimeOut回调进入宏任务队列
-
所有微任务
-
一个事件循环结束
-
setTimeOut回调
从输入 url 到页面渲染完成之间发生了什么
-
DNS解析url真实地址
-
http请求
-
tcp连接
-
拿到http请求报文
-
页面渲染
http 状态码都有哪些
1XX 表示消息
2XX 表示成功
3XX 表示重定向
4XX 表示请求出错
5XX 表示服务器出错
localStorage，session，cookie 的区别是什么
| localStorage | session | cookie |
|---|---|---|
| 5M | 5M | 4KB |
| 本地存储 | 会话存储 | 用于标识用户身份 |
| 只有主动清空的时候，才会清空 | 页面关闭、浏览器关闭，都会清空 | 服务器生成：可设置失效时间； (一般) 浏览器生成：关闭浏览器失效； |
原型对象、原型链
原型：每个对象所关联的__proto__(每一个对象从被创建开始就和另一个对象关联，从另一个对象上继承其属性，这个另一个对象就是 原型。)
这条由对象及其原型组成的链就叫做原型链。
用 Object.create(null) 创建的对象没有原型。
原型对象是为了解决构造函数中会存在方法，避免不必要的空间浪费
原型对象：构造函数.prototype=> 实例.fun指向同一内存空间
构造函数.prototype.fun=function()
Person.prototype === p1.__proto__; // true
Person.prototype === p2.__proto__; // true
p1.__proto__ === p2.__proto___; // true
构造函数.prototype.constructor===构造函数
function Person() {
// ...
}
console.log(Person.prototype.constructor === Person); // true
