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

前端面试题链接：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事件流

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

三、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

3.7 怎么定义vue-router的动态路由？怎么获取传递的动态参数？

答：在router目录下的index.js文件中，对path属性加上/:id。 使用router对象的params.id

3.8 data为什么是个函数

Object是引用数据类型，如果不用function返回，每个组件的data都是内存的同一个地址，一个数据改变了其他也改变了；data是一个函数时，每个组件实例都有自己的作用域，每个实例相互独立，不会相互影响。

3.9 vue中拦截器主要用来做什么？

做异步处理，可以获取登录状态，处理错误请求，加上请求token等。

3.10 跨域解决方案

• JSONP
• webpack中设置proxyTab
• nigx反向代理
• location.hash + iframe 跨域
• 后端处理

3.11 vue常用的修饰符?

3.11.1 事件修饰符

事件修饰符就是对具体某个事件进行修饰，用来处理某个DOM事件,常用的事件修饰符有以下几个：(prevent,stop,self,capture,once)

.prevent 阻止默认事件

.stop阻止事件冒泡(在指定事件后阻止事件冒泡,阻止指定在最内层事件的标签里)

.self (控制事件操作对象是自己本身的时候才起作用)

.capture 捕获事件，它会改变事件冒泡的执行顺序 (先外后内)

.once 控制元素指定的事件只执行一次

3.11.2 表单元素修饰符

(number,trim,lazy)

• number能够强制的指定表单元素的内容数据类型是number
• trim能够去除输入内容左右两边的空格
• lazy只有标签的change事件执行后才会执行数据的双向绑定

3.12 vue-cli 工程常用的 npm 命令有哪些？

vue init webpack my-project：创建一个基于 webpack 模板的新项目

npm install：下载 node_modules 资源包的命令

npm run dev： 启动 vue-cli 开发环境的 npm命令（3.0以下 ☞ 脚手架2启动方式）
npm run serve:启动 vue-cli 开发环境的 npm命令（3.0以上 ☛ 脚手架3启动方式）

npm run build： vue-cli 生成 生产环境部署资源 的 npm命令（常说的打包文件）
脚手架2打包，生成的是build文件
脚手架3打包，生成的是dist文件

serve build（脚手架2，把你写好的项目打包，然后在本机测试，查看是否完整）
serve dist（脚手架3，把你写好的项目打包，然后在本机测试，查看是否完整）

3.13 vue中 keep-alive 组件的作用?

keep-alive是vue内置的一个组件，而这个组件的作用就是能够缓存不活动的组件，我们能够知道，一般情况下，组件进行切换的时候，默认会进行销毁，如果有需求，某个组件切换后不进行销毁，而是保存之前的状态，那么就可以利用keep-alive来实现