在我们日常生活中，不管什么行业都是需要面试的 在这里呢 我会为大家更新一下前端面试题 这个行业在现在这个时代是很流行的我为大家准备了二十道面试题

1.页面元素隐藏方式 和各自特点？

第一种：display属性为none，效果：元素不显示，不占位
第二种：设置css visibility属性为hidden，效果：元素不显示，但占位

2.用过哪些盒模型？

标准盒模型（W3C盒子模型），设置的width或height是对 实际内容（content）的width或height进行设置，内容周围的border和padding另外设置，即盒子模型的width（height）=设置的content的宽高+padding+border+margin
怪异盒模型（IE盒子模型），设置的width或height是对 实际内容（content）+内边距（padding）+边框（border）之和的width和height进行设置的，其盒模型的width（height）=设置的width（height）+外边距margin
box-sizing: content-box 是W3C盒子模型
box-sizing: border-box 是IE盒子模型

3.什么是Sass,使用sass目的是什么？

Sass 是一种 CSS 的预编译语言。它提供了 变量（variables）、嵌套（nested rules）、 混合（mixins）、 函数（functions）等功能，并且完全兼容 CSS 语法。
Sass 能够帮助复杂的样式表更有条理， 并且易于在项目内部或跨项目共享设计。
sass预处理可以更好地组织管理越来越复杂而庞大css样式表。
sass的易维护，更方便的定制，以及更高效的开发项目

4.js基本数据类型是什么？如何判断该类型数据？ 数据类型强制转化和隐式转化的区别？

Number、String、 boolean、 Undefined、Null、Object使用typeof 查看该类型 隐式转换都是以强制转换为基础的。强制转换主要指使用一些特定函数，手动将各种类型的值，转换为其对应的类型

5.如何判断一个对象是否具备某个属性？如何判断对象为空对象

使用“!==”进行判断
使用in操作符，如果返回ture则存在
hasOwnProperty()
propertyIsEnumerable() 是hasOwnProperty() 的增强版
使用JSON.stringify把对象转为字符串,再判断字符串是否等于"{}"

6.let 、const 和 var 的区别 ？

1.var定义的变量，没有块的概念，可以跨块访问, 不能跨函数访问。
2.let定义的变量，只能在块作用域里访问，不能跨块访问，也不能跨函数访问。
3.const用来定义常量，使用时必须初始化(即必须赋值)，只能在块作用域里访问，而且不能修改

7.箭头函数和普通函数的区别 ？

箭头函数：不能当做构造函数 相当于匿名函数，不可以使用new命令，this永远指向上下文的this无法改变其指向
普通函数：this指向调用它的那个对象

8.解释什么叫回调地狱 ，以及怎么解决回调地狱 ？

就是函数作为参数层层嵌套
怎么解决：通过promise链式调用的方式

function buildCatList(list, returnVal) {
    return new Promise(function (resolve, reject) {
        setTimeout(function (name) {
            var catList = list === '' ? name : list + ',' + name
            resolve(catList)
        }, 200, returnVal)
    })
}

buildCatList('', 'Panther').then(function (res) {
	return buildCatList(res, 'Janguar')
}).then(function (res) {
	return buildCatList(res, 'Lion')
}).then(function (res) {
	console.log(res)
})本质上还是函数套函数

9.说明原生ajax的实现步骤？

1创建对象
2设置请求方式和请求地址
3发送请求
4监听状态变化
5返回数据

          var xhr = new XMLHttpRequest()
            xhr.onreadystatechange = function(){
                if(xhr.readyState != 4)return;
                if(xhr.status == 200 && xhr.readyState == 4){
                    console.log(xhr.responseText)
                }else{
                    console.log("请求失败")
                }
            }
            xhr.open("get","http://localhost:3030")
            xhr.send()

10.什么情况下会导致跨域？怎么解决

不同源策略时会导致跨域
解决方法：
1.jsonp：原理就是利用了script标签src属性外联引入文件不受同源策略的限制，在页面中动态插入了script，script标签的src属性就是后端api接口的地址，并且以get的方式将前端回调处理函数名称告诉后端，后端在响应请求时会将回调返还，并且将数据以参数的形式传递回去；
2.CORS(Cross-Origin-Resource-Sharing)：在服务器端设置的,不需要客户端进行操作。Cors背后的思想是使用自定义的http头部让浏览器和服务器进行沟通，从而决定请求或响应是否应该成功，还是应该失败。浏览器向服务器发送请求，如果服务器认为这个请求可以接受，就在Access-Control-Allow-Origin头部中回发相同的源信息（如果是公共资源，可以回发*）;如果没有这个头部，或者有这个头部但信息源不匹配，浏览器就会驳回请求。正常情况下，浏览器会处理请求。（请求和响应都不包含cookie信息）；
3.服务器跨域，服务器中转代理：前端向本地服务器发送请求，本地服务器代替前端再向服务器接口发送请求进行服务器间通信，本地服务器是个中转站的角色，再将响应的数据返回给前端

11.vuex 是什么？ 怎么使用？那些场景用过 ？

是状态管理，在main.Js引入store。只用来读取的状态集中放在store中；改变状态的方式是提交mutatios，这是个同步的事物；异步逻辑应该封装在action中。
应用场景：单页面应用中，组件间的状态，音乐播放，登陆状态，加入购物车vuex是一种集中式管理状态模式，按照一定的规则管理状态，保证状态的变化是可预测的

12.Vuex有五个核心概念？

    state, getters, mutations, actions, modules。
