一个面试面麻的人,在这里我把总结的所有面经分享给大家,希望大家能找到理想的工作。
我总结的面经内容囊括了自己面试题/笔试题,掘金、牛客、小红书、博客其他同学分享的内容,内容量很大,我会尽快更新的。都是个人总结的白话文描述,如有问题 欢迎指正。
1. 数组扁平化的方法
Ex. var arr=[1,[2,[3,[4,5]]]]; => arr=[1,2,3,4,5]
- 传统方法 递归
- 使用reduce函数递归遍历
- 数组强制类型转换
对于数组对象,toString
方法连接数组并返回一个字符串,其中包含用逗号分隔的每个数组元素。返回的字符串使用split
分割成子字符串数组,最后将数组中每个元素的类型转换为Number
型- 使用ES6的flat方法 flat(depth)
- 使用JSON的函数和正则表达式
使用JSON的序列化函数stringify()
先对数组进行序列化,再用正则去掉[],得到的结果在最外层加上[]后使用JSON.parse()
恢复成数组对象。- 扩展运算符与some函数结合
先用some方法把数组中仍然是数组的项过滤出来,再执行concat操作,利用ES6的扩展运算符 ‘ ... ' 将其拼接到原数组中,最后返回。
2. CSS两列布局的实现方式
(1)float+calc() : 左列开启浮动+右列开启浮动+右列宽度为父级100%减去左列宽
(2)float+margin-left :左列开启浮动+右列增加外边距
(3)absolute+margin-left :开启定位脱离文档流+(同上)
(4)float+overflow : {overflow:hidden}
(5)flex布局:.container {display:flex}
.right {flex:1}
(6)grid布局
3. BFC
一、什么是BFC?
一个块格式化上下文(block formating context)是Web页面得可视化CSS渲染出得一部分,它是块级盒布局出现的区域,也是浮动元素进行交互的区域
二、触发条件
- 浮动元素,float不是none
- 绝对定位元素元素具有position为absolute或fixed
- 内联块,元素具有display:inline-block
- 表格单元格,元素具有display:table-cell
- 表格标题,元素具有display:table-caption
- 具有overflow且值不是visible的块元素
- display:flow-root
- column-span:all 应当总是会创建一个格式化上下文,即便具有column-span:all 的元素并不被包裹在一个多列容器中
三、BFC特性
- 内部的Box会在垂直方向上一个接一个的放置
- 垂直方向上的距离由margin决定
- BFC的区域不会与float的元素区域重叠
- 计算BFC的高度时,浮动元素也参与计算
- BFC就是页面上的一个独立容器,容器里面的子元素不会影响外面元素
四、为什么要使用BFC
- BFC可以解决子元素浮动导致父元素高度塌陷的问题
- BFC可以解决两个兄弟盒子之间的垂直距离是由他们的外边距所决定的,以较大为准
- 不被浮动元素覆盖
- 防止文字环绕
4. 水平居中方式
1、margin:auto; 元素有宽度有高度时
2.、position:absolute; 元素有宽度有高度时,设置position和margin为负的宽高的一半
元素有宽度有高度时,利用calc计算top和left
元素宽度、高度未知时,设置position和transform:translate(-50%, -50%)
3、弹性盒子:为其父元素设置display:flex
4、利用水平对齐和行高:设置text-align和line-height,实现单行文本水平垂直居中
5、grid:在网格项目中设置justify-self, align-self 或者 margin:auto
在网格容器上设置justify, align-items或者jsutify-content, align-content
5. Vue-Router的原理,两种模式
一、hash模式——即地址栏URL中的 # 符号
- hash不会被包含在HTTP请求中,对后端完全没有影响,因此改变hash不会重载页面
- 404错误:仅hash符号之前的内容会被包含在请求中,即使没有做到对路由的全覆盖也不会返回404错误
- hash的原理是采用hashchange事件,可以在window监听hash的变化,我们在url后面随便添加一个 #xx 触发这个事件
二、history模式
- 需要特定浏览器支持,有back,forward,go,pushState等方法,提供了对历史记录修改的功能,当它们执行时,虽然改变了当前url,但浏览器不会立即向后端发送请求
- 404错误:前后端发起请求的url需一致,返回404错误
- his