No105.精选前端面试题，享受每天的挑战和学习

📈「作者简介」：前端开发工程师 | 蓝桥云课签约作者 | 技术日更博主 | 已过四六级
📚「个人主页」：阿珊和她的猫
🕐「简历必备」前后端实战项目（推荐：⭐️⭐️⭐️⭐️⭐️）

• Vue.js 和 Egg.js 开发企业级健康管理项目
• 带你从入门到实战全面掌握 uni-app

手写new

当我们使用new关键字调用一个函数时，会进行如下的操作来模拟new的工作原理：

1. 创建一个空对象，作为实例。

2. 将该对象的原型指向构造函数的prototype属性。

3. 将构造函数的this指向该实例对象。

4. 执行构造函数中的代码，初始化实例对象。

5. 如果构造函数返回一个对象，则返回该对象；否则，返回创建的实例对象。

下面是一个简单的手写new的示例：

function myNew(constructor, ...args) {// 创建一个空对象，作为实例const instance = Object.create(constructor.prototype);// 将构造函数的 this 指向该实例对象，并执行构造函数const result = constructor.apply(instance, args);// 如果构造函数返回了一个对象，则返回该对象if (typeof result === 'object' && result !== null) {return result;}// 否则返回创建的实例对象return instance;
}

使用myNew来模拟new的效果：

function Person(name, age) {this.name = name;this.age = age;
}Person.prototype.greet = function() {console.log(`Hello, my name is ${this.name}`);
};const john = myNew(Person, 'John', 25);
john.greet(); // 输出：Hello, my name is John
console.log(john.age); // 输出：25

以上代码演示了如何手写一个简单的new函数来创建实例对象。
实际上，new还涉及到原型链等更多的细节，但本示例中基本涵盖了new的核心原理。

手写Map

要手写一个简单的Map，我们可以使用 JavaScript 中的对象来模拟实现。下面是一个基本的示例：

function MyMap() {this.entries = {}; // 用于存储键值对的对象
}MyMap.prototype.set = function(key, value) {this.entries[key] = value; // 将键值对存储到对象中
};MyMap.prototype.get = function(key) {return this.entries[key]; // 根据键获取对应的值
};MyMap.prototype.has = function(key) {return this.entries.hasOwnProperty(key); // 判断是否存在指定的键
};MyMap.prototype.delete = function(key) {delete this.entries[key]; // 删除指定的键值对
};MyMap.prototype.clear = function() {this.entries = {}; // 清空所有的键值对
};MyMap.prototype.size = function() {return Object.keys(this.entries).length; // 返回键值对的数量
};MyMap.prototype.keys = function() {return Object.keys(this.entries); // 返回所有的键
};MyMap.prototype.values = function() {return Object.values(this.entries); // 返回所有的值
};MyMap.prototype.entries = function() {return Object.entries(this.entries); // 返回所有的键值对
};

使用示例：

const map = new MyMap();
map.set('key1', 'value1');
map.set('key2', 'value2');
map.set('key3', 'value3');console.log(map.get('key2')); // 输出：value2
console.log(map.has('key3')); // 输出：truemap.delete('key1');
console.log(map.size()); // 输出：2console.log(map.keys()); // 输出：[ 'key2', 'key3' ]
console.log(map.values()); // 输出：[ 'value2', 'value3' ]
console.log(map.entries()); // 输出：[ [ 'key2', 'value2' ], [ 'key3', 'value3' ] ]map.clear();
console.log(map.size()); // 输出：0

请注意，以上只是一个简单的示例，实际上，JavaScript 中的Map还有很多其他功能，例如迭代器、forEach 方法等。为了实现一个完整的Map，还需要更复杂的代码逻辑和更多的功能实现。这里给出的示例只是一个基本的参考实现。

get和post区别

GET 和 POST 是HTTP协议中最常见的两种请求方法，它们有以下几个区别：

1. 请求位置： GET 请求将参数编码为URL的一部分，而 POST 请求将参数包含在请求体中。

2. 参数传递方式： GET 请求使用查询字符串来传递参数，即将参数拼接在URL后面，例如：http://example.com/?param1=value1&param2=value2。而 POST 请求将参数放在请求体中，不会以明文形式显示在URL中。

3. 请求长度限制： GET 请求对URL长度有限制，因为URL的长度受到浏览器和服务器的限制，通常不应超过2,048个字符。而 POST 请求的参数放在请求体中，没有明确限制。

