前端面试常见问题及解答

本文整理了前端面试中常见的技术问题，并给出了详细的解答，涵盖了 JavaScript、Vue.js、HTML、CSS、网络、数据结构等多个方面，帮助您更好地准备前端面试。

JavaScript

原生js封装ajax 原生js封装ajax的步骤包括创建XHR对象、设置请求参数、发送请求、处理响应结果。具体实现可以通过XMLHttpRequest对象的open、send、onreadystatechange等方法来完成。
自定义对象添加属性 自定义对象添加属性可以使用点号或方括号语法，例如'obj.attr = value'或'obj['attr'] = value'。
var与let区别 'var'声明的变量具有函数作用域，'let'声明的变量具有块级作用域。
闭包是什么？什么情况会出现闭包，用闭包做过什么？ 闭包是指函数和函数内部能访问到的变量的总和。闭包出现的情况包括在函数内部定义函数、函数返回函数等。在实际开发中，我们使用闭包来实现一些高阶函数和函数式编程的功能。
Promise处理什么的？怎么用？async await 怎么实现两个异步请求同时发送 Promise是一种用于异步编程的技术，可以将异步任务封装成Promise对象，通过'then'和'catch'方法来处理异步结果和异常。'async'和'await'是ES7中用于简化Promise使用的语法糖，可以让异步代码看起来像同步代码一样简洁易懂。
settimeout与innertimeout的区别各自优缺点 'setTimeout'和'setInterval'都是用于延迟执行代码的定时器函数，它们的区别在于'setInterval'会每隔一定时间执行一次代码，而'setTimeout'只会执行一次代码。它们的优缺点在于'setInterval'可以定时执行重复任务，但容易影响性能，而'setTimeout'可以控制任务执行的时间，但不适合执行重复任务。
js小数运算的精度 小数运算的精度问题可以通过将小数转换为整数进行运算，或使用'decimal.js'等库来处理。
null与undefind的区别 'null'表示一个空对象指针，'undefined'表示一个未定义的值。
forEach数组1到5 >=3时候 return,一共遍历几次？ 一共遍历5次。'forEach'方法没有返回值，即使遇到'return'语句也不会中断循环。
定时器里console.log(1),时间写了0,定时器外console.log(2)。打印的顺序是什么？为什么？ 打印顺序为：2、1。因为'console.log(2)'在定时器外，会立即执行，而'console.log(1)'在定时器内，即使时间设置为0，也会在'console.log(2)'之后执行。
const a = 1 && 2,打印a的结果是什么？ 打印结果为'2'。'&&'运算符会返回第一个非假值或最后一个值。
解释vue.config.js 'vue.config.js'文件是Vue项目的配置文件，用于配置项目的各种选项，例如开发服务器端口、打包配置、代理配置、插件配置等。

Vue.js

