|
阅读：67回复：5
2025年前端面试题汇总
一：JavaScript
1、闭包是什么？利弊？如何解决弊端？ 闭包是什么：JS中内层函数可以访问外层函数的变量，外层函数无法操作内存函数的变量的特性。我们把这个特性称作闭包。 闭包的好处： 隔离作用域，保护私有变量；有了闭包才有局部变量，要不然都是全局变量了。 让我们可以使用回调，操作其他函数内部； 变量长期驻扎在内存中，不会被内存回收机制回收，即延长变量的生命周期； 闭包的弊端：内层函数引用外层函数变量，内层函数占用内存。如果不释放内存，过多时，易引起内存泄露。 解决办法：无法自动销户，就及时手动回收，使用后将函数的引用赋null。 ———————————————— 2、深度拷贝 1、深拷贝与浅拷贝的区别？ 拷贝的层级不同，深拷贝是指每一层数据的改动都不会影响原对象和新对象，浅拷贝只有第一层的属性变动不互相影响，深层的数据变动还会互相影响。 2、实现拷贝的方法有哪些？ 浅拷贝：数组可以用拓展运算符[...arr]，或者slice().浅拷贝对象可以用Object.assign({},obj) 深拷贝：JSON.parse(JSON.stringify(obj))，或封装递归方法，或使用第三方库的方法，比如 JQuery的$.extend({},obj)，或者lodash 的cloneDeep 3、JSON.parse(JSON.stringify(obj))处理的缺点？ 如果对象中有属性是function或者undefined，处理后会被过滤掉； 如果属性值是对象，且由构造函数生成的实例对象，会丢弃对象的constructor； ———————————————— 3、如何判断空对象？如何区分数据类型？ 判断空对象 1、用JSON的stringify转成字符串后，跟'{}'对比； 2、用ES6，判断Object.keys(targetObject)返回值数组的长度是否为0； 3、用ES5，判断Object.getOwnPropertyNames(targetObject)返回的数组长度是否为0； 区分数据类型 ———————————————— 4、如何改变this指向？区别？
let a = { name: 'sunq', fn:function(action){ console.log(this.name + ' love ' + action); } } let b = {name:'sunLi'} // 正常的this指向 a.fn('basketball'); // sunq love basketball // 改变this指向，并体现call与apply的区别 a.fn.apply(b,['football']); // sunLi love football a.fn.call(b,'football'); // sunLi love football
a.fn.bind(b)('piano'); // sunLi love piano 5、沙箱隔离怎么做？ 使用iframe可以实现，变量隔离 6、浏览器存储，他们的区别？ localStorage：永久保存，以键值对保存，存储空间5M sessionStorage：关闭页签/浏览器时清空 cookie：随着请求发送，通过设置过期时间删除 session：保存在服务端 localStorage/sessionStorage是window的属性，cookie是document的方法 ———————————————— 7、常用的数组方法有哪些？
slice和splice的区别？
8、Dom事件流的顺序？什么是事件委托？ 当页面上的一个元素被点击时，先从document向下一层层捕获到该元素。然后再向上冒泡，一层层触发。 事件委托是将事件写在父级元素上，e.target是事件捕获时那个最小的元素，即选中的元素。所以可以根据e.target操作选中的元素。这样不需要给每个子元素绑定事件，代码更加简约。 ———————————————— 9、对原型链的认识？ js通过原型链模拟实现面向对象，比如通过实例化一个构造函数可以给每个对象挂载自己专属的属性，通过给类的prototype上赋方法是所有对象所共有的方法。每次实例化不再赋值原型链上的方法。 10、防抖/节流的区别？ 区别：防抖只会在最后一次事件后执行触发函数，节流不管事件多么的频繁，都会保证在规定时间段内触发事件函数。 防抖: 原理是维护一个定时器，将很多个相同的操作合并成一个。规定在delay后触发函数，如果在此之前触发函数，则取消之前的计时重新计时，只有最后一次操作能被触发。例如：实时搜索的input，一直输入就不发送。 ———————————————— let input = document.querySelector("input"); let time = null;//time用来控制事件的触发 input.addEventListener('input',function(){ //防抖语句，把以前的定时删除，只执行最后一次 if(time !== null){ clearTimeout(time); } time = setTimeout(() => { console.log(this.value);//业务实现语句，这里的this指向的是input },500) })
//节流 function throttle(fn, time) {//连续触发事件 规定的时间 let flag = false; return function () { //使用标识判断是否在规定的时间内重复触发了函数，没有就触发，有就不触发 if (!flag) {//不为假时 执行以下 fn();//触发事件 flag = true;//为真 setTimeout(() => {//超时调用（在规定的时间内只执行一次） flag = false; }, time); } } } mybtn.onclick = throttle(btn, 3000);//单击事件 节流(btn,3s时间) 使用场景 两者主要区别在于时间间隔的处理方式和触发函数的执行时机。防抖是等待一段时间后执行事件，如果在这段时间内再次触发事件，会重新等待；而节流是每隔一定时间执行一次事件，不管这段时间内触发了多少次事件。 防抖适合处理连续触发的事件，例如输入框的实时搜索；而节流适合限制高频触发的事件，例如滚动事件、鼠标移动事件。 ———————————————— 11、ES5，ES6如何实现继承？ 在 JavaScript 中，可以使用原型继承、构造函数继承和组合继承等方式来实现继承。下面分别介绍这些方式的实现方法： 1. 原型继承 原型继承是 JavaScript 中最基本的继承方式，通过将一个对象的原型设置为另一个对象来实现继承。 function Parent() { this.name = 'Parent'; } Parent.prototype.sayHello = function() { console.log('Hello from Parent'); }; function Child() { this.name = 'Child'; } Child.prototype = Object.create(Parent.prototype); Child.prototype.constructor = Child; const child = new Child(); child.sayHello(); // 输出：Hello from Parent 2. 构造函数继承构造函数继承通过在子类构造函数中调用父类构造函数来实现继承。这种方式可以实现实例属性的继承，但无法继承父类原型上的方法。 function Parent(name) { this.name = name; } function Child(name, age) { Parent.call(this, name); this.age = age; } const child = new Child('Child', 10); console.log(child.name); // 输出：Child 3. 组合继承 https://blog.csdn.net/sun_qqq/article/details/128944976?ops_request_misc=%257B%2522request%255Fid%2522%253A%2522dda5ecd1e5bec732083970e946076d13%2522%252C%2522scm%2522%253A%252220140713.130102334..%2522%257D&request_id=dda5ecd1e5bec732083970e946076d13&biz_id=0&utm_medium=distribute.pc_search_result.none-task-blog-2~all~top_positive~default-2-128944976-null-null.142^v102^pc_search_result_base7&utm_term=%E5%89%8D%E7%AB%AF%E9%9D%A2%E8%AF%95%E9%A2%98&spm=1018.2226.3001.4187 |
|
|
沙发#
发布于：2025-06-27 08:20
中11、异步操作放在created还是mouted？
如果有些数据需要在初始化时就渲染的，比如select下拉框的下拉内容，在mouted中请求。 好处如下：页面初始化速度更快，减少用户等待时间 放在 created 中有助于一致性，因为ssr 不支持 beforeMount 、mounted 钩子函数 ———————————————— 15、vue的import和node的require区别? JS支持两种模块化方式，commonjs和ES6。 commonjs用于nodejs，同步加载模块。ES6的import为了不卡顿，异步加载模块。 新版Nodejs也支持使用import，但是需要修改文件后缀名为.mjs，或者在package.json中，制定type字段为module。 ———————————————— 18、爷爷组件跟孙子组件如何交互？ Provide 和 Inject可以将父组件传给所有后代组件 在 Vue 3 中，provide 和 inject 是响应式的，但在 Vue 2 中它们不是响应式的。 20. vue中data为什么是一个函数？ 为保证组件的可重用性和独立性。 如果直接使用一个对象作为data，则不同的组件将共享同一个data对象，如果某个组件修改了data，则会影响到其他组件，导致数据混乱。所以data必须是一个函数，每个组件实例都有自己的独立的data数据。这样每次创建组件都会返回一个新的data对象就避免了组件间共享问题。 ———————————————— 2、ES6提供的解决异步交互的新方法？区别？ Promise、Genarate、async\await 3、宏任务和微任务有哪些？执行顺序？ js任务分为同步任务和异步任务，异步任务又分为宏任务和微任务，其中异步任务属于耗时的任务。 宏任务：整体代码script、setTimeout、setInterval、setImmediate（Node.js）、i/o操作（输入输出，比如读取文件操作、网络请求）、ui render（dom渲染，即更改代码重新渲染dom的过程）、异步ajax等 微任务：Promise（then、catch、finally）、async/await、process.nextTick（Node.js）、Object.observe(⽤来实时监测js中对象的变化，已废弃)、 MutationObserver(监听DOM树的变化) ———————————————— setTimeout(() => { console.log('执行啦') },0); 关于setTimeout要补充的是，即便主线程为空，0毫秒实际上也是达不到的。根据HTML的标准，最低是4毫秒。有兴趣的同学可以自行了解。 Promise参数中的Promise1是同步执行的 其次是因为Promise是microtasks，会在同步任务执行完后会去清空microtasks queues， 最后清空完微任务再去宏任务队列取值。 Promise.resolve().then(()=>{ console.log('Promise1') setTimeout(()=>{ console.log('setTimeout2') },0) }) setTimeout(()=>{ console.log('setTimeout1') Promise.resolve().then(()=>{ console.log('Promise2') }) },0) 这回是嵌套，大家可以看看，最后输出结果是Promise1，setTimeout1，Promise2，setTimeout2 ———————————————— 三、执行顺序js代码在执行的时候，会先执行同步代码，遇到异步宏任务则将异步宏任务放入宏任务队列中，遇到异步微任务则将异步微任务放入微任务队列中，当所有同步代码执行完毕后，再将异步微任务从队列中调入主线程执行，微任务执行完毕后，再将异步宏任务从队列中调入主线程执行，一直循环至所有的任务执行完毕（完成一次事件循环EventLoop）。 ———————————————— 题目练习： 练习一 setTimeout(function () { console.log('1');}) new Promise(function (resolve) { console.log('2'); resolve(); }).then(function () { console.log('3'); }) console.log('4'); //打印顺序 2 4 3 1 ———————————————— 练习二 console.log(1); // 最先执行 setTimeout(function () { console.log(2); let promise = new Promise(function (resolve, reject) { console.log(3); resolve(); }).then(function () { console.log(4); }); }, 1000); setTimeout(function () { console.log(5); let promise = new Promise(function (resolve, reject) { console.log(6); resolve(); }).then(function () { console.log(7); }); }, 0); let promise = new Promise(function (resolve, reject) { console.log(8); resolve() }).then(function () { console.log(9); }).then(function () { console.log(10) }); console.log(11); //执行顺序：1 8 11 9 10 5 6 7 2 3 4 ———————————————— 原文链接：https://blog.csdn.net/qq965359889/article/details/142518050 |
|
|
板凳#
发布于：2025-06-27 08:36
7、for in和for of的区别
九：敏捷开发 1、什么是敏捷开发？ 个人理解，敏捷开发就是把一个大需求拆为多个独立的小需求。每个小需求可独立开发、测试、上线，循序渐进的完成整个系统。每个版本的周期可能比较短，比如2周，或者4周。 比如某公司需要开发维护一个巨大的平台，可能把平台外包给多个公司干。如果用如上方法，并行开发，可显著缩减工期。 如果想要保证每个版本又快又顺利的上线，需要有完善的角色支持和流程规范。 ———————————————— |
|
|
地板#
发布于：2025-06-27 08:40
十一：计算机网络
1、http和https的区别？ HTTP 明文传输，数据都是未加密的，安全性较差，HTTPS（SSL+HTTP） 数据传输过程是加密的，安全性较好。 使用 HTTPS 协议需要到 CA（Certificate Authority，数字证书认证机构） 申请证书，一般免费证书较少，因而需要一定费用。证书颁发机构如：Symantec、Comodo、GoDaddy 和 GlobalSign 等。 HTTP 页面响应速度比 HTTPS 快，主要是因为 HTTP 使用 TCP 三次握手建立连接，客户端和服务器需要交换 3 个包，而 HTTPS除了 TCP 的三个包，还要加上 ssl 握手需要的 9 个包，所以一共是 12 个包。 http 和 https 使用的是完全不同的连接方式，用的端口也不一样，前者是 80，后者是 443。 HTTPS 其实就是建构在 SSL/TLS 之上的 HTTP 协议，所以，要比较 HTTPS 比 HTTP 要更耗费服务器资源。 ———————————————— 2、常见状态码
3、tcp与udp的区别？ TCP面向连接（如打电话要先拨号建立连接）提供可靠的服务，UDP是无连接的，即发送数据之前不需要建立连接，UDP尽最大努力交付，即不保证可靠交付。 UDP具有较好的实时性，工作效率比TCP高，适用于对高速传输和实时性有较高的通信或广播通信。 每一条TCP连接只能是一对一的，UDP支持一对一，一对多，多对一和多对多的交互通信。 UDP分组首部开销小，TCP首部开销20字节，UDP的首部开销小，只有8个字节。 TCP面向字节流，实际上是TCP把数据看成一连串无结构的字节流， UDP是面向报文的一次交付一个完整的报文，报文不可分割，报文是UDP数据报处理的最小单位。 UDP适合一次性传输较小数据的网络应用，如DNS，SNMP等。 ———————————————— 原文链接：https://blog.csdn.net/sun_qqq/article/details/128944976 |
|
|
4楼#
发布于：2025-06-27 08:48
十二：webpack
1、dependencies和devDependencies区别 安装时 --save -dev会放在devDependencies中，--save放在dependencies devDependencies中安装的是开发环境使用的包，比如eslint、vue-cli-serve； dependencies中安装的是生产和开发环境下都需要使用的包，比如vue、element、vant等 devDependencies中的依赖模块，在生产环境下不会被打入包内 ———————————————— 2、mongodb和mysql的区别？
|
|
|
5楼#
发布于：2025-06-27 08:55
十六：计算机原理
1、进程和线程的关系？ 进程（Process）和线程（Thread）是操作系统中两个重要的概念，它们之间存在密切的关系。 进程： 进程是程序执行的实例，是操作系统资源分配的基本单位。 每个进程都有独立的地址空间、代码、数据和系统资源。 进程之间相互独立，彼此不受影响。 线程： 线程是进程内的执行单元，是操作系统调度的基本单位。 同一进程内的多个线程共享相同的地址空间和系统资源。 线程之间可以方便地进行通信和数据共享。 ———————————————— 关系： 一个进程可以包含多个线程，这些线程共享进程的资源，包括内存、文件句柄等。 同一进程内的线程之间可以通过共享的内存空间进行通信和数据交换，这使得线程间的协作变得更加高效。 总的来说，进程和线程之间是包含关系，一个进程可以拥有多个线程，而线程则是在进程内执行的单元。通过线程的使用，可以更加高效地利用系统资源，提高程序的并发性和响应性。 ———————————————— 原文链接：https://blog.csdn.net/sun_qqq/article/details/128944976 二十：最近面，还未来及整理的 1、除了ajax还有哪些请求？await、aysic、table 2、url输入地址栏后发生什么事？ 1. URL 解析与处理 2. DNS 域名解析 3. 建立网络连接 (1) TCP 三次握手 (2) TLS 握手（HTTPS）客户端发送 ClientHello（支持的加密套件）
5. 服务器处理请求 6. 服务器返回响应 7. 浏览器渲染过程 (1) 解析 HTML (2) 解析 CSS (3) 构建渲染树 (4) 布局（Reflow） (5) 绘制（Paint） 8. 加载后续资源 9. 执行 JavaScript 3、加密方式有哪些？对称、非对称 4、mongodb好处？ 5、如何辨别ie8是否兼容？ |
|
