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