vuex的原理，原来项目用过吗，怎么用的 Vuex是一个状态管理模式和库，它可以集中管理Vue应用中的所有组件的状态。其原理是通过创建一个全局的Store对象，在其中定义一些状态、mutations、actions、getters等属性，然后在组件中通过调用store的方法来访问和修改状态。
选择器有哪些、新增的是哪些 常见的选择器包括ID选择器、类选择器、标签选择器、属性选择器、后代选择器、伪类选择器等。新增的选择器包括子串匹配选择器、伪元素选择器等。
vue组件传值有哪几种，分别怎么用？ Vue组件传值包括props、$emit、$parent、$refs、eventBus等方式，可以根据具体需求选择合适的方式来实现组件间的数据传递和通信。
vue怎么实现权限管理 在Vue中可以使用路由和权限控制来实现权限管理，例如使用vue-router中的路由守卫来判断用户登录状态并根据权限显示不同的页面内容。
组件封装 组件封装是将一些常用的UI组件或业务组件封装成独立的可复用的模块，可以提高代码的重用性和可维护性。
有没有用过插槽插槽的作用 插槽是Vue中用于在父组件中定义子组件的模板内容的一种方式，可以让父组件动态地插入子组件的内容。插槽的作用包括插入默认内容、插入具名内容、插入作用域插槽等。
mixin混入生命周期 mixin混入是Vue中用于为多个组件提供公共属性和方法的一种方式，可以减少重复代码和提高代码复用性。生命周期包括beforeCreate、created、beforeMount、mounted、beforeUpdate、updated、beforeDestroy和destroyed等，它们分别对应组件的不同阶段。
什么放到created什么放到mounted 在'created'钩子中一般用于初始化组件的数据和方法，'mounted'钩子中一般用于执行一些需要DOM元素的操作，如获取元素、绑定事件等。
循环for in 与for of 的区别 'for-in'循环是用于遍历对象属性的循环语句，'for-of'循环是用于遍历可迭代对象的循环语句，如数组、Set、Map等。它们的区别在于遍历的对象类型不同，'for-in'循环会遍历对象原型链上的属性，而'for-of'循环只会遍历对象自身的属性。
v-if与v-show的区别 'v-if'和'v-show'都是Vue中用于控制元素显示和隐藏的指令，它们的区别在于'v-if'是根据表达式的值来动态添加或移除元素，'v-show'是根据表达式的值来控制元素的display属性。在频繁切换显示状态时，'v-show'的性能比'v-if'更好。
在data中有一个空的对象,用vue的什么方法往对象里添加属性（vue.set） 在Vue中，如果要给data中的对象添加新属性，需要使用'Vue.set'方法，因为Vue无法检测到对象属性的添加或删除。
vue数据同步原理 Vue的数据同步原理是基于数据劫持和观察者模式。Vue会通过Object.defineProperty()方法劫持每个数据的getter和setter，当数据发生变化时，会触发setter方法，并通知所有依赖该数据的观察者更新视图。
父子组件生命周期 父子组件的生命周期按照一定的顺序执行，父组件的生命周期先于子组件的生命周期，子组件的生命周期先于父组件的销毁。
uniapp条件编译 'uniapp'是一个跨平台的开发框架，可以用于开发小程序、H5、App等应用。'uniapp'的条件编译功能可以根据不同的平台来选择不同的代码逻辑，例如在微信小程序中使用微信的API，在H5中使用H5的API。
文件上传以及优化 文件上传可以通过HTML的''标签来实现，并使用JavaScript来处理上传的文件。优化文件上传可以考虑使用分片上传、断点续传等技术。
路由和vuex路由守卫(关于路由很多) 'vue-router'是Vue的路由库，用于管理Vue应用中的页面路由。路由守卫是'vue-router'提供的一种机制，用于在路由跳转前后执行一些操作，例如验证用户登录状态、获取数据、修改页面标题等。
组件通信 组件通信包括父子组件通信、兄弟组件通信、任意组件通信等方式，可以使用props、$emit、$parent、$refs、eventBus等方法来实现。

HTML、CSS

fiex布局怎么用？用fiex布局怎么写一个左侧固定宽，右侧自适应 'flex'布局是一种弹性盒模型，可以通过设置容器的display属性为'flex'来实现。如果要实现左侧固定宽、右侧自适应的布局，可以将左侧元素设置为固定宽度，右侧元素设置为'flex: 1'，即可自适应宽度。
获取元素方式(api) 在JavaScript中可以使用document.getElementById()、document.getElementsByClassName()、document.querySelector()、document.querySelectorAll()等方法来获取元素。
兄弟元素转为父子元素(append) 可以使用'appendChild()'方法将兄弟元素移动到另一个元素的子节点中。
echarts的背景颜色渐变 在'echarts'中可以使用'background'属性来设置图表背景颜色，并可以使用'linearGradient'或'radialGradient'方法来实现背景颜色渐变。

网络

http有多少种请求头 'HTTP'协议中常见的请求头包括'Accept'、'Accept-Encoding'、'User-Agent'、'Referer'、'Cookie'等。它们用于告诉服务器客户端的一些信息，如客户端支持的文件类型、压缩方式、浏览器类型、来源页面、用户身份等。
跨域跨域是指客户端通过浏览器向服务器端发送请求时，由于协议、域名或端口号不同，导致浏览器拒绝响应的问题。解决跨域问题的方法包括'JSONP'、'CORS'、代理、'WebSocket'等。

