前端面经（自用，持续更新）

不到99斤不改网名

已于 2024-09-12 15:08:46 修改

阅读量1k

点赞数 15

CC 4.0 BY-SA版权

文章标签：前端

于 2024-09-12 12:06:55 首次发布

本文链接：https://blog.youkuaiyun.com/Jamam/article/details/142134093

JS

1. 闭包closure

内层函数访问了外层函数的变量
好处：实现数据的私有，使得外部也可以访问函数内部的变量（通过调用）
弊端：
解决办法：

//闭包应用：统计函数调用次数
// 如果i是全局变量，可以很容易实现调用一次+1的效果
// 但全局变量，任何人都可以修改i的值，容易被篡改
// 闭包的使用
function count(){
    let i = 0//i是局部变量
    function fn(){
        i ++
        console.log(`函数被调用了${i}次`)
    }
    return fn//为了拿到函数必须return fn
}
const fun = count()
fun()
fun()
i = 1000
fun()

2.拷贝

浅拷贝:

1.数组用拓展运算符[…arr]，slice()
2.对象可以用Object.assign({},obj)

深拷贝：

递归
lodash库的深拷贝函数 _.cloneDeep
JSON.stringify()和JSON.parse()

3.判断空对象

Object.keys()返回属性名数组，数组长度为0
JSON.stringify 把对象转换成JSON字符串
Object.getOwnPropertyNames() 返回对象的属性名数组

4. 改变this的指向

fn.call(this,x,x,…)
fn.apply(this,[x,x,…])
fn.bind() 返回新的函数，不调用

5.浏览器存储，他们的区别？

localStorage：永久保存，以键值对保存，存储空间5M
sessionStorage：关闭页签/浏览器时清空
cookie：随着请求发送，通过设置过期时间删除
session：保存在服务端

localStorage/sessionStorage是window的属性，cookie是document的方法

8、Dom事件流的顺序？什么是事件委托？

当页面上的一个元素被点击时，先从document向下一层层捕获到该元素。然后再向上冒泡，一层层触发。

事件委托是将事件写在父级元素上，e.target是事件捕获时那个最小的元素，即选中的元素。所以可以根据e.target操作选中的元素。这样不需要给每个子元素绑定事件，代码更加简约。

9.原型链

原型链是一种查找规则，查找属性或者方法，比如Array.prototype.map()，数组方法挂在数组的最高构造函数Array的原型里
实现js面向对象，在prototype属性挂载共有的属性和方法

10.数组方法

slice(start,end)返回原数组的浅拷贝，从start开始不包括end（返回被删除的数组，原数组不改变）slice:切
splice(index,num,xxx)在index位置删除num个元素，xxx是从index开始加入的元素,返回被删除的数组，length为num（就地操作，原数组改变）splice：拼接

11.其他数据类型转化为Boolean

在这里插入图片描述

12.Symbol，Set，Map

let a = Symbol()
console.log(a) //Symbol()
console.log(typeof a) //symbol

如果你想问js引擎a的值是多少，引擎只会告诉你它是一个Symbol类型的值。也就是说，Symbol真正存储了什么并不重要，重要的是它的值永远不会与别的值相等。Symbol的中文释义为“标志，符号”，一个Symbol类型的变量只是为了标记一块唯一的内存而存在的。也正是因为这样，Symbol类型的值不参与运算。

在这里插入图片描述

html

CSS

1. BFC

块级格式上下文
解决float脱离文档流带来的高度坍塌问题
触发BFC：
在这里插入图片描述

2. 三栏布局

float流体布局 3个div left,rigth,mid（后面），left左浮动，right右浮动，左右设置宽高，中间只设置高度（主要内容无法最先加载）
BFC布局在mid里加上overflow：hidden
flex布局：父盒子container设置display:flex.3个div（left,mid,right),左右设置宽高，中间只有高度，加上flex-grow:1(占据剩余空间）
position布局:container使用position:relative。左右盒子使用position:absolute，并分别设置left、top和right、top为0,中间盒子设置margin的左右外边距分别为左右盒子的宽度

VUE

1.MVVM架构模型

1、什么是MVVM？
MVVM 是一种软件架构模式，用于将应用程序的用户界面（View）与数据和业务逻辑（Model）进行分离。MVVM 的核心思想是通过一个称为 ViewModel 的中间层来连接 View 和 Model。
M：Model（模型）代表应用程序的数据和业务逻辑。它负责数据的获取、处理和存储，以及定义应用程序的行为。
V：View（视图）代表应用程序的用户界面。它负责展示数据和与用户进行交互，通常由 HTML、XML 或其他类似的标记语言编写。
VM：ViewModel（视图模型）它是 View 和 Model 之间的连接层。ViewModel 处理用户界面上的事件和输入，并将它们转化为对 Model 的操作。它还负责从 Model 中获取数据，并将数据绑定到 View 中，使得数据的变化能够自动更新到用户界面上。
在这里插入图片描述
2、优点：
分离关注点： MVVM 将用户界面逻辑与数据和业务逻辑分离，提高了代码的可维护性和重用性。
双向绑定：通过双向绑定机制，ViewModel 可以将数据的变化实时反映到用户界面上，并可以响应用户界面的操作。
可测试性：由于 ViewModel 是纯粹的逻辑层，不依赖于具体的用户界面，因此可以更容易地进行单元测试。
3、缺点
复杂性：由于 MVVM 引入了新的组件（ViewModel）来连接 View 和 Model，这增加了应用程序的复杂性。
额外的开销：双向数据绑定以及数据变化的自动更新可能导致一些性能问题，特别是在处理大量数据或复杂 UI 时。