前端面试题--包含css、h5、js、vue

最新推荐文章于 2022-12-22 21:13:58 发布

小余童鞋11

最新推荐文章于 2022-12-22 21:13:58 发布

阅读量758

点赞数 1

文章标签： javascript css vue.js html html5

本文链接：https://blog.csdn.net/Little_Fishs/article/details/112750600

版权

前端面试题链接：https://www.cxymsg.com/

面试题：

一、h5和css3：

1.1 H5新特性：

1.语义化标签：header footer section nav aside article
2.增强型表单：input的多个type如：date email number time 等
3.新增表单元素：output datalist
4.新增表单属性：placeholder required min max
5.音频视频：audio video
6.Cavas
7.地理定位
8.拖拽
9.本地存储:localstorage sessionstorage
10.新事件：onresize ondrag onscroll onmousewhell onpause onplay
11.websocket:在单个TCP连接上进行全双工通信的协议。

1.2 CSS3新特性：

1.圆角（border-radus）,阴影（box-shadow）,边框图片（border-image）
2.文字特效（text-shadow）強制文本换行（word-wrap）线性渐变（line-gradient）
3.旋转缩放定位倾斜
4.增加了更多的css选择器：last-child nth-child (n) nth-last-child(n) 匹配父元素的倒数第n个子元素
5.rgba
6.媒体查询（@media）多栏布局

1.3 css选择器及权重

通常可以将css的优先级由高到低分为6组：

• 第一优先级：使用！important
• 第二优先级：在html中给元素标签加style，即内联样式。
• 第三优先级：id选择器
• 第四优先级：类选择器、属性选择器、伪类选择器定义。
• 第五优先级：元素选择器
• 第六优先级：通配选择器，如*

1.4 rem和em区别

rem是相对根元素（html）字体的大小
em則是相对使用em单位的元素的字体大小（父节点字体大小）

1.5 块级元素水平居中的方法

1.margin:0 auto
2.flex布局 justify-content:center;align-item

1.6 标准盒模型和IE盒模型

标准：元素宽度=margin+border+padding+content

IE：元素宽度=margin+width(border+padding+content)

1.7 BFC理解

block formatting context 块级格式化上下文，在页面中有一块渲染区域，并且有一套渲染规则，它决定了其子元素如何定位，以及和其他元素的关系和相互关系。（让处于BFC内部的元素与外部元素相互隔离）
触发条件：
根元素，即HTML元素;
position：fixed/absolute;
float不为none;
overflow不为visible;
display为inline-block table-cell table- caption
**作用：**防止margin重叠，防止元素塌陷

1.8 Cavas绘圆矩形

var c = document.getElementById(‘mycavas’)
var ctx = c.getContext(‘2d’)
ctx.beginPath()
ctx.arc(100,75,50,0,2*Math.PI)
ctx.stroke()
ctx.arc(x,y,r,startAngle,endAngel,counterclockwise)
ctx.rect(x,y,width,height)//繪制矩形

二、JS部分

2.1 引用类型和基本数据类型的区别：

1.基本数据类型存在栈中（順序），引用数据类型的值是存在堆里的（无序），而地址存在栈中
2.当复制出來一个基本数据类型，会在栈中新开辟一个空间，將复制的value放在該內存中，所以当這个值改变时，不会影响到原始值。而当复制出一个引用数据类型时，复制的是它存在栈里面的地址（即指針），所以当其中一个值变化时，另一个也会跟随变化。

2.2 闭包：

內部函数总是可以访问其所在的外部函数中声明的参数和变量。

特点：
让外部访问函数內部变量成为可能；
局部变量会常驻在內存中；
可以避免使用全局变量，防止全局变量污染；
会造成內存泄露（有一块內存空间被长期占，而不被释放）

2.3 let和var区别：

let是块级作用域，只在本代码块内部有效；同时不存在没有变量提升的现象；暂时性死区：只要块级作用域内存在let命令，它所声明的变量就“绑定”（binding）这个区域，不再受外部的影响。只要在代码块内，使用let命令声明变量之前，该变量都是不可用的。

2.4 解构赋值

ES6 允许按照一定模式，从数组和对象中提取值，对变量进行赋值，这被称为解构

2.5 模板字符串