4. 安全性： GET 请求的参数在URL中，可能会被浏览器、代理服务器等存储或缓存起来，容易被第三方获取和查看。而 POST 请求的参数在请求体中，相对于 GET 请求更安全，能够保护参数的机密性。

5. 请求语义： GET 请求一般用于获取数据，具有幂等性，即多次请求得到的结果是相同的。POST 请求一般用于提交数据、发送请求，可能会对服务器端产生影响。

6. 缓存处理： GET 请求可以被浏览器缓存，下次请求相同的URL时，可以直接从缓存中获取结果，提高性能。而 POST 请求会被视为非幂等的，不会被缓存。

综上所述，GET 适合用于获取数据，传递少量参数，对安全性要求较低，不会对服务器产生副作用。POST 适合用于提交数据，传递大量参数，具有更好的安全性，可能对服务器产生副作用。

需要根据实际需求和具体场景选择使用 GET 或 POST 请求方法。

发起post请求的时候，服务端是怎么解析你的body的（content-type），常见的content-type都有哪些，发文件是怎么解析的（FormData），如果多个文件，文件之间是如何分割的（boundary）

当客户端发起 POST 请求时，服务端需要解析请求体中的数据。解析方式取决于请求的 Content-Type。

常见的 Content-Type 类型有：

1. application/x-www-form-urlencoded：表单数据默认的 Content-Type。请求体中的参数会使用 URL 编码格式（key1=value1&key2=value2）进行传递。

2. multipart/form-data：多部分表单数据的 Content-Type。常用于上传文件。参数使用一定的分隔符分隔，每个部分包含一个 HTTP 头和正文，每个部分都包含一个 Content-Disposition 头。

3. application/json：JSON 数据的 Content-Type。请求体中的数据是以 JSON 字符串的形式传递。

服务端根据 Content-Type 类型选择相应的解析方式来处理请求体中的数据。

对于上传文件的情况，通常使用 multipart/form-data 类型的 Content-Type 并使用 FormData 对象进行发送。FormData 对象可以自动将表单数据编码为适合发送的格式，并在请求头中设置正确的 Content-Type。

多个文件之间的分割是通过 boundary 来实现的。boundary 是一个随机生成的字符串，前缀为 --。每个文件部分都以 --boundary 开头，以 --boundary-- 结束。每个部分包含一个 HTTP 头部和正文，其中 Content-Disposition 头部指定了该部分的名称以及文件名。

服务端接收到请求后，会通过解析请求头中的 Content-Type 和解析具体的边界字符串来正确地分割和解析文件部分。

需要注意的是，具体的实现可能因服务端框架和语言而有所不同。以上是一般性的解析方式和常见的 Content-Type 类型的介绍。在实际开发中，应根据服务端的要求和框架的文档来处理 POST 请求的解析。

说下https，证书是做什么用的

HTTPS（Hypertext Transfer Protocol Secure）是一种基于传输层安全协议（TLS/SSL）的加密协议，用于在网络上安全地传输数据。它在不安全的公共网络上创建了一个加密的通信通道，确保数据的机密性和完整性。

HTTPS 使用了 SSL/TLS 协议来加密通信数据，防止中间人攻击、窃听和数据篡改。它通过以下步骤实现安全的通信：

1. 建立安全连接： 客户端发起 HTTPS 请求时，服务端会返回一个证书，包含了服务端的公钥。客户端使用这个证书验证服务端的身份，并生成一个随机的对称密钥，然后使用服务端的公钥对该对称密钥进行加密。这样客户端和服务端之间就建立了一个安全的连接。

2. 加密通信： 之后客户端和服务端使用对称密钥进行加密解密，对通信数据进行加密，保证了数据在传输过程中的机密性。

3. 数据完整性验证： 在通信过程中，使用消息摘要算法来计算消息的校验和，并将其附加到每个消息上。接收方收到消息后，会重新计算校验和，如果校验和不匹配，表示消息可能被篡改过，通信会被终止。

证书在 HTTPS 中起着非常重要的作用，它用于验证服务端的身份。证书由数字证书颁发机构（CA）颁发，包含了服务端的公钥以及其他与身份验证相关的信息。客户端在建立连接时会验证证书的有效性，确保服务端是可信的。

通过证书验证，客户端可以确认它正在与预期的服务端进行加密通信，而不是被中间人进行攻击或窃听。如果证书无效或过期，客户端会发出警告或中止连接。

