web前端面试题(一直更新)
一、Vue
1、v-show和v-if不同
(1)实现方式
v-if是一种条件渲染指令,它会根据表达式的值来插入或删除元素。当表达式的值为真时,元素会被插入到DOM中,否则会从DOM中删除。
v-show是一种简单的显示/隐藏指令,它会根据表达式的值来显示或隐藏元素。当表达式的值为真时,元素会被显示,否则会被隐藏。
(2)性能
由于v-if的工作原理是从DOM中添加或删除元素,因此它对于频繁切换的元素具有较高的开销。每次切换时,v-if都需要重新渲染元素及其所有子元素。
v-show则不会从DOM中删除元素,而是使用CSS的display属性来控制元素的显示或隐藏。因此,v-show对于频繁切换的元素具有更好的性能,因为元素的渲染不需要重复进行。
(3)适用场景
v-if适用于只有在满足特定条件时才需要渲染的元素,因为它可以节省不必要的DOM元素和子元素的渲染开销。
v-show适用于需要在不同的状态之间切换的元素,因为它可以避免在切换时重新渲染元素及其所有子元素。
2、vue-router路由模式有几种
1:Hash 模式(默认):
在 URL 中使用带有 # 符号的哈希值来管理路由。例如:http://xxxx.com/#/path。 在 Hash 模式下,当 URL 的哈希值发生变化时,浏览器不会向服务器发送请求,而是通过监听 hashchange 事件来进行路由导航。
2:History 模式:
使用 HTML5 的 History API 来管理路由。这种模式下,URL 不再需要使用哈希值,而是直接使用正常的 URL 地址。例如:http://xxxx.com/path。 在 History 模式下,当 URL 发生变化时,浏览器会向服务器发送请求,服务器需要配置相应的路由规则,以确保在刷新页面或直接访问 URL 时能正确响应路由。
3:Abstract 模式:
这种模式主要用于非浏览器环境,比如在服务器端渲染(Server-Side Rendering)时使用。 在 Abstract 模式下,Vue Router 不会对 URL 进行任何处理,而是将路由信息保存在内存中,通过编程方式进行路由导航。
可以通过创建 Vue Router 实例时的 mode 配置项来选择使用哪种路由模式。例如:
二、CSS
1、Css隐藏元素的方法
1、display:none
2、opacity属性透明度为0
3、Visibility:hidden
visibility:hidden 隐藏元素,位置还存在与页面文档流中,不会被删除,所以会触发浏览器渲染引擎的重绘
opacity:0 将元素设置为透明,位置还存在页面文档流中,不会被删除,所以会触发浏览器渲染引擎的重绘
display:none 隐藏元素,且其位置也不会被保留下来,所以会触发浏览器渲染引擎的回流和重绘。
visibility:hidden
和display:none
的显著区别
display:none和visibility:hidden,都能够将元素隐藏。但是visibility:hidden隐藏的元素在页面中仍占据着位置,也就是说该元素后面的元素会给这个设置visibility:hidden的元素空出位置。而display:none隐藏的元素不会再占据着页面的位置。
2、简述Css盒子模型
一个盒子中主要的属性就5个:width、height、padding、border、margin
W3C盒子模型(标准盒模型):width和height指的是内容区域的宽度和高度
即:在标准模式下,元素总宽度 = 内容的width + padding(左右) + border(左右) + margin(左右)
IE盒子模型(怪异盒模型):width和height指的是内容区域、边框、内边距总的宽度和高度
即:在怪异模式下,元素总宽度 = 内容的width + margin(左右)(这里的width包含了padding(左右)和border(左右)的值)
三、JavaScript
1、JavaScript的数据类型
基本数据类型(值类型):Number、String、Boolean、Undefined、Null、Symbol(es6新增的一种独一无二的值)和BigInt(es10新增),这些类型可以直接操作保存在变量中的实际值。
引用数据类型:Object。包含Object、Array、function、Date、RegExp。(在JS中除了基本数据类型以外的都是对象,数据是对象,函数是对象,正则表达式是对象)
2、字符串转换成数组
通过split分割,将字符串分割成数组
var a= "1,2,3,4";
var b = a.split(",");
b=[1,2,3,4]
3、数组转换成字符串
有三种方式,toString、toLocaleString、join
toString() 将数组转换成一个字符串
toLocaleString() 把数组转换成本地约定的字符串
join() 将数组元素连接起来以构建一个字符串
(1)join
join() 可理解为直接变成字符串,默认逗号分隔
join(“a”) 括号中的数据可以为、。! -等,将数据中的“,”替换
join()
var a=["1","2","3"]
var b=a.join()
b="1,2,3"
join("-")
var a=["1","2","3"]
var b=a.join("-")
b="1-2-3"
(2)toString
toString不需要指定分隔符
var a=["1","2","3"]
var b=a.toString();
b="1,2,3"
如果需要设置分隔符的化使用replace方法
(3)toLocaleString
join("-")
var a=["1","2","3"]
var b=a.toLocaleString();
b="1-2-3"
4、将两个数组合并到一起
(1)concat
var arr=[1,2,3]
var arr2=[4,5,6]
arr=arr.concat(arr2)
(2)push
var arr=[1,2,3]
var arr2=[4,5,6]
arr=arr.push(...arr2)
(3)unshift
var arr=[1,2,3]
var arr2=[4,5,6]
arr=arr.unshift(...arr2)
push和unshift结合...[]使用
其他
1、Var与let、const的区别?
1、var在ECMAscript所有版本可以使用,let和const在ECMAscript6和更晚的版本使用
2、Var和let声明的变量都是可以改变的,不仅可以改变在也可以改变类型。Const声明叫常量,一经定义就不可改变
3、var与let的区别在与作用域。var的声明范围是函数作用域,在全局范围内声明,。Let只在块级作用域中
4、const声明对象需要初始化其他两个不需要
5、Let不允许重复声明
2、和=区别
1、==:先转换为同一数据类型再进行比较
2、===:先比较数据类型,数据类型不一致直接返回false
var定义的变量,没有块的概念,可以跨块访问, 不能跨函数访问。
let定义的变量,只能在块作用域里访问,不能跨块访问,也不能跨函数访问。
const用来定义常量,使用时必须初始化(即必须赋值),只能在块作用域里访问,而且不能修改。
3、em、rem、px、rpx的区别
单位名称 | 说明 | web | 小程序 |
px | 绝对单位,代表像素量 | 支持 | 支持 |
em | 相对单位,相对于父元素的字体大小 | 支持 | 支持 |
rem | 相对单位,相对于页面跟标签html的字体大小 | 支持 | 不支持 |
rpx |
相对单位,小程序独有,750px等于视口宽度,可以根据屏幕自适应缩放 |
不支持 | 支持 |