前端面试经典18连问，你都能答的上来吗？

是小鱼鱼呀
1,295 阅读22分钟

请问你跟后端配合一般会遇到哪些问题？

作为前端面试者，在与后端进行协作时，可能会面临以下一些常见问题：

  1. API 接口设计：前端需要与后端进行协商和定义 API 接口的设计，包括接口的请求方式、参数、返回数据格式等。如果后端接口设计不合理或不符合前端的需求，可能会导致前后端无法顺利对接。
  2. 数据格式和数据验证：前端与后端之间的数据传递需要确保数据格式的一致性，例如 JSON 格式的数据。同时，前端可能需要对用户输入的数据进行验证，后端也需要对接收到的数据进行验证，以确保数据的合法性和安全性。
  3. 接口文档和版本控制：前端需要与后端对接口文档进行沟通和确认，以确保对接的接口使用正确的参数和返回数据。同时，接口的版本控制也是一个需要注意的点，以避免前后端因接口变动而出现兼容性问题。
  4. 跨域请求：前端在向不同域名或端口的后端服务请求数据时，可能会面临跨域请求的限制。这时前端需要与后端协商解决跨域请求的方式，例如使用 CORS（跨域资源共享）或 JSONP（JSON with Padding）等。
  5. 性能优化和安全性：前端与后端需要合作进行性能优化和安全性方面的处理，例如减少前后端数据传输的大小和频率，对用户输入的数据进行合理的处理和过滤，防止安全漏洞和攻击等。
  6. 错误处理和异常处理：前端与后端需要共同处理异常情况和错误信息的传递，以便在出现问题时能够及时发现和解决，确保系统的稳定性和可靠性。

怎么做版本控制的？

版本控制是一种管理代码和文件变更的方式，常用的版本控制工具包括 Git、SVN 等。以下是使用 Git 进行版本控制的基本步骤：

  1. 创建仓库：在本地或者远程 Git 服务器上创建一个仓库。
  2. 初始化仓库：使用 Git 初始化命令将本地文件夹转换为 Git 仓库。在终端中进入到本地文件夹中，执行命令 git init。
  3. 添加文件：将需要版本控制的文件添加到 Git 的暂存区中。可以使用 git add 命令将文件添加到暂存区，例如 git add file1.txt。
  4. 提交变更：将暂存区的文件提交到 Git 仓库中，即创建一个新的版本。可以使用 git commit 命令提交变更，例如 git commit -m "add file1.txt"。
  5. 查看历史记录：可以使用 git log 命令查看 Git 仓库的历史记录，包括每个版本的变更信息和提交者等。
  6. 分支管理：Git 支持分支管理，可以使用 git branch 命令创建、切换、删除分支等操作，以支持并行开发和版本控制。
  7. 远程仓库同步：为了保证团队协作和备份，可以将本地仓库同步到远程 Git 服务器上。可以使用 git remote 命令添加远程仓库，并使用 git push 命令将本地仓库的变更推送到远程仓库中，例如 git push origin master。

git commit 提交错了造成影响怎么办？

  1. 撤销上一次提交：可以使用 git reset 命令将最近的一次提交回退到暂存区，例如 git reset HEAD^。这样会保留上一次提交所做的修改，但是会回退到暂存区，需要再次执行 git add 和 git commit 来重新提交。
  2. 修改最近一次提交：可以使用 git commit --amend 命令来修改最近一次提交，例如 git commit --amend -m "new commit message"。这样会修改上一次提交的提交信息和内容，但是不会创建新的提交。
  3. 回滚到指定提交：如果想要回滚到之前的某个提交，可以使用 git revert 命令，例如 git revert <commit-id>，这样会创建一个新的提交，将指定提交的变更回滚。

需要注意的是，修改历史提交记录可能会影响到其他人的开发和代码版本，建议在执行修改操作前先与团队协商，确认对其他人的影响并备份好代码。另外，遵守版本控制的最佳实践和规范，可以最大限度地避免提交错误所带来的影响。

