前端面试题--包含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来实现

你可能感兴趣的:(javascript,css,vue.js,html,html5)