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:hiddendisplay:none的显著区别

display:none和visibility:hidden,都能够将元素隐藏。但是visibility:hidden隐藏的元素在页面中仍占据着位置,也就是说该元素后面的元素会给这个设置visibility:hidden的元素空出位置。而display:none隐藏的元素不会再占据着页面的位置。

 2、简述Css盒子模型

页面就是由一个个盒模型堆砌起来的,每一个html元素都可以叫做盒模型。CSS盒模型就是在网页设计中经常用到的CSS技术所使用的一种思维模型。盒模型(Box Modle)可以用来对元素进行布局,由内到外包含实际内容、内边距、边框、和外边距四个部分。

 一个盒子中主要的属性就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等于视口宽度,可以根据屏幕自适应缩放

不支持 支持

 

 

 

 

 

 

posted on 2024-05-14 12:22  昨夜小楼听风雨  阅读(24)  评论(0编辑  收藏  举报