总之，HTTPS 通过加密和证书验证确保了数据的机密性、完整性和认证，为用户提供了更安全的网络通信环境。

关于项目经验

在前端开发中，当你描述项目经验时，可以按照以下步骤进行：

1. 项目概述： 开始时，简要概述整个项目的背景和目标。说明项目是什么以及你的角色和职责。例如，你可以介绍项目的类型（如Web应用、移动应用等）和行业领域。

2. 技术栈和工具： 提及项目使用的技术栈和相关工具。包括前端框架（如React、Angular、Vue等）、CSS预处理器（如Sass、Less）、版本控制系统（如Git）、构建工具（如Webpack、Grunt、Gulp）等。

3. 功能和模块： 简要描述你在项目中实现或负责的功能和模块。重点说明你在项目中的具体贡献和实现的特定功能。例如，你可能负责用户界面的设计和开发，与后端进行数据交互，优化性能，实现动画效果等。

4. 问题与挑战： 提及你在项目中遇到的问题和挑战，以及你是如何解决它们的。这可以体现你的问题解决能力和技术挑战的应对能力。例如，你可能处理过响应性问题、浏览器兼容性问题、性能优化问题等。

5. 团队合作： 强调你在项目开发过程中与团队合作的经验。说明你如何与设计师、后端开发人员、产品经理等合作，如何协调工作，并解决合作中的沟通和协调问题。

6. 项目亮点： 强调项目的亮点和成果，例如迭代周期、发布版本、用户反馈等方面的成功指标或成就。说明你在项目中获得的具体结果和影响。

7. 持续学习： 提及你在项目中学到的新技术和经验，以及你如何持续学习和提升自己的技能。强调你的学习能力和对前端开发领域的投入。

在描述项目经验时，尽量使用具体的事例和数据来支持你的观点。使用清晰、简洁的语言，避免使用行业术语和技术细节过多的表达。突出你的贡献和技术成就，以及你与团队合作的能力。这样能够更好地展示你在前端开发领域的实际经验和技能。

vue+ts的项目主要会有什么坑点

在使用 Vue.js 结合 TypeScript (TS) 进行项目开发时，可能会遇到一些常见的坑点和挑战。以下是一些可能的情况：

1. 类型定义： TypeScript 强调类型安全，但 Vue.js 是基于 JavaScript 的框架，原生的 Vue 组件和库可能缺乏完善的类型定义。这可能导致在类型推断、属性访问、方法调用等方面遇到困难。需要使用额外的类型声明或安装相关的类型定义库来增强类型检查。

2. Vue 生态系统兼容性： 一些 Vue 生态系统中的插件、库和工具可能与 TypeScript 集成不完全兼容。确保选择与 TypeScript 兼容的库，或者自行处理与 TypeScript 不兼容的问题。

3. Vue 组件的声明： 使用 TypeScript 定义 Vue 组件时，需要注意正确的类型声明和使用。主要包括组件的 props、data、computed、methods 等属性的类型定义，以及组件实例的类型推断和访问。

4. Vue Router 和 Vuex 的类型定义： Vue Router 和 Vuex 是常用的 Vue.js 的路由和状态管理库。在使用 TypeScript 时，需要额外的类型声明和配置，以实现类型安全的路由导航和状态管理。

5. 装饰器的使用： TypeScript 提供了装饰器（decorators）的特性，可以用于扩展 Vue 组件和其它功能。但装饰器的使用并不是官方标准的 Vue.js 写法，可能会引入一些不稳定性或与某些工具/库不兼容。

6. 异步处理： 在使用异步操作时，如异步请求、Promise、async/await 等，需要正确处理 TypeScript 的类型定义和类型推断，以避免类型错误和编译错误。

7. 编译配置： TypeScript 的编译配置文件（tsconfig.json）需要正确设置，以确保 TypeScript 编译器能够正确地检查和转换 Vue 组件和 TypeScript 文件。

在开发过程中，及时查阅和了解相关的 TypeScript 和 Vue.js 的文档、教程和社区资源，遇到问题时可以参考官方提供的类型定义文件，或与社区中音瑟波及的开发者交流分享经验。通过不断积累经验和与他人分享，能够更好地应对 Vue.js 结合 TypeScript 开发中的挑战和坑点。

附录：「简历必备」前后端实战项目（推荐：⭐️⭐️⭐️⭐️⭐️）

Vue.js 和 Egg.js 开发企业级健康管理项目
带你从入门到实战全面掌握 uni-app