实现深拷贝中遇到过什么问题？jsonstringfy转化对象时遇到过什么问题？

  1. 循环引用问题：如果对象中存在循环引用，即对象属性之间相互引用，可能会导致递归拷贝时出现无限循环的问题。可以使用 Map 对象来记录已经拷贝过的对象，避免重复拷贝和循环引用的问题。
  2. 函数和 Symbol 类型问题：函数和 Symbol 类型的属性不能直接进行 JSON 序列化和反序列化，需要特殊处理或者忽略。
  3. Date 和 RegExp 类型问题：Date 和 RegExp 类型的属性在进行 JSON 序列化和反序列化时可能会丢失类型信息或者转化错误。可以在序列化时将其转化为字符串或者数组，然后在反序列化时进行类型转换。
  4. 对象属性顺序问题：在进行深拷贝时，对象属性的顺序可能会被改变，因为 JavaScript 中对象属性的顺序并不是固定的。可以使用 ES6 中的 Map 或者使用 Object.keys 方法获取对象属性的顺序。

在使用 JSON.stringify 方法将对象转化为 JSON 字符串时，也可能会遇到以下问题：

  1. 对象包含 undefined、函数、Symbol 类型时，转化为 JSON 字符串时会被忽略或者转化为 null。
  2. 对象中存在循环引用时，会出现 TypeError 错误。
  3. JSON 字符串无法表示 Date 类型的属性，需要进行手动转化。
  4. JSON 字符串无法表示 RegExp 类型的属性，需要进行手动转化。

最近的前端项目大概有多少兆？

通常情况下，一个中型前端项目的大小可以通过以下方式来控制：

  1. 代码的优化：对代码进行合理的结构设计和代码优化，减少冗余代码和不必要的计算，提高代码的执行效率。
  2. 静态资源的优化：对静态资源进行压缩、合并、缓存等优化措施，以减小文件大小和提高加载速度。
  3. 使用打包工具：使用像 Webpack、Rollup 等打包工具，将多个模块打包成一个或者多个 bundle 文件，减小文件大小和网络请求次数。
  4. 代码分割：将大型的代码库分割成小的模块，按需加载，以减小首次加载的大小和提高页面的渲染速度。

综上所述，一个中型的前端项目应该控制其文件大小，并采取合适的优化策略，以达到更好的性能和用户体验。

post上传文件和json上传文件有什么区别？

POST 上传文件和 JSON 上传文件在实现上是不同的。

在 POST 上传文件中，表单中的 enctype 属性通常被设置为 multipart/form-data，这样浏览器会将文件转化为二进制格式，然后使用 POST 请求将文件发送到服务器。在服务器端，可以使用一些框架或者库来处理这种请求，如 Express、Multer 等。通过表单的 input 元素的 name 属性可以获取文件的二进制内容。

而在 JSON 上传文件中，通常是将文件转化为 Base64 编码的字符串，然后将该字符串包含在 JSON 对象中，使用 POST 请求将该 JSON 对象发送到服务器。在服务器端，可以使用 Node.js 的 Buffer 类型来对 Base64 编码的字符串进行解码，然后得到原始的二进制数据。

这两种方法各有优缺点。使用 POST 上传文件可以直接将文件发送到服务器，而且使用的是二进制格式，文件传输效率高，但需要特殊处理。而使用 JSON 上传文件可以更方便地处理文件，但是需要在客户端将文件转化为 Base64 编码的字符串，这可能会导致上传效率较低。

总的来说，在实际开发中，我们应该根据实际需求和具体情况来选择合适的文件上传方式。

如何实现按钮也页面级别的权限？

在 Vue 中实现按钮或页面级别的权限，通常可以通过以下几个步骤来实现：

  1. 在服务端配置权限信息：在服务端配置用户的权限信息，例如角色、权限等。可以使用一些成熟的权限管理工具，如 Spring Security、Shiro 等，来进行配置。

  2. 用户登录验证：用户登录成功后，服务端需要将用户的权限信息返回给前端，并保存在本地的 Cookie 或者 Session 中，以便在后续的操作中进行验证。

  3. 页面权限控制：在前端页面中，可以通过 v-if 或 v-show 指令来控制页面上的元素的显示或隐藏。可以通过在组件中定义一个计算属性，根据用户的权限信息来判断是否具有显示该元素的权限，然后在模板中使用 v-if 或 v-show 指令来控制元素的显示或隐藏。

  4. 按钮权限控制：在按钮的事件处理函数中，可以根据用户的权限信息来判断是否具有执行该操作的权限。如果用户没有权限，则可以阻止该事件的执行，或者在执行前进行提示。

  5. 在实现权限控制时，需要注意以下几个问题：

    1. 安全性：权限控制需要保证安全性，避免用户通过非法手段绕过权限限制。
    2. 扩展性：权限控制需要具有一定的扩展性，能够方便地添加、修改和删除用户的权限信息。
    3. 灵活性：权限控制需要具有一定的灵活性，能够适应不同的应用场景和需求。

    综上所述，在 Vue 中实现按钮或页面级别的权限，需要在服务端和前端分别进行配置和实现，并需要考虑安全性、扩展性和灵活性等方面的问题。

