前端八股文经验分享:面试拷打经历 与 知识总结(纯个人总结)(一) - 持续更新ing

本文是一份全面的技术面试总结,包括数组扁平化方法、CSS布局技巧、Vue-Router的工作原理、JavaScript中的事件循环、闭包、箭头函数以及this指向等内容,还涉及HTTP与HTTPS的区别、HTTP请求类型和浏览器的存储方式等基础知识。

摘要生成于 C知道 ,由 DeepSeek-R1 满血版支持, 前往体验 >

一个面试面麻的人,在这里我把总结的所有面经分享给大家,希望大家能找到理想的工作。

我总结的面经内容囊括了自己面试题/笔试题,掘金、牛客、小红书、博客其他同学分享的内容,内容量很大,我会尽快更新的。都是个人总结的白话文描述,如有问题 欢迎指正。


1. 数组扁平化的方法

Ex. var arr=[1,[2,[3,[4,5]]]];  =>  arr=[1,2,3,4,5]

  1. 传统方法 递归
  2. 使用reduce函数递归遍历
  3. 数组强制类型转换
    对于数组对象,toString方法连接数组并返回一个字符串,其中包含用逗号分隔的每个数组元素。返回的字符串使用split分割成子字符串数组,最后将数组中每个元素的类型转换为Number
  4. 使用ES6的flat方法 flat(depth)
  5. 使用JSON的函数和正则表达式
    使用JSON的序列化函数stringify()先对数组进行序列化,再用正则去掉[],得到的结果在最外层加上[]后使用JSON.parse()恢复成数组对象。
  6. 扩展运算符与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渲染出得一部分,它是块级盒布局出现的区域,也是浮动元素进行交互的区域

二、触发条件

  1. 浮动元素,float不是none
  2. 绝对定位元素元素具有position为absolute或fixed
  3. 内联块,元素具有display:inline-block
  4. 表格单元格,元素具有display:table-cell
  5. 表格标题,元素具有display:table-caption
  6. 具有overflow且值不是visible的块元素
  7. display:flow-root
  8. column-span:all 应当总是会创建一个格式化上下文,即便具有column-span:all 的元素并不被包裹在一个多列容器中

三、BFC特性

  1. 内部的Box会在垂直方向上一个接一个的放置
  2. 垂直方向上的距离由margin决定
  3. BFC的区域不会与float的元素区域重叠
  4. 计算BFC的高度时,浮动元素也参与计算
  5. BFC就是页面上的一个独立容器,容器里面的子元素不会影响外面元素

四、为什么要使用BFC

  1. BFC可以解决子元素浮动导致父元素高度塌陷的问题
  2. BFC可以解决两个兄弟盒子之间的垂直距离是由他们的外边距所决定的,以较大为准
  3. 不被浮动元素覆盖
  4. 防止文字环绕

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中的 # 符号

  1. hash不会被包含在HTTP请求中,对后端完全没有影响,因此改变hash不会重载页面
  2. 404错误:仅hash符号之前的内容会被包含在请求中,即使没有做到对路由的全覆盖也不会返回404错误
  3. hash的原理是采用hashchange事件,可以在window监听hash的变化,我们在url后面随便添加一个 #xx 触发这个事件

二、history模式

  1. 需要特定浏览器支持,有back,forward,go,pushState等方法,提供了对历史记录修改的功能,当它们执行时,虽然改变了当前url,但浏览器不会立即向后端发送请求
  2. 404错误:前后端发起请求的url需一致,返回404错误
  3. his
评论
添加红包

请填写红包祝福语或标题

红包个数最小为10个

红包金额最低5元

当前余额3.43前往充值 >
需支付:10.00
成就一亿技术人!
领取后你会自动成为博主和红包主的粉丝 规则
hope_wisdom
发出的红包
实付
使用余额支付
点击重新获取
扫码支付
钱包余额 0

抵扣说明:

1.余额是钱包充值的虚拟货币,按照1:1的比例进行支付金额的抵扣。
2.余额无法直接购买下载,可以购买VIP、付费专栏及课程。

余额充值