📚关于该专栏: 该专栏的发布内容是前端面试中笔试部分真题、答卷类、机试等等的题目，题目类型包括逻辑题、算法题、选择题、问答题等等，除了内容的分享，还有解析和答案。真实来自某些互联网公司，坐标广东广州。
🔥🔥🔥 持 续 更 新🔥🔥🔥
😉专栏博主: 黛琳ghz，万粉博主，计算机软件专业博主，校专业第一，拥有十余项校级奖项、多项省级奖项、软件著作权一项等等。，专注于软件开发学习和分享，从事于软件开发行业。在 CSDN 获得有CSDN 实力新星（两期新星计划 TOP5）、CSDN 全栈领域新星创作者、CSDN 前端领域优质创作者、2022年度博客之星前端领域TOP 8、2022年度博客之星TOP 95、华为云社区云享专家、阿里云社区专家博主、CSDN 第四届猿创征文优质博文奖（分数85第一）、以及多项优秀TOP 博文，欢迎你的关注与访问、可私信交流学习、问答等等。
文章目录
📋前言
这篇文章来自一个全新的专栏，同时也是这个专栏的第一篇文章，该专栏的发布内容是前端面试中笔试部分真题、答卷类、机试等等的题目，题目类型包括逻辑题、算法题、选择题、问答题等等，除了内容的分享，还有解析和答案。真实来自某些互联网公司，坐标广东广州。
这篇文章分享的是2023年某科技公司前端开发（小程序开发）的面试过程以及问道的面试题，面试的岗位是初级前端开发，问的内容主要是与面试官交谈中、分析简历的过程中提出，主要包括有个人技术能力、简历的项目经验、工作经历来展开提问和交流，接下来通过本篇文章描述了。
🎯过程介绍
1️⃣收到面试前夕，首先准备好简历的内容，然后是投递简历，如果简历符合用人单位的要求，用人单位会发送面试邀请，我们要及时回复，接受面试请求，双方定好面试的时间。我们要做到如约而至，带好纸质版简历。面试前，要提前了解公司的位置和路程，尽量不要迟到，如果有特殊情况，一定要提前说明。然后要保持平稳的心态和做好充足的准备去迎接面试。
2️⃣到达目的地，假设公司楼下需要刷卡，去前台做好登记，或者打电话给面试官通知一下。然后进门前要记得敲门，做好基本的礼仪，不要大声喧哗，告知面试官是来面试的。
3️⃣把简历交给到面试官或者前台，如果需要填表个人信息之类，先填写完，然后等待面试官呼叫自己。面试官叫到你时，如果需要进房间门，记得敲门，入门要记得随手关门。
4️⃣如果是面对面的话，要保持座位对齐，不要斜视面试官，保持面对面的交谈。如果是并排坐，要保持轻松的状态，不要翘腿，与面试官交谈要有眼神交流，切忌不要一直低着头，逃避眼神交流。
5️⃣自我介绍，面试官在查阅简历的同时，会让你做个简单自我介绍，内容不要太复杂也不能太简短。名字、学校、专业、技术能力、擅长的能力、做过的项目…面试官会根据你自我介绍的内容中，提出相关的问题，比如说我说擅长 Vue 开发，面试官可能就会问关于 Vue 的知识点，除此之外还有该公司项目中所需的技能需求等等。如果符合要求，具体看什么公司，还会有二面、三面、技术面等等。
❗接下来我们来详细讲讲2023年某科技公司前端开发（小程序开发）面试过程提问的面试题。
🎯提出问题
接下来我们一起看看这次面试谈话过程中面试官问到的题目，题目大致如下。
- ✅Vue 生命周期
- ✅如何封装 axios（设置拦截器）
- ✅是否有关注微信小程序 API 的生态
- ✅异步编程 Promise
- ✅什么是堆和栈
- ✅es5 和 es6 区别、优势
- ✅uni 项目中如何处理 Vue 的全局变量配置问题
✅Vue 生命周期
作为前端开发的从业者，在面试中经常会遇到这个问题。Vue 生命周期可以说是必考的一道经典题目了。具体的生命周期钩子函数有哪些、做了什么…可以参考阅读我的这篇文章 前端开发面试题—Vue的生命周期 。
Vue 3生命周期图如下。
Vue 2生命周期图如下。
关于 Vue 的生命周期，可以从 Vue 2 和 Vue 3 的角度去说明。二者的之间区别，新增了什么，移除了什么，我们可以参考下面的这张图。
通过上面的图片，以及 Vue 2、Vue 3 生命周期的演示图，我们可以简单概括一下它们之间的主要区别。
- 新增了
beforeUnmount钩子函数：在 Vue.js 2 中，我们只有beforeCreate、created、beforeMount、mounted等钩子函数，用于在不同的生命周期阶段执行相关操作。但在 Vue.js 3 中，新增了beforeUnmount钩子函数，用于在组件卸载之前执行一些清理操作。 - 移除了
beforeDestroy和destroyed钩子函数：在 Vue.js 2 中，我们可以使用beforeDestroy和destroyed钩子函数，在组件销毁之前或之后执行相应操作。但在 Vue.js 3 中，这两个钩子函数被废弃，并被beforeUnmount取代。现在beforeUnmount函数会在组件销毁之前执行。 - 引入了
setup函数：在 Vue.js 3 中，引入了一个名为setup的新函数。setup函数主要用于替代 Vue.js 2 中的beforeCreate和created钩子函数。它是组件的入口点，在组件实例化之前执行，并接收props对象和context对象作为参数。setup函数可以返回一个包含模板中所需数据和方法的响应式对象。 - 生命周期函数的顺序变化：在 Vue.js 2 中，生命周期函数的执行顺序是
beforeCreate、created、beforeMount、mounted、beforeUpdate、updated等。而在 Vue.js 3 中，因为引入了setup函数，所以生命周期函数的执行顺序发生了变化，变为beforeCreate、setup、beforeMount、mounted、beforeUpdate、updated，以及beforeUnmount。
✅如何封装 axios（设置拦截器）
axios 是前端开发网络请求必不可少的操作之一，同时也是面试官经常会提问的知识点，因为网络请求、获取接口是前端开发工程师日常工作中必须要掌握的。既然用到了 axios，那么如何封装 axios 又会是一个考点了，然后又问道是否了解拦截器，什么是拦截器。关于这些内容可以参考阅读我的这篇文章 axios 实战进阶练习（ axios 封装篇）——基于 Vue3 + Node.js + ElementPlus 实现的联系人列表管理后台的 axios 封装实战 。
上面那篇文章的内容大致涵盖全了这个问题的答案了，具体如何封装 axios 还要具体到实际项目中，这里与面试官的交谈主要是这个思路，如何封装，用什么方法，其次是知道拦截器这个概念，以及在封装 axios 中，如何使用拦截器。具体还是看到那篇文章中吧，内容还是算全面的，这里就不再赘述了。
✅是否有关注微信小程序 API 的生态
是的没错，面试的岗位是关于小程序开发的，当然少不了关于小程序的问题。面试过程中面试官问道了是否有关注微信小程序 API 的生态，以及相关最新的内容，改动、更新什么的。
在微信官方文档中，我们可以看到很多 API，我们在开发微信小程序项目的时候，也会用到这些 API ，比如说一些界面交互、网络请求、获取信息、支付功能等等。当面试官问道这个问题时，也没有什么标准答案，只要能说清楚相关的或者自己实际开发中使用到的，问这个问题主要是想了解面试者的技术能力和对微信小程序 API 的熟悉程度。官方地址：微信小程序 API 。
✅异步编程 Promise
在与面试官谈及 axios 后，面试官又问是否知道 Promise ，当然了在前端网络请求中，异步获取网络接口是一个很常规的操作。而且在前端面试中，有一个很经典的考题，手写一个 Promise 。关于 Promise 我也写个一篇文章，可以参考阅读一下 浅理解回调地狱并使用 Promise 解决此问题 。
Promise 是 JavaScript 中一种用于处理异步操作的对象。它表示一个异步操作最终可能会成功（resolve）并返回结果，也可能会失败（reject）并返回错误信息。通过使用 Promise，可以更加优雅地处理异步操作，避免了回调地狱（callback hell）的问题。
Promise 对象具有三种状态：未完成（pending）、已完成（fulfilled/resolved）和已拒绝（rejected）。在创建 Promise 对象时，会传入一个执行器（executor）函数，该函数接受两个参数：resolve 和 reject。当异步操作成功时，调用 resolve 函数将 Promise 从未完成状态转为已完成状态，并传递结果；当异步操作失败时，调用 reject 函数将 Promise 从未完成状态转为已拒绝状态，并传递错误信息。
通过 Promise 对象，可以链式调用 then() 方法来处理异步操作的完成和拒绝情况。then() 方法接收两个参数：onFulfilled 和 onRejected，分别用于处理 Promise 对象被成功完成和被拒绝的情况。then() 方法返回一个新的 Promise 对象，因此可以链式调用多个 then() 方法来处理连续的异步操作。
除了 then() 方法外，Promise 还提供了其他方法，如 catch() 用于捕捉拒绝的 Promise，finally() 用于在 Promise 无论成功还是拒绝后都执行指定的操作。
代码演示如下所示。
// 创建一个异步操作的Promise对象
const myAsyncFunction = () => {
return new Promise((resolve, reject) => {
// 模拟异步操作
setTimeout(() => {
const randomNumber = Math.floor(Math.random() * 10);
if (randomNumber < 10) {
resolve(randomNumber); // 成功时调用resolve并传递结果
} else {
reject(new Error('操作失败')); // 失败时调用reject并传递错误信息
}
}, 1000);
});
};
// 使用Promise对象
myAsyncFunction()
.then(result => {
console.log('异步操作成功，结果为:', result);
// 返回一个新的Promise对象，可以继续链式调用
return result * 2;
})
.then(result => {
console.log('上一步的结果乘以2:', result);
// 返回一个新的Promise对象，可以继续链式调用
return result + 10;
})
.then(result => {
console.log('上一步的结果加上10:', result);
})
.catch(error => {
console.error('异步操作失败:', error.message);
})
.finally(() => {
console.log('无论成功还是失败，都会执行的操作');
});
创建了一个名为 myAsyncFunction 的异步操作的 Promise 对象。在 Promise 的执行器函数内部，通过 setTimeout 模拟了一个异步操作，1秒后随机返回一个结果。
然后，通过调用 myAsyncFunction() 来执行该异步操作，并使用 .then() 方法来处理异步操作完成的情况。在每个 .then() 方法中，我们可以对上一步的结果进行处理，并返回一个新的 Promise 对象，以实现链式调用。
-
如果异步操作成功完成，将会执行第一个
.then()方法内的回调函数，并打印结果。如果有多个.then()方法链式调用，它们将按照定义的顺序执行。 -
如果异步操作被拒绝（即失败），将会执行
.catch()方法内的回调函数，并打印错误信息。 -
无论异步操作是成功还是拒绝，最后都会执行
.finally()方法内的操作。
✅什么是堆和栈
栈是一种数据结构，它遵循后进先出（LIFO）的原则。在 JavaScript 中，栈被用于存储基本类型的变量和函数调用的上下文（包括局部变量、参数等）。每当一个函数被调用时，一个新的栈帧（stack frame）被创建并压入栈顶，表示该函数的执行上下文。当函数执行完成后，相应的栈帧会被弹出栈，控制权返回到上一个栈帧。这样的过程使得函数调用可以按照预期的方式进行。
堆是用于存储复杂对象的区域。对象在堆中分配内存，并通过引用进行访问。堆中的对象可以是动态分配的，它们的大小可能在运行时改变。在 JavaScript 中，所有的对象（包括数组、函数和对象字面量等）都存储在堆中。当对象不再被引用时，垃圾回收器会自动释放它们所占用的内存空间。
总结起来，栈用于存储基本类型的变量和函数调用的上下文，而堆用于存储复杂对象，并通过引用进行访问。了解堆和栈的概念有助于理解 JavaScript 中内存的分配和管理方式，以及如何正确地使用和处理对象和变量。
下面我将分别举一个堆和栈的示例：
堆的示例：
// 创建一个复杂对象（存储在堆中）
const obj = { name: 'Alice', age: 25 };
// 复制 obj 的引用
const obj2 = obj;
// 修改 obj2 的属性
obj2.age = 30;
console.log(obj.age); // 输出 30
在这个示例中，我们创建了一个包含 name 和 age 属性的对象 obj。然后，我们将 obj 的引用复制给了 obj2。由于这是一个复杂对象，在堆中分配了内存来存储这个对象。当我们修改 obj2 的属性时，实际上是修改了对象在堆中的内容。因此，打印 obj.age 也会得到修改后的值。
栈的示例：
// 定义一个函数，使用栈来保存局部变量的上下文
function count() {
let num = 1; // 局部变量 num 存储在栈中
function increase() {
num++; // num 仍然存储在栈中
}
increase(); // 调用 increase 函数
console.log(num); // 输出 2
}
count(); // 调用 count 函数
在这个示例中，我们定义了一个函数 count，它内部包含了一个局部变量 num。每当调用 count 函数时，都会创建一个新的栈帧来存储 num 变量的上下文。在 count 函数中，我们定义了另一个函数 increase，它可以访问和修改 num 变量。通过调用 increase 函数，并打印 num 的值，我们可以看到 num 变量的值在栈中被正确地保留和更新。
✅es5 和 es6 区别、优势
ECMAScript 6（简称ES6） 是于 2015 年 6 月正式发布的 JavaScript 语言的标准，正式名为 ECMAScript 2015（ES2015）。它的目标是使得 JavaScript 语言可以用来编写复杂的大型应用程序，成为企业级开发语言。es6 新增的语法是前端开发者都必须知道和学习的，es6 是一个很重要的改变的，2015 及之后的新增特性也都统称为 es6。
接下来我们来看看与面试官交谈中，提出的这个问题，es5 和 es6 之间的区别、优势，其实不用回答的非常官方，还是用自己对 es6 的理解来回答，比如说新增了什么语法，在编程上有什么变化等等。接下来我们来看看它们之间有一些区别和优势。
-
语法功能：ES6 引入了许多新的语法特性，如箭头函数、模板字符串、解构赋值、默认参数值、扩展运算符等。这些语法功能使代码更简洁、可读性更好，提高了开发效率。
-
模块化支持：ES6 增加了对模块化的官方支持，通过引入
import和export关键字，可以轻松地进行模块的导入和导出。这种模块化的支持使得代码组织更清晰，可维护性更强。 -
类与面向对象编程：ES6 引入了类（class）的概念，使得面向对象编程更加直观和易用。通过
class关键字可以定义类、构造函数、静态方法等，这种语法糖简化了对象的创建和继承机制。 -
箭头函数：ES6 中的箭头函数（Arrow Function）是一个更简洁的函数定义方式，它具有自动绑定
this的特性，避免了以往使用bind方法来绑定this的麻烦。 -
Promise 和异步编程：ES6 引入了 Promise 对象，提供了更便捷的处理异步操作的方式。Promise 可以解决回调地狱问题，并提供了更好的错误处理机制。
-
迭代器和生成器：ES6 引入了迭代器（Iterator）和生成器（Generator）的概念。迭代器提供了一种统一的遍历机制，使得数据结构可以以一种统一的方式进行迭代访问。生成器则是一种特殊的函数，可以通过
yield关键字暂停和恢复执行，简化了异步编程的复杂性。 -
新的数据结构：ES6 引入了新的数据结构，如Set、Map、WeakSet 和 WeakMap，它们提供了更强大和灵活的数据存储和操作功能。
总的来说，ES6 相对于 ES5 在语法功能、模块化支持、类与面向对象编程、箭头函数、Promise、迭代器和生成器、新的数据结构等方面有着明显的优势和改进。然而，由于浏览器的兼容性问题，某些新特性可能需要使用转译工具（如 Babel）来将 ES6 代码转换为 ES5 代码，以确保在较旧的浏览器中正常运行。
✅uni 项目中如何处理vue的全局变量配置问题
在与面试官交谈的过程，还谈到了关于 uni-app 的内容，问的是在 uni 项目中 如何处理 Vue 的全局变量配置问题。接下来我们看个例子。
在 uni 项目的根目录下，创建一个新的文件，例如 globalVariables.js 。
在 globalVariables.js 文件中定义全局变量。可以使用 export 关键字将这些变量导出，以便在其他组件或文件中使用。示例代码如下所示：
// globalVariables.js
export const appName = 'My App'
export const apiUrl = 'https://api.example.com'
export const themeColor = '#00aaff'
// 其他全局变量...
导入和使用全局变量：在需要使用全局变量的地方，可以导入并使用 globalVariables.js 文件中定义的变量。示例代码如下所示：
<!-- MyComponent.vue -->
<template>
<div>
<h1 :style="{ color: themeColor }">Hello World</h1>
<p>{{ appName }}</p>
<!-- 其他组件内容... -->
</div>
</template>
<script>
import { appName, themeColor } from '@/globalVariables'
export default {
// 组件中可以直接使用导入的全局变量
created() {
console.log(appName)
},
}
</script>
通过以上步骤，你可以在 uni 项目中实现 Vue 的全局变量配置。这样，你可以方便地管理和使用全局变量，避免在多个组件或文件中重复定义相同的变量。请注意，在导入全局变量时，确保路径正确，并使用正确的导入语法。
📝总结
这套面试题适用于前端开发初级的岗位（小程序方向的开发者），适合准备面试或者没有面试经验的同学进行练习和阅读，这套面试题涉及的内容也很多，包括了非常经典的 Vue 生命周期、异步编程、网络请求、小程序 API、uni-app 等等知识点。总体来说这个面试过程不算很难、都是很基础的内容，但是也是非常重要的知识点和技术。没有面试经验的伙伴可以看看这一篇文章，一定会大有收获的，全是干货。
681
被折叠的 条评论
为什么被折叠?
到【灌水乐园】发言