如何实现长加载？

长加载（Infinite Loading）是一种优化前端页面性能的方式，它允许用户不断滚动页面，而不需要一次性加载所有数据，从而提高页面的响应速度和用户体验。下面是一些常见的实现长加载的方法：

  1. 分页加载：将数据分页加载，每次只加载一页数据，当用户滚动到页面底部时，自动加载下一页数据。可以使用一些成熟的分页插件，如 vue-infinite-loading 等。
  2. 滚动加载：在滚动条滚动到页面底部时，自动加载更多数据。可以通过监听滚动事件和计算滚动距离来实现。
  3. 预加载：在用户滚动到页面底部之前，提前加载一定数量的数据。可以使用 Intersection Observer API 来实现预加载。
  4. 懒加载：在用户滚动到页面可见区域时，再加载相应的数据。可以使用一些成熟的懒加载插件，如 vue-lazyload 等。
  5. Websocket 实时加载：使用 Websocket 技术，在服务端实时推送数据给前端，从而实现实时加载。可以使用一些成熟的 Websocket 插件，如 socket.io 等。

无论使用哪种方法，都需要注意以下几个问题：

  1. 加载性能：需要保证加载性能，避免加载过程中页面卡顿或者崩溃。
  2. 用户体验：需要考虑用户体验，避免过度加载、过度预加载等情况。
  3. 兼容性：需要考虑兼容性，不同浏览器和不同设备对长加载的支持情况不一样。

分包如何实现？

分包（Code Splitting）是一种优化前端应用性能的方式，它可以将前端应用代码分成多个小块（chunk），按需加载，从而提高页面的响应速度和用户体验。下面是一些常见的分包实现方式：

  1. webpack：webpack 是一个常用的前端构建工具，可以通过 webpack 的配置来实现分包。webpack 提供了多种分包方式，如按路由分包、按组件分包等。
  2. Vue CLI：Vue CLI 是一个基于 webpack 的脚手架工具，提供了一些默认配置，可以方便地实现分包。Vue CLI 默认使用路由懒加载来实现分包。
  3. React Loadable：React Loadable 是一个基于 React 的分包工具，可以实现按需加载组件。React Loadable 支持 SSR（Server Side Rendering）和 code splitting 等功能。
  4. Rollup：Rollup 是一个轻量级的 JavaScript 模块打包器，可以将多个 JavaScript 模块打包成一个或多个文件。Rollup 支持多种打包方式，可以实现分包。

无论使用哪种方式，都需要注意以下几个问题：

  1. 代码结构：需要合理组织代码结构，避免代码耦合度过高。
  2. 加载性能：需要保证加载性能，避免加载过程中页面卡顿或者崩溃。
  3. 用户体验：需要考虑用户体验，避免过度分包、过度预加载等情况。

小程序开发你做过哪些性能和功能优化？

小程序开发中，性能和功能优化是非常重要的，下面是我做过的一些优化：

  1. 图片懒加载：对于长页面，使用图片懒加载可以减少页面的首次加载时间，提高用户体验。
  2. 分包加载：对于大型小程序，使用分包加载可以减少首次加载时间，提高用户体验。可以将各个页面和组件拆分成不同的分包，按需加载。
  3. 虚拟列表：对于长列表，使用虚拟列表可以减少渲染节点的数量，提高页面的渲染速度和性能。
  4. 避免不必要的重绘和重排：在修改 DOM 的时候，避免不必要的重绘和重排，可以减少性能损失。
  5. 避免频繁的数据更新：在数据更新的时候，尽量避免频繁的更新，可以减少页面的渲染次数和性能损失。
  6. 减少网络请求：在小程序中，网络请求是一个比较耗时的操作，可以通过缓存数据、合并请求等方式减少网络请求次数。
  7. 使用缓存：在小程序中，使用缓存可以减少网络请求次数，提高页面的加载速度和用户体验。
  8. 使用本地存储：对于一些需要长期保存的数据，使用本地存储可以避免重复请求数据，提高性能和用户体验。

Ts相对Js优化了哪些功能？