　　 1. state：vuex的基本数据，用来存储变量
　　 2. geeter：从基本数据(state)派生的数据，相当于state的计算属性
　　 3. mutation：提交更新数据的方法，必须是同步的(如果需要异步使用action)。每个 mutation 都有一个字符串的 事件类型 (type) 和 一个 回调函数 (handler)。
　　 回调函数就是我们实际进行状态更改的地方，并且它会接受 state 作为第一个参数，提交载荷作为第二个参数。
　　 4. action：和mutation的功能大致相同，不同之处在于 ==》1. Action 提交的是 mutation，而不是直接变更状态。 2. Action 可以包含任意异步操作。
　　 5. modules：模块化vuex，可以让每一个模块拥有自己的state、mutation、action、getters,使得结构非常清晰，方便管理。

13.什么是slot插槽？以及使用场景？

指令为v-slot vue实例一套内容分发的api，将slot元素作为承载分发内容的出口。使用场景：复用公共组件

14.vue 组件通信如何实现 ？列举至少两种方式 并详细说明其机制？

父组件给子组件传值：子组件通过props方法接收数据
子组件给父组件转值：$emit方法传递参数

15.Webpack的优势？

代码拆分（支持异步模块加载）Webpack 有两种组织模块依赖的方式，同步(默认)和异步（高级）。异步依赖作为分割点，形成一个新的块。在优化了依赖树后，每一个异步区块都作为一个文件被打包。Loader（支持任意模块加载，比如图片、less、css等等）Webpack 本身只能处理原生的 JavaScript 模块，但是 loader 转换器可以将各种类型的资源转换成 JavaScript 模块。这样，任何资源都可以成为 Webpack 可以处理的模块。智能解析Webpack 有一个智能解析器，几乎可以处理任何第三方库，无论它们的模块形式是 CommonJS、 AMD 还是普通的 JS 文件。甚至在加载依赖的时候，允许使用动态表达式 require("./templates/" + name + “.jade”)。插件系统Webpack 还有一个功能丰富的插件系统。大多数内容功能都是基于这个插件系统运行的，还可以开发和使用开源的 Webpack 插件，来满足各式各样的需求。快速运行Webpack 使用异步 I/O （NodeJs）和多级“缓存”提高运行效率，这使得 Webpack 能够以令人难以置信的速度快速增量编译

16.懒加载 和 热更新 怎么配置？

懒加载：先在页面中把所有的图片统一使用一张占位图进行占位，地址存放到其它属性(data-original)中，把正真的路径存在元素的“data-url”属性里，根据scrollTop判断图片是否在用户的视野内，如果在，则将data-original属性中的值取出存放到src属性中。
懒加载：const Foo = () => import(’’)
热更新：修改代码时不用刷新直接可以看到修改后的内容
在项目使用webpack,只需要webpack-dev-server插件就可以实现项目的热更新
安装：npm i webpack-dev-server -D
配置webpack.config.js
在package.json的script添加webpack-dev-server
启动npm run server查看

17.v-show 和 v-if 的作用和区别 ？

v-show切换元素的display属性，来控制元素显示隐藏初始化会渲染，适用于频繁切换显示隐藏元素，不能在上使用
v-if通过销毁并且重建组件来控制组件显示隐藏，初始化不会渲染，不适用于频繁切换显示隐藏的组件，能在上使用

18.组件中 data computed 和 watch的区别？

data:Vue 实例的数据对象。Vue 将会递归将 data 的 property 转换为 getter/setter，从而让 data 的 property 能够响应数据变化。对象必须是纯粹的对象 (含有零个或多个的 key/value 对)
Computed：是一个计算属性具有依赖性只执行一次就拿出来调用下一次获取computed的值时才会重新计算
Watch： 是调用一次执行一次 如果监听数据变化都会执行回调

19.route和router有什么区别？

route是“当前路由信息对象”，包括path，params，hash，query，fullPath，matched，name等路由信息参数。
router是“路由实例对象”，包括了路由的跳转方法，钩子函数等。

20.伪类与伪元素的特性及其区别：

1.伪类本质上是为了弥补常规CSS选择器的不足，以便获取到更多信息；
2.伪元素本质上是创建了一个有内容的虚拟容器；
3.CSS3中伪类和伪元素的语法不同； 伪类 :link :hover 伪元素 ::before ::after
4.可以同时使用多个伪类，而只能同时使用一个伪元素；
5.其中伪类和伪元素的根本区别在于：它们是否创造了新的元素, 这个新创造的元素就叫 “伪无素” 。
6.伪元素/伪对象：不存在在DOM文档中，是虚拟的元素，是创建新元素。 这个新元素(伪元素) 是某个元素的子元素，这个子元素虽然在逻辑上存在，但却并不实际存在于文档树中.
7.伪类：存在DOM文档中，(无标签,找不到, 只有符合触发条件时才能看到 ), 逻辑上存在但在文档树中却无须标识的“幽灵”分类。
8. 因为伪类是类似于添加类所以可以是多个，而伪元素在一个选择器中只能出现一次，并且只能出现在末尾
9. W3C中对于二者应用的描述(描述太模糊, 不容易理解)：
伪类：用于向某些选择器添加特殊的效果
伪元素：用于将特殊的效果添加到某些选择器

21总结

我们可以看到我的这些20道面试题 基本上都是我们日常所了解的知识 我希望正准备面试的人 看了这个能对你们有所帮助

标签：面试题,函数,前端,元素,xhr,Webpack,小白必,使用,组件
来源： https://blog.csdn.net/m0_53266704/article/details/118248217