2024 前端面试题（GPT回答 + 示例代码 + 解释）No.101

本文题目来源于全网收集，答案来源于 ChatGPT 和博主（的小部分……）

格式：题目 h3 + 回答 text + 参考大佬博客补充 text + 示例代码 `code`+ 解释 quote + 补充 quote

上一篇链接：2024 前端 面试题（GPT回答 + 示例代码 + 解释）No.61 - No.100

目录 No.101 - No.113

- 本文题目来源于全网收集，答案来源于 ChatGPT 和博主（的小部分……）
- - 格式：题目 h3 + 回答 text + 参考大佬博客补充 *text* + 示例代码 ```code```+ 解释 quote + 补充 quote
  - 上一篇链接：[2024 前端面试题（GPT回答 + 示例代码 + 解释）No.61 - No.100](https://blog.csdn.net/m0_67023788/article/details/136110642)
  - 101. 沙箱隔离是什么？如何进行沙箱隔离？
  - 102. 常用操作字符串方法有哪些？是否更改自身？
  - 103. 常用的数组方法有哪些？会改变原数组的
  - 104. 常用的数组方法有哪些？不会改变原数组的
  - 105. 伪类和伪元素区别？
  - 106. 单页面应用和多页面应用
  - 107. 异步操作放在created还是mounted？
  - 108. 多个数据请求如何顺序执行？
  - 使用 Promise 链式调用：
  - 使用 async/await：
  - 109. MongoDB 和 MySQL 的区别？
  - 110. 常见的 Linux 命令有哪些？
  - 111. 常用的 Git 指令有哪些？
  - 112. Vue CLI 项目中 src 目录每个文件夹和文件的用法？
  - 113. \$route 和 \$router 的区别

101. 沙箱隔离是什么？如何进行沙箱隔离？

前端沙箱隔离是一种对用户输入的安全措施，它可以防止恶意输入通过前端代码执行攻击。常见的前端沙箱隔离方式有以下几种：

iframe 沙箱

在 HTML 中使用 <iframe> 标签可以创建一个独立的子文档窗口，它具有自己的文档流、样式表和脚本。这个子文档窗口就可以被用作沙箱，将用户输入的代码嵌入到其中，以便进行安全的执行。

为了增强沙箱的安全性，可以设置 sandbox 属性来限制嵌入代码的访问权限。例如，可以设置 sandbox="allow-scripts"，使得 iframe 子文框架只能执行脚本，不能访问任何其他资源。

Web Worker

Web Worker 是一种 JavaScript 线程，它可以在后台运行独立于主线程之外。由于它们与主线程分离，因此可以避免恶意代码对主线程的攻击。

为了使用 Web Worker 进行沙箱隔离，可以将用户输入的代码封装为一个单独的 JavaScript 文件，并使用 Worker API 在独立的线程中运行。这种方法可以确保用户输入的代码只能访问特定的资源，并且不会对主线程产生任何影响。

102. 常用操作字符串方法有哪些？是否更改自身？

split(separator): 将字符串按照指定的分隔符分割成子串，并返回一个由这些子串组成的数组。
join(array): 将数组中的所有元素连接成一个字符串，可以指定连接符号。
indexOf(substring): 返回子串在字符串中第一次出现的位置，如果找不到则返回 -1。
substring(startIndex, endIndex): 提取字符串中两个指定下标之间的字符，生成一个新的子字符串。
charAt(index): 返回指定索引位置的字符。
toLowerCase(): 将字符串转换为小写字母。
toUpperCase(): 将字符串转换为大写字母。
trim(): 去除字符串两端的空格。
replace(oldValue, newValue): 替换字符串中的指定值为新值。

大多数字符串方法都不会修改调用它们的原始字符串，而是返回一个新的字符串。因为在 JavaScript 中，字符串是不可变的（immutable），所以对字符串的操作通常会返回一个新的字符串。

103. 常用的数组方法有哪些？会改变原数组的

push()：向数组末尾添加一个或多个元素。
pop()：从数组末尾删除最后一个元素。
shift()：删除数组的第一个元素。
unshift()：向数组开头添加一个或多个元素。
splice()：通过删除或替换现有元素来更改一个数组的内容。
reverse()：颠倒数组中元素的顺序。
sort()：对数组进行排序。

104. 常用的数组方法有哪些？不会改变原数组的

concat()：用于合并两个或多个数组，并返回一个新数组。
slice()：返回一个新数组，其中包含指定索引范围内的元素。
indexOf()：返回指定元素在数组中首次出现的索引，如果不存在则返回 -1。
lastIndexOf()：返回指定元素在数组中最后一次出现的索引，如果不存在则返回 -1。
forEach()：对数组的每个元素执行提供的函数，没有返回值。
map()：创建一个新数组，其中的元素是对原始数组元素调用提供的函数后的返回值。
filter()：创建一个新数组，其中包含通过所提供函数实现的测试的所有元素。
reduce()：对数组中的每个元素执行一个提供的函数，将其结果汇总为单个返回值。
every()：检测数组中的所有元素是否都符合指定条件，返回一个布尔值。
some()：检测数组中的某些元素是否符合指定条件，返回一个布尔值。
find()：返回数组中满足提供的测试函数的第一个元素的值。
findIndex()：返回数组中满足提供的测试函数的第一个元素的索引。

105. 伪类和伪元素区别？

伪类和伪元素是 CSS 中的两个关键概念，用于指定 HTML 元素在不同状态下的样式。它们的区别在于：

伪类是用于选择元素的某个状态，例如 :hover、:active 和 :focus 等，这些状态是用户与页面交互时产生的。伪类将样式应用于选择器匹配的元素的特定状态。
伪元素则是用于向某个元素添加额外的内容，例如 ::before 和 ::after。伪元素创建的内容并不存在于 HTML 中，而是通过 CSS 插入到元素之前或之后。

因此，伪类和伪元素的主要区别在于它们是否插入或修改了元素的内容。伪类仅对元素的已有内容应用样式，而伪元素则会向元素添加额外的内容。

需要注意的是，在 CSS3 之前，伪元素使用单冒号（:）表示，如 :before 和 :after。但是在 CSS3 中，它们被修改为双冒号（::）以区分伪元素和伪类。虽然在现代浏览器中单冒号和双冒号都可以使用，但是建议使用双冒号来表示伪元素。

106. 单页面应用和多页面应用

单页面应用（Single Page Application，SPA）和多页面应用（Multi-Page Application，MPA）是两种常见的 Web 应用程序架构。

单页面应用：

客户端渲染：所有的页面都在同一个 HTML 页面中，使用 AJAX 和 HTML5 等技术动态地更新页面内容，而不需要整页刷新。
前端负责路由：前端通过路由控制页面的展示，浏览器的前进后退按钮也可以通过路由控制。
后端主要提供数据接口：前端通过 AJAX 等方式向后端请求数据，后端主要负责提供数据接口。

多页面应用：

服务器端渲染：不同的页面在服务器端生成，使用传统的请求响应模式进行页面切换。
后端负责路由：后端通过路由控制页面的展示，浏览器的前进后退按钮也可以通过路由控制。
前后端耦合度高：前端和后端之间有较强的耦合度，前端需要依赖后端的视图模板和路由。

单页面应用相对于多页面应用有以下优势：

更好的用户体验：单页面应用通过 AJAX 等技术实现页面的局部更新，用户体验更加流畅。
减少服务器负载：一次加载 Web 应用程序，之后只需从服务器获取数据。
前后端分离：前端负责页面渲染和交互逻辑，后端负责数据接口。

多页面应用相对于单页面应用有以下优势：

更好的 SEO：搜索引擎可以更好地处理多个页面，提高网站的搜索排名。
更少的客户端资源：每个页面只需要加载自己所需的资源，减少客户端的资源占用。
更易于维护：多页面应用因为具有明确的页面切换，模块之间的依赖关系更加清晰，更易于维护。

107. 异步操作放在created还是mounted？

在 Vue 组件的生命周期中，异步操作可以放在 created 或 mounted 钩子函数中，具体取决于你的需求和场景。

created 钩子函数：适合执行一些初始化的异步操作，如数据获取、订阅事件等。在 created 钩子函数中，组件实例已经创建，但是尚未挂载到 DOM 上，因此它是一个很好的时机来进行一些异步操作。
mounted 钩子函数：适合执行需要操作 DOM 元素的异步操作，例如初始化某些插件、绑定第三方库等。在 mounted 钩子函数中，组件已经被挂载到 DOM 上，可以操作 DOM 元素。

所以，如果你的异步操作不依赖于 DOM 元素，只是简单的数据请求或事件订阅等，可以将其放在 created 钩子函数中；如果需要操作已经挂载的 DOM 元素，可以将其放在 mounted 钩子函数中。

需要注意的是，如果你在异步操作中修改了响应式数据，建议将其放在 created 钩子函数中，以避免可能引起的视图更新问题。因为在 mounted 钩子函数执行时，Vue 已经完成了初次渲染，如果在异步操作中修改响应式数据，可能会导致视图重新渲染，这可能不是你期望的结果。

综上所述，根据具体的场景和需求，选择合适的钩子函数来执行异步操作。

108. 多个数据请求如何顺序执行？

如果需要按顺序执行多个数据请求，你可以使用 Promise 链式调用或 async/await 来实现。

使用 Promise 链式调用：

javascript">function fetchData1() {
    return new Promise((resolve, reject) => {
        // 异步操作1
        setTimeout(() => {
            console.log('Data 1 fetched');
            resolve();
        }, 1000);
    });
}