TypeScript 相对于 JavaScript，提供了以下优化功能：

  1. 静态类型检查：TypeScript 引入了静态类型检查，通过类型检查可以在编译时发现潜在的类型错误，减少运行时类型错误导致的问题。这可以大大提高代码的可读性和可维护性。
  2. 类型推断：TypeScript 能够根据上下文自动推断变量的类型，避免了手动指定类型带来的麻烦。
  3. 类型注释：TypeScript 允许开发者在变量、函数、类等上添加类型注释，提高了代码的可读性和可维护性。
  4. 面向对象编程：TypeScript 支持面向对象编程，引入了类、接口、泛型等概念，提供了更多的编程范式，增强了代码的可重用性和可扩展性。
  5. 代码智能提示：TypeScript 编辑器支持代码智能提示，提高了代码的编写效率和准确性。
  6. ES6/ES7 功能支持：TypeScript 支持 ES6/ES7 中的新功能，如箭头函数、类、模块、解构赋值等，可以使开发者更加便捷地使用这些功能。
  7. 重构工具：TypeScript 支持重构工具，如重命名、提取函数等，可以使代码更加易于维护和重构。

综上所述，TypeScript 相对于 JavaScript，提供了更好的类型支持、更丰富的面向对象编程特性、更好的工具链支持，以及更好的可读性和可维护性，从而提高了开发效率和代码质量。

如何实现两个盒子水平垂直居中？

  1. 使用 Flex 布局：在父容器上使用 display: flex; justify-content: center; align-items: center; 即可实现水平垂直居中。
  2. 使用绝对定位：设置该元素的 position 为 absolute，然后使用 top: 50%; left: 50%; transform: translate(-50%, -50%); 将元素的中心点定位到父容器的中心点。
  3. 使用 table 布局：在父容器上使用 display: table;，在子元素上使用 display: table-cell; vertical-align: middle; text-align: center; 即可实现水平垂直居中。

后端如何解决跨域问题?

后端可以通过以下几种方式解决跨域问题：

  1. CORS（Cross-Origin Resource Sharing）：CORS 是 W3C 标准，主要是通过在服务器端设置响应头来解决跨域问题。后端服务器在接收到跨域请求时，会在响应头中添加一些字段，告诉浏览器该请求可以被允许访问。
  2. JSONP（JSON with Padding）：JSONP 是一种跨域数据传输方式，它利用了 <script> 标签的跨域特性来实现。在前端页面中，通过动态创建 <script> 标签来请求后端数据，后端返回一段回调函数的代码和数据，前端页面执行该回调函数就可以获取数据了。
  3. 代理：通过代理服务器来转发请求，使得请求不再是跨域的。前端页面将请求发送给代理服务器，代理服务器再将请求发送给后端服务器，后端服务器将响应返回给代理服务器，代理服务器再将响应返回给前端页面。

git中自己负责的模块的分支怎么合并？

当你在 Git 中负责某个模块时，可以按照以下步骤将自己的分支合并到主分支上：

  1. 确认自己的分支已经与主分支同步：在合并分支前，需要确保自己的分支已经与主分支同步，可以使用 git fetch 命令获取最新的代码，然后使用 git merge 或 git rebase 命令将自己的分支与主分支同步。
  2. 在自己的分支上进行开发：在确认自己的分支已经与主分支同步后，可以在自己的分支上进行开发、修改、提交等操作。
  3. 定期进行代码合并：在开发过程中，应该定期地将主分支上的代码合并到自己的分支上，以避免代码冲突和合并困难。
  4. 进行代码审查：在完成自己的开发任务后，应该进行代码审查，确保代码质量和风格符合要求。
  5. 合并分支：经过代码审查后，可以使用 git merge 命令将自己的分支合并到主分支上。在合并分支时，可以使用 --no-ff 选项来保留合并提交记录，以便后续跟踪和回溯。

excel导入导出怎么实现的？

Excel 导入和导出可以使用多种方式实现，以下是两种常见的方式：

  1. 使用前端插件：可以使用一些前端插件，如 xlsx、exceljs、SheetJS 等，来读取和写入 Excel 文件。这些插件通常提供了丰富的 API 和示例，可以灵活地处理 Excel 文件的读写操作。通过前端插件实现 Excel 导入和导出，可以实现简单、快捷、高效的数据转换。
  2. 使用后端程序：可以使用后端程序，如 Node.js、PHP、Java 等，来读取和写入 Excel 文件。在服务器端实现 Excel 导入和导出，可以更好地控制数据的安全性和可靠性，避免前端插件在处理大型 Excel 文件时出现性能问题。通过后端程序实现 Excel 导入和导出，需要将 Excel 文件上传到服务器，然后在服务器上进行数据处理和文件下载，相对来说比较繁琐，但可以实现更加复杂的数据处理和数据验证。

