0
点赞
收藏
分享

微信扫一扫

【Linux】vim的基本操作与配置(上)

本文题目来源于全网收集,答案来源于 ChatGPT 和 博主(的小部分……)

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

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


目录 No.101 - No.113


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

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

  1. iframe 沙箱

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

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

  1. Web Worker

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

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


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

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

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


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

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

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

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

105. 伪类和伪元素区别?

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

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

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

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


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

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

单页面应用:

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

多页面应用:

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

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

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

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

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

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

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

  1. created 钩子函数:适合执行一些初始化的异步操作,如数据获取、订阅事件等。在 created 钩子函数中,组件实例已经创建,但是尚未挂载到 DOM 上,因此它是一个很好的时机来进行一些异步操作。

  2. mounted 钩子函数:适合执行需要操作 DOM 元素的异步操作,例如初始化某些插件、绑定第三方库等。在 mounted 钩子函数中,组件已经被挂载到 DOM 上,可以操作 DOM 元素。

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

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

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


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

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

使用 Promise 链式调用:

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:

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是两种不同的数据库管理系统,它们在数据存储、数据模型、查询语言等方面有一些区别:

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

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


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

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

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

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

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

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

113. $route 和 $router 的区别

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

  1. $route$route 是 Vue Router 的一个实例,用于表示当前导航的路由信息。它包含了当前 URL 解析得到的信息,例如当前路径、参数、查询字符串等。通过 $route 可以访问和操作当前路由的信息,但是不能对路由进行修改或导航操作。

  2. $router$router 是 Vue Router 的路由实例,用于进行路由的导航操作。通过 $router 可以实现编程式的路由导航,例如跳转到特定路由、前进或后退等操作。$router 包含了路由的各种方法,如 pushreplacego 等,用于实现不同类型的路由导航。

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


举报

相关推荐

0 条评论