模板字符串是增强版的字符串，用反引号（`）标识。它可以当作普通字符串使用，也可以用来定义多行字符串，或者在字符串中嵌入变量。

2.6 合并数组的方法：

arr1.concat(arr2)或者es6里面的扩展运算符 arr1= […arr2]

2.7 数组常用的方法

indexof() : 返回元素在数组的第一次出现的索引，从0开始。若数组不存在该元素，则返回-1。

**slice(start,end)**索引从start开始到索引end结束。通常，接受2个参数作为一个左闭右开区间，即包括开始索引位置的元素，但不包括结束索引位置的元素

**splice()**截取数组array.splice(start[, deleteCount[, item1[, item2[, …]]]])

**concat()**方法：合并数组，把当前的数组和另一个数组连接起来，并返回一个新的数组。

join(): 转成字符串，它会把当前Array的每个元素都用指定的字符串连接起来，然后返回连接后的字符串。are.join(’＊’)

map(),forEach(),filter(), some()和every()，reduce()
注：
1.some方法是只要有一个数组成员的返回值是true，则整个some方法的返回值就是true，否则false。every则相反。

2**.reduce()** array.reduce(function(prev, currentValue, currentIndex, arr), initialValue)依次处理数组的每个成员，最终累计为一个值。

3.**push：**尾部增加，pop尾部删除
4.**unshift:**头部增加，shift头部删除元素

2.8 js 改变this指向方法：

• 1.call（this指向，实参1，实参2）
• 实参可以有无数个，中间用逗号隔开
• 2.apply（this指向，[实参1，实参2]）
• 参数有两个，一个为this指向，一个为类数组
• 3.bind（this指向，实参）（实参）
• bind()的实参可以随意放置，但是不会自动调用函数
• 4.new
• 5.箭头函数

2.9 冒泡原理：

比较相邻元素，前一个比后一个大交换位置，第一轮结束最后一个元素是最大的。

2.10 阻止事件冒泡和事件默认行为的方法：

• 阻止事件冒泡e.stopPropagation()
• 阻止默认行为：e preventDefault ()

2.11 new完一个构造函数后发生什么？

• 创建一个空对象object
• this指向这个object，添加属性和方法name，age，sex
• 实例对象的**proto**(此处有杠杠)指向构造函数的prototype
• 隐式返回创建好的对象（所以构造函数不需要return）

2.12 浏览器输入网址：

解析域名
根据IP地址和默认端口建立tcp连接（三次握手）
浏览器发出http请求
服务器处理请求
释放TCP连接（四次挥手）
解析HTML，渲染内容

2.13.JS的dom事件流

事件捕获最上级到最终元素
处于目标阶段
冒泡阶段逐渐冒泡（事件代理利用冒泡机制，将子元素的事件委托给父元素）

三、vue

3.1 组件传值方式

父子组件传值：子组件通过prop接受父组件的值，子组件通过$emit向父组件传递参数；
兄弟组件传值：eventBus,中央事件总线;
vuex:

[外链图片转存失败,源站可能有防盗链机制,建议将图片保存下来直接上传(img-bzq9bXwS-1610871639562)(C:\Users\gyxu\AppData\Roaming\Typora\typora-user-images\image-20210117105425297.png)]

3.4 vue生命周期

Vue 实例有一个完整的生命周期，也就是从开始创建、初始化数据、编译模版、挂载Dom -> 渲染、更新 -> 渲染、卸载等一系列过程，我们称这是Vue的生命周期。

各个生命周期的作用

生命周期	描述
beforeCreate	组件实例被创建之初，组件的属性生效之前
created	组件实例已经完全创建，属性也绑定，但真实dom还没有生成，`$el`还不可用
beforeMount	在挂载开始之前被调用：相关的 render 函数首次被调用
mounted	el 被新创建的 vm.$el 替换，并挂载到实例上去之后调用该钩子
beforeUpdate	组件数据更新之前调用，发生在虚拟 DOM 打补丁之前
update	组件数据更新之后
activited	keep-alive专属，组件被激活时调用
deadctivated	keep-alive专属，组件被销毁时调用
beforeDestory	组件销毁前调用
destoryed	组件销毁后调用

[外链图片转存失败,源站可能有防盗链机制,建议将图片保存下来直接上传(img-xHqcm63A-1610871639564)(C:\Users\gyxu\Desktop\生命周期.png)]

3.5 vue-router 中hash模式和history模式

在vue的路由配置中有mode选项，最直观的区别就是在url中hash 带了一个很丑的 # ，而history是没有#的。vue默认使用hash。

3.5.1 hash

即地址栏 URL 中的 # 符号（此 hash 不是密码学里的散列运算）。
比如这个 URL：http://www.aaa.com/#/hello，hash 的值为 #/hello。它的特点在**于：hash 虽然出现在 URL 中，但不会被包括在 HTTP 请求中，对后端完全没有影响，因此改变 hash 不会重新加载页面。

3.5.2 history

利用了 HTML5 History Interface 中新增的 pushState() 和 replaceState() 方法。（需要特定浏览器支持）**
这两个方法应用于浏览器的历史记录栈，在当前已有的 back、forward、go 的基础之上，它们提供了对历史记录进行修改的功能。只是当它们执行修改时，虽然改变了当前的 URL，但浏览器不会立即向后端发送请求。

因此可以说，hash 模式和 history 模式都属于浏览器自身的特性，Vue-Router 只是利用了这两个特性（通过调用浏览器提供的接口）来实现前端路由。

3.6 vue路由钩子

• 全局守卫： router.beforeEach
• 全局解析守卫： router.beforeResolve
• 全局后置钩子： router.afterEach
• 路由独享的守卫： beforeEnter
• 组件内的守卫： beforeRouteEnter、beforeRouteUpdate (2.2 新增)、beforeRouteLeave