总的来说，Excel 导入和导出需要根据实际需求选择合适的方式进行实现，前端插件可以实现简单的数据转换，后端程序可以实现更加复杂的数据处理和数据验证。同时，需要注意 Excel 文件格式的兼容性，不同版本的 Excel 文件格式可能存在差异，需要进行测试和验证。

怎么实现浏览器前进后退，怎么清除中间几个页面路径？

在浏览器中，前进和后退是通过操作浏览器的历史记录（history）实现的。每当用户访问一个新页面时，浏览器就会将该页面的 URL 添加到历史记录中，用户可以通过点击浏览器的前进和后退按钮来切换不同的历史记录。

如果要清除中间的几个页面路径，可以使用浏览器提供的两个 API：

  1. pushState()：可以将当前页面的 URL 添加到浏览器的历史记录中。
  2. replaceState()：可以替换当前页面的 URL，而不添加新的历史记录。

通过这两个 API，可以在不刷新页面的情况下修改浏览器的历史记录。例如，可以在进入一个页面时调用 pushState()，在跳转到下一个页面时调用 replaceState()，这样就可以清除中间的页面路径，使得用户在使用浏览器的前进和后退按钮时，不会返回到中间的页面。

Eslint常见报错，你怎么解决的？

ESLint 是一种常用的 JavaScript 代码检查工具，可以帮助开发者在编写代码时发现潜在的问题，从而提高代码的质量和可维护性。ESLint 可以检查 JavaScript 代码的语法和风格，同时也可以自定义检查规则。

常见的 ESLint 报错包括但不限于以下几种：

  1. no-undef：表示变量未定义，可能是因为拼写错误或者忘记声明变量等原因导致的。

解决方法：声明变量或者将拼写错误进行修正。

  1. no-unused-vars：表示定义了变量但未使用。

解决方法：删除未使用的变量。

  1. indent：表示缩进错误，如使用了不正确的缩进字符或者缩进空格数不正确。

解决方法：检查缩进是否正确，调整代码缩进。

  1. semi：表示未使用分号。

解决方法：在需要使用分号的地方添加分号。

  1. no-multiple-empty-lines：表示多行空白行。

解决方法：删除多余的空白行。

除了以上常见的报错，还有很多其他的 ESLint 报错，每个项目可能会有所不同。解决 ESLint 报错的方法一般有以下几种：

  1. 修改代码：根据报错信息修改代码，遵循 ESLint 的规则。
  2. 忽略规则：在 ESLint 配置文件中添加相应的忽略规则，以免出现无法解决的报错。
  3. 自定义规则：根据项目需求，自定义 ESLint 规则，以适应项目的实际情况。

需要注意的是，对于 ESLint 报错的处理，应该尽可能地遵循 ESLint 的规则，并且对于无法解决的报错，应该考虑使用忽略规则或者自定义规则来解决问题。这样可以保证代码的质量和可维护性，并且避免出现不必要的问题。

elemenUI组件样式不生效，你如何解决？

如果 ElementUI 组件样式不生效，可能是以下原因导致的：

  1. 未引入 ElementUI 样式文件或者样式文件引入位置不正确。 解决方法：确认 ElementUI 样式文件是否引入，或者将样式文件引入位置调整到正确的位置。
  2. 样式被其他 CSS 文件覆盖。 解决方法：可以使用开发者工具查看该元素的样式，并找到覆盖该样式的 CSS 文件，将其修改或删除。
  3. 样式被自定义样式覆盖。 解决方法：检查自定义样式，找到覆盖 ElementUI 样式的样式，将其修改或删除。
  4. 样式被全局样式覆盖。 解决方法：在 ElementUI 样式文件引入之后，将全局样式引入，这样就可以保证 ElementUI 样式覆盖全局样式。
  5. ElementUI 版本不匹配。 解决方法：确认 ElementUI 版本是否正确，并更新版本。

以上是常见的解决方法，如果以上方法都不能解决问题，可以通过查看 ElementUI 官方文档或者社区寻求帮助。

avatar
文章
阅读
粉丝