数据结构与算法

栈和堆 栈是一种后进先出（LIFO）的数据结构，堆是一种先进先出（FIFO）的数据结构。在计算机程序中，栈用于存储函数调用和局部变量，堆用于存储动态分配的内存。
怎么判断这个字符串是回文字符串 判断一个字符串是否为回文字符串，可以使用双指针法。从字符串的首尾开始比较，如果每个字符都相同，则该字符串为回文字符串。

其他

项目介绍有啥核心的项目可以介绍一下 在介绍项目时，需要重点介绍项目的背景、目标、功能、技术栈、难点、成果等，并尽量突出项目的亮点和个人贡献。
简述一下包的优缺点 包是用于管理代码模块的工具，可以提高代码的可重用性和可维护性。包的优点包括提高代码复用率、简化代码管理、方便依赖管理等，缺点包括可能会增加代码复杂度、可能会出现依赖冲突等。
项目搭建，给你一个老项目你会配置啥？ 在配置老项目时，需要根据具体情况选择合适的打包工具、构建工具、代码风格检查工具等，并进行相应的配置。
你都封装哪些组件？ 在之前的项目中，我们封装了一些常用的UI组件、业务组件和HOC高阶组件，例如'Button'、'Input'、'Table'、'Pagination'、'Cart'等，以及一些通用服务和工具库，例如API服务、'LocalStorage'服务、'Http'服务、'Utils'工具库等。
pack.json中srcipt的作用， 'pack.json'中'srcipt'的作用是定义项目中的脚本命令，例如启动项目、打包项目、运行测试、检查代码等。在'package.json'中可以通过'scripts'属性来定义脚本命令，并通过'npm run'命令来执行。
本地存储cookies， 本地存储'cookies'可以使用'document.cookie'属性来设置和获取'cookie'值，也可以使用'localStorage'和'sessionStorage'来实现本地存储。
js和ts的区别 'js'是JavaScript，'ts'是TypeScript。'TypeScript'是'JavaScript'的超集，它在'JavaScript'的基础上增加了静态类型、接口、泛型等特性，可以提高代码的可读性和可维护性。
Vue template 到 render 的过程 'Vue'的模板编译过程包括以下几个步骤：解析模板字符串、生成抽象语法树（AST）、优化AST、生成渲染函数。渲染函数会将数据渲染到DOM中。
对 React 和 Vue 的理解，它们的异同 'React'和'Vue'都是流行的JavaScript框架，它们都具有组件化、数据驱动、虚拟DOM等特点。'React'更注重性能和灵活性，'Vue'更注重易用性和学习曲线。
父组件中含子组件，父子组件的生命周期如何进行 父子组件的生命周期按照一定的顺序执行，父组件的生命周期先于子组件的生命周期，子组件的生命周期先于父组件的销毁。
介绍ES6新的基础数据类型 ES6新增了'Symbol'、'Set'、'Map'三种基础数据类型。
介绍迭代器 迭代器是一种接口，它允许遍历一个数据结构。迭代器可以使用'next()'方法来获取下一个元素，并返回一个包含'value'和'done'属性的对象。
ES 6遍历的方法和区别 ES6提供了多种遍历方法，包括'for...of'循环、'forEach'方法、'map'方法、'filter'方法、'reduce'方法等。它们的区别在于遍历的方式、返回值以及是否修改原数组等。
介绍类数组 类数组是一种类似于数组的对象，它具有'length'属性和索引访问元素的能力，但它不具备数组的方法，例如'push'、'pop'、'splice'等。
现有三个异步方法(text1,text2,text3),如何实现同步代码内容： 可以使用Promise.all()方法来实现多个异步方法的同步执行。

总结

本文整理了一些前端面试中常见的技术问题，并给出了详细的解答，希望可以帮助大家更好地准备前端面试。在实际面试中，还需要根据具体情况进行灵活的回答，展现自己的技术能力和经验。