前端面试题(持续更新)

番茄和鸡蛋的故事

已于 2024-04-05 12:31:44 修改

阅读量171

点赞数 2

分类专栏： javaScript 文章标签： javascript

于 2024-04-04 11:12:19 首次发布

本文链接：https://blog.csdn.net/m0_60218525/article/details/137369046

版权

javaScript 专栏收录该内容

2 篇文章 0 订阅

订阅专栏

1、substr和substring的区别

substr 接受一个起始位置和一个长度作为参数，可以处理负数参数，且长度可以省略。有长度则是从起始位置开始向后到截取指定长度，无长度则是从起始位置到末尾。
substring 接受两个起始位置参数，会自动调整参数顺序，不接受负数参数，超出范围的参数会被视为 0。

2、watch和watchEffect的区别

watch 需要显式指定要监听的数据，并且可以访问新值和旧值，适合处理需要更多控制和处理异步操作的情况。
watchEffect 不需要显式指定要监听的数据，会自动追踪其内部依赖的响应式数据，并在数据变化时执行回调函数，适合用于自动追踪数据变化并执行副作用。

3、vite和webpack的原理是什么？

vite是利用浏览器对ES模块的原生支持，实现了快速的冷启动和热更新。
webpack则是通过构建模块的依赖关系来打包应用程序。

4、promise是什么？

promise是JavaScript用来处理异步操作的对象，避免了回调地狱的问题。

一共有三种状态：Pending(进行中)，Fulfilled(已成功)、Rejected(已失败)

5、浏览器缓存策略

第一次请求资源时，客户端向服务器请求资源，服务器返回响应资源，浏览器缓存都是从第二次请求开始的，浏览器缓存分为两大类：强缓存和协商缓存；

强缓存：可以设置缓存的有效时间和过期时间，在有效时间内，缓存不会失效，浏览器直接从浏览器缓存中读取资源。当缓存数据库中没有所请求的资源，或所请求的资源已失效时，才会从服务端请求资源。
协商缓存：需要在服务器端对比资源是否修改，来判断是否可以使用缓存。若未改动，则返回304状态码，浏览器拿到此状态码就可以直接使用缓存数据了。否则服务器返回新资源。

6、小程序的分包是什么？

小程序的分包功能是为了解决小程序包体积过大、首屏加载时间过长的问题而推出的一种优化手段。通过将小程序代码分割成多个包，可以实现按需加载，提高小程序的加载速度和性能。

7、vue中的data为什么是一个函数？

根实例对象data可以是对象也可以是函数，不会产生数据污染的情况。

组件实例中，data必须是一个函数，目的是为了防止多个组件实例对象之间共享一个data，产生数据污染，将data定义为一个函数，每次创建组件实例的时候，会调用该函数返回一个新的数据对象

8、vuex和pinia的实现原理

vuex和pinia都是基于vue.js响应式原理系统实现的状态管理库，在api和用法上有所不同，vuex是集中式存储，pinia则是利用Composition API来组织状态和操作

9、重排(回流)和重绘的区别

重排：当一部分或者全部因为元素的规模尺寸，布局隐藏等而需要重新构建的。

重绘：需要更改元素的颜色、背景、文字等，不需要更改布局的。

10、原型和原型链

原型是用来实现对象之间继承关系的。当我们访问一个原型的属性和方法时，如果这个对象本身没有这个属性和方法，JavaScript就会沿着原型链向上查找，直到找到为止。原型链的顶端是object.prototype，它是所有对象的原型，在原型链中，每个对象都有一个指向它的原型对象的引用，这样就形成了原型链。原型和原型链是JavaScript中实现继承的重要机制，通过原型链，我们可以实现对象之间的属性和方法的共享，从而提高代码的复用性和可维护性。

11、vue的响应式原理(双向数据绑定)

通过object.defineProperty进行数据劫持，每个属性添加getter和setter，getter进行依赖收集，当数据发生变化的时候触发setter，通知dep更新watcher，watcher收到dep数据变化通知后，就会执行相应的更新函数，并触发Compile中绑定的回调，从而去更新视图。