function fetchData2() {
    return new Promise((resolve, reject) => {
        // 异步操作2
        setTimeout(() => {
            console.log('Data 2 fetched');
            resolve();
        }, 1500);
    });
}

fetchData1()
    .then(() => fetchData2())
    .then(() => {
        console.log('All data fetched');
    })
    .catch((error) => {
        console.error('Error fetching data:', error);
    });

使用 async/await：

javascript">async function fetchDataSequentially() {
    try {
        await fetchData1();
        await fetchData2();
        console.log('All data fetched');
    } catch (error) {
        console.error('Error fetching data:', error);
    }
}

fetchDataSequentially();

在这两种方法中，每个数据请求函数返回一个 Promise 对象，在 Promise 的 then 方法中调用下一个数据请求函数，确保它们按顺序执行。如果有任何一个请求失败，可以通过 catch 捕获错误并处理。

通过以上方法，你可以按照顺序执行多个数据请求，并在所有请求完成后执行相应的操作。

109. MongoDB 和 MySQL 的区别？

MongoDB和MySQL是两种不同的数据库管理系统，它们在数据存储、数据模型、查询语言等方面有一些区别：

数据模型：
- MongoDB 是一个文档型数据库，使用类似JSON的BSON（二进制JSON）格式来存储数据。它以文档的形式存储数据，每个文档可以有不同的结构，并支持嵌套和动态字段。
- MySQL 是一个关系型数据库，使用表格的形式存储数据。数据以行和列的形式存储，需要定义固定的表结构和字段类型。
查询语言：
- MongoDB 使用基于对象的查询语言，称为查询文档（Query Document），使用类似于JavaScript的查询语法。它支持丰富的查询操作，包括范围查询、正则表达式、聚合管道等。
- MySQL 使用结构化查询语言（SQL）进行查询，以及一些扩展的SQL操作。SQL提供了强大的关系型查询和连接操作，适用于复杂的关系型数据查询。
可扩展性：
- MongoDB 具有良好的可扩展性，支持水平扩展。它能够轻松处理大量的数据和高并发请求。
- MySQL 在垂直方向上具有良好的可扩展性，可以通过增加硬件资源来提高性能，但在处理大规模数据和高并发请求方面相对有限。
事务支持：
- MongoDB 在较新的版本中引入了多文档事务支持，允许跨多个文档的原子操作。
- MySQL 从一开始就提供了事务支持，并且具有强大的事务管理能力。
数据一致性：
- MongoDB 是一致性模型，写入操作在所有副本上进行确认后才会返回成功。
- MySQL 是隔离性模型，根据事务的隔离级别确定读取和写入操作的可见性。

需要根据具体的应用场景和需求来选择适合的数据库。MongoDB适用于需要灵活的数据模型和扩展性的场景，而MySQL适用于复杂的关系型数据和事务处理。

110. 常见的 Linux 命令有哪些？

文件和目录操作：
- ls：列出当前目录的文件和子目录。
- cd：切换到指定目录。
- pwd：显示当前工作目录的路径。
- mkdir：创建新目录。
- rm：删除文件或目录。
- cp：复制文件或目录。
- mv：移动文件或目录，也可用于重命名文件。
- tar：解压或打包文件和目录。
- find：在指定路径下递归地查找文件。
文件内容查看和编辑：
- cat：显示文件内容。
- less：分页显示文件内容。
- head：显示文件的前几行。
- tail：显示文件的后几行。
- grep：在文件中搜索指定的模式。
- vim / nano：文本编辑器，用于编辑文件。
系统管理：
- ps：显示当前运行的进程。
- top：实时显示系统资源使用情况和进程信息。
- kill：发送信号给进程，用于终止或操作进程。
- shutdown：关闭系统。
- reboot：重新启动系统。
- chmod：修改文件或目录的权限。
- chown：更改文件或目录的所有者。
- df：显示磁盘空间使用情况。
- du：显示目录或文件的磁盘使用情况。
网络相关：
- ping：测试与另一台计算机的连接。
- ifconfig：显示网络接口配置信息。
- ssh：通过SSH协议远程登录到其他计算机。
- scp：通过SSH协议在本地和远程系统之间复制文件。

111. 常用的 Git 指令有哪些？

git init：在当前目录初始化一个新的 Git 代码库。
git clone：克隆一个远程代码库到本地。
git add：将文件的更改添加到暂存区。
git commit：将暂存区中的更改提交到本地代码库。
git push：将本地代码库的更改推送到远程代码库。
git pull：从远程代码库拉取最新的更改到本地。
git status：显示工作目录和暂存区的状态。
git branch：列出、创建或删除分支。
git checkout：切换分支或恢复文件。
git merge：将一个分支的更改合并到当前分支。
git log：显示提交日志。
git reset：撤销提交或重置当前 HEAD 的状态。
git stash：将当前的工作目录状态保存起来，以便稍后恢复。

112. Vue CLI 项目中 src 目录每个文件夹和文件的用法？

assets：用于存放应用程序使用的静态资源，如图片、图标、字体等。
components：用于存放应用程序的 Vue 组件。这些组件可以被其他组件或视图引用。
router：用于存放 Vue Router 的路由配置文件。这些文件定义了应用程序的路由映射关系。
store：用于存放 Vuex 的状态管理文件。这些文件定义了应用程序的状态管理逻辑。
views：用于存放应用程序的视图组件。这些组件通常对应应用程序的不同页面或路由。
App.vue：应用程序的根组件。它定义了应用程序的整体结构和样式。
main.js：应用程序的入口文件。它定义了应用程序的启动逻辑和全局配置，例如 Vue 实例的创建、插件的安装、路由的注册等。
index.html：应用程序的 HTML 模板文件。它定义了应用程序的基本结构和引入的外部资源。

113. $route 和 $router 的区别

在 Vue.js 中，$route 和 $router 是 Vue Router 提供的两个重要属性，用于处理应用程序的路由。它们之间的区别如下：

$route：$route 是 Vue Router 的一个实例，用于表示当前导航的路由信息。它包含了当前 URL 解析得到的信息，例如当前路径、参数、查询字符串等。通过 $route 可以访问和操作当前路由的信息，但是不能对路由进行修改或导航操作。
$router：$router 是 Vue Router 的路由实例，用于进行路由的导航操作。通过 $router 可以实现编程式的路由导航，例如跳转到特定路由、前进或后退等操作。$router 包含了路由的各种方法，如 push、replace、go 等，用于实现不同类型的路由导航。

因此，简而言之，$route 主要用于获取当前路由的信息，而 $router 则用于进行路由的导航操作。在开发过程中，通常会同时使用这两个属性来实现对路由的管理和控制。