最近在找工作，面试了好多家公司，结果都不怎么理想。要么公司环境氛围不行，要么工资达不到理想的薪资。大部分公司对程序员的面试流程几乎都一样，来了先填一份登记表，写一套面试题，然后技术面，人事面。至于有的大牛说，四面web前端，拿到10K+的工资，反正我这个渣渣程序员是没有碰到。
现在来整理一下这几天我所碰到的面试题。
html、css相关
如何垂直居中一个浮动元素
- 父盒子有宽高
父元素相对定位，子元素绝对定位，top：50%；left：50%。margin负的左右二分之一的height，width
.content{
position: absolute;
top: 50%;
left: 50%;
width: 100px;
float: left;
height: 100px;
background-color: #ff6700;
margin-top: -50px;
margin-left: -50px;
}
- 父盒子没有高宽
父盒子相对定位，子盒子决定定位，上下左右都为0，margin：auto；
.content{
width: 200px;
height: 200px;
background-color: #ff6700;
float: left;
margin: auto;
position: absolute;
left: 0;
top: 0;
bottom: 0;
right: 0;
}
说一下css的三大特性以及选择器的优先级
css三大特性：继承、优先级、层叠
选择器优先级：!important > 行内样式 > ID选择器 > 类选择器 > 标签 > 通配符 > 继承
简单说一下盒模型
盒模型: 内容 + padding + border + margin
有用过less这种预编译吗?用过它的那些方法
less是对css进行一个预编译,它重新定义了css样式的书写,样式可以嵌套,同时还定义了变量和函数
@color: #ccc;
.content{
background-color:@color;
}
.textCenter(@marginT: 10px){
text-align:center;
margin-top:@marginT;
}
Css3颜色渐变有那两种
线性渐变所用的属性是
linear-gradien
径向渐变用到的属性是radial-gradient
说说H5和C3新增了那些特性
H5主要新增了一些语义化标签，比如
header,nav,main等等，还有音频视频，本地存储等技术。
Css3新增了一些属性选择器，伪类选择器，过度transition，2D3D旋转transform，动画animation等
实现页面间通信有那些方法,他们有什么区别
可以使用H5新增的本地存储技术
localstorage, 将数据存储到本地硬盘
使用cookie存储,sessitionStorage
区别:cookie兼容性较好,但是存储体积小只有时4kb,生命周期短,会话结束数据就消失,而且不安全容易被劫持。而其他两者不一样,存储体积大,存储时间长,除非手动删除否则不会消失。
说一下rem和em的区别
在css中的单位主要有px,em,rem
px单位是固定的像素,一但设置就无法适应页面大小而改变
em和rem相对于px更具有灵活性，他们是相对长度单位，意思是长度不是定死了的，更适用于响应式布局。
em相对于父元素，rem相对于根元素(参照的是html)
说一下flex弹性布局的属性
justify-content： //子元素水平排列的方式
center //居中
space-between //两端对齐
space-around // 子元素拉手分布
flex-start // 居左
flex-end //居右
align-items ： // 子元素的垂直居中的排列方式
enter // 居中
flex-end //底部
flex-start //开始
align-content : //多行的时候，子元素的垂直排列方式
center //居中
flex-end //底部
flex-start //开始
flx-direction： // 排列方式row 横向排列
row-reverse //横向反向排列
flex-wrap ： //子元素是否在一行显示
no-wrap //不换行
wrap //换行
控制元素显示隐藏有那些方式,有什么区别
display:none和visibility:hidden
display:none控制隐藏的元素不占位置
visibility:hidden隐藏元素,但保留元素空间
js相关
怎样添加、移除、移动、复制、创建和查找节点
1）创建新节点
createDocumentFragment() //创建一个DOM片段
createElement() //创建一个具体的元素
createTextNode() //创建一个文本节点
（2）添加、移除、替换、插入
appendChild()
removeChild()
replaceChild()
insertBefore()
（3）查找
getElementsByTagName() //通过标签名称
getElementsByName() //通过元素的Name属性的值
getElementById() //通过元素Id，唯一性
说说js中操作数组字符串的方法
这个我在之前的文章也有总结过
谈谈你对闭包的理解
之所以有闭包是因为js存在一个变量作用域，变量的作用域分为局部全局作变量和局部变量，在js函数中，可以访问到外部定义的全局变量，但在函数外面却无法访问函数内部定义的局部变量。所以闭包就是用来解决函数外部无法访问函数内部的局部变量。
闭包是在一个函数内部，return一个子函数，在子函数中可以访问到父函数定义的局部变量。它可以读取函数内部的变量，让这些变量的值始终保持在内存中，避免变量全局污染。所以导致它不能被浏览器垃圾回收机制回收，容易造成页面性能问题，内存泄漏
垃圾回收机制
JS的垃圾回收机制是为了以防内存泄漏，内存泄漏的含义就是当已经不需要某块内存时这块内存还存在着，垃圾回收机制就是间歇的不定期的寻找到不再使用的变量，并释放掉它们所指向的内存。
当一个变量的生命周期结束之后它所指向的内存就应该被释放。JS有两种变量，全局变量和在函数中产生的局部变量。局部变量的生命周期在函数执行过后就结束了，此时便可将它引用的内存释放（即垃圾回收），但全局变量生命周期会持续到浏览器关闭页面。
说一下原型和原型链
- 原型
JavaScript 规定，每一个构造函数都有一个 prototype 属性，指向另一个对象。我们可以把所有对象实例需要共享的属性和方法直接定义在 prototype 对象上。这个对象的所有属性和方法，都会被构造函数的所拥有。
Prototype作为对象的内部属性，是不能被直接访问的，我们一般通过__proto__这个属性进行访问。
在原型对象中还有一个属性constructor，这个属性对应创建所有指向该原型的实例的构造函数
原型对象就相当于一个公共的区域，所有同一个类的实例都可以访问到这个原型对象，我们可以将对象中共有的内容，统一设置到原型对象中。
- 原型链
在JavaScript中万物都是对象，对象和对象之间也有关系，并不是孤立存在的。对象之间的继承关系，在JavaScript中是通过prototype对象指向父类对象，直到指向Object对象为止，这样就形成了一个原型指向的链条
当我们访问对象的一个属性或方法时，它会先在对象自身中寻找，如果有则直接使用，如果没有则会去原型对象中寻找，如果找到则直接使用。如果没有则去原型的原型中寻找,直到找到Object对象的原型，Object对象的原型没有原型，如果在Object原型中依然没有找到，则返回undefined。
事件机制和事件委托
事件流的三个阶段:
事件捕获
处于目标阶段
事件冒泡
事件委托:
事件委托是利用了事件的冒泡原理实现的,子元素的事件通过冒泡形式委托父元素执行
说一下JS面对对象有那些特性,怎样实现
对象三大特性:封装,继承,多态
封装:将面向过程每一步进行推进:对同种对象的属性和方法进行抽象，成为一个类(js中没有类的概念，实际上也是一个对象)，然后通过类的方法和属性来访问类
继承:在封装的基础上，将同类事物继续抽象，继承时，子类拥有父类的属性和方法，同时拥有自己特有的属性和方法
js的继承实现方法：
1.属性拷贝（浅拷贝）
2.属性拷贝（深拷贝）
3.原型式继承
4.原型链继承
5.借用构造函数
6.组合继承
- 多态:不同对象对同一事物做出不同的回应，通常出现在继承后对方法的重写
特点：对于同一个操作（指令），不同的对象表现出不同的反应 隐藏不同
谈谈你对同步异步的理解
同步:在执行完一个函数或方法之后，一直等待系统返回值或消息，这时程序是出于阻塞的，只有接收到返回的值或消息后才往下执行其他的命令。
异步:执行完函数或方法后，不必阻塞性地等待返回值或消息
区别:同步会阻塞程序的执行,效率低。异步可以同时执行多个程序,效率高
一次完整的HTTP请求是怎样一个过程
域名解析 --> 发起TCP的3次握手 --> 建立TCP连接后发起http请求 --> 服务器响应http请求，浏览器得到html代码 --> 浏览器解析html代码，并请求html代码中的资源（如js、css、图片等） --> 浏览器对页面进行渲染呈现给用户
Ajax原理
ajax是用来实现页面异步加载,同步刷新。
Ajax的原理简单来说通过XmlHttpRequest对象来向服务器发异步请求，从服务器获得数据，然后用javascript来操作DOM而更新页面。
XMLHttpRequest对象的属性：
open准备发送请求的数据
send发送请求
onreadystatechange 每次状态改变所触发事件的事件处理程序。
responseText 从服务器进程返回数据的字符串形式。
responseXML 从服务器进程返回的DOM兼容的文档数据对象。
status 从服务器返回的数字代码，比如常见的404（未找到）和200（已就绪）
status Text 伴随状态码的字符串信息
readyState 对象状态值
Ajax中get请求和post有什么区别
GET和POST请求方式的差异
GET请求没没有请求体，请求的数据在xhr.open()里面拼接，xhr.send(null)
POST请求数据在xhr.send()里面，在设置请求体之前需要设置请求头
xhr.setRequestHeader("Content-Type","application/x-www-form-urlencoded")
解决跨域
产生跨域是因为浏览器的同源策略：域名 协议 端口必须保持一致
- CORS
在服务器端设置响应头
header("Access-Control-Allow-Origin:*")
这种方式需要前后台的一个配后,而且相对而言不安全
- JSONP
利用script标签src天然支持跨域的特征,将请求的地址写在src,在script里面定义一个处理函数,并把函数名传递给后台,后台接收并返回这个函数的调用,将传递的参数以函数形参的方式传递给前端
这种通过src放送的是一个同步请求,而且只能发送get请求,和ajax不一样
- 方向代理
通过访问第三方服务器,让第三方服务器帮我们发送请求.
es6你知道多少
字符串扩展
includes断字符串中是否包含子字符串,第一个参数表示要测试的子字符串,第二个参数表示从那个位置开始查找,不传默认从索引0开始。
startsWith判断字符串是否以特定的字符串开始
endsWith判断字符串是否以特定的字符串结束
字符串填充:padStart()和padEnd()可以对字符串进行填充解构赋值
数组的结构赋值
// 解构
let [a,b,c] = [1,2,3];
console.log(a,b,c); // 1 2 3
// 解构时设置默认值
let [a = 1,b,c] = [,5,6];
console.log(a,b,c); // 1 5 6
// 解构时没有的数据为undefined
let [a = 1,b,c] = [4,5,];
console.log(a,b,c); // 4 5 undefined
对象的解构赋值
let {name,age} = {name:'zxx',age:18}
console.log(name,age); // zxx 18
// 顺序无关
let {name,age} = {age:18,name:'zxx'}
console.log(name,age); // zxx 18
// 属性别名,一旦设置了别名,原来的名字就无效了
let {name:tag,age} = {age:18,name:'zxx'}
console.log(name,age); // ReferenceError: name is not defined
console.log(tag,age); // zxx 18
// 解构赋值时设置默认值
let {name:tag='zxx',age} = {age:18}
console.log(tag,age); // zxx 18
字符串的解构赋值
let [a,b,c,d] = 'zxx';
console.log(a,b,c,d); // z x x undefined
let [a,b,c,d] = 'zxx';
console.log(a,b); z x
// 得到字符串长度
let { length } = 'zxx';
console.log(length); // 3
- 扩展运算符
合并数组
let arr2 = [4,5,6];
let arr3 = [...arr1,...arr2];
console.log(arr3); // [1,2,3,4,5,6]
- 箭头函数
let f = function(v) {
return v;
};
let f = v => v;
- Promise
Promise 是异步编程的一种解决方案.简单说就是一个容器，里面保存着某个未来才会结束的事件（通常是一个异步操作）的结果。从语法上说，Promise 是一个对象，可以从改对象获取异步操作的消息。
// 1\. 创建promise实例,在实例中执行异步操作(比如发送网络请求)
// 2\. 异步操作成功时,调用reslove函数传递数据
// 3\. 异步操作失败时,调用reject函数传递错误信息
const promise = new Promise(function(resolve, reject) {
// 异步操作
if (/* 异步操作成功 */){
resolve(value);
} else {
reject(error);
}
});
// 使用promise实例then方法接收reslove或reject返回的数据
promise.then(function(value) {
// 此处数据即为reslove回来的数据
// success
}, function(error) {
// 此处数据即为reject回来的数据
// failure
});
VUE相关
vue有那些指令
v-textv-bindv-forv-ifv-on
谈谈MVVM
MVVM是一种分层次开发思想,它是CommonJS规范的实现
M代表module模型层
V代码view视图层
VM模型层和视图层之间没有任何的联系,而VM会充当一个调度者,将他们联系起来,实现双向数据绑定
组件化
从页面视图的角度出发，对页面功能的封装，实现项目可独立维护，可复用性大大提高
什么是Vue双向数据绑定?原理?
v-model指令、数据视图同步更新、使用的是ES5提供的Object.defineProperty()这个方法实现数据劫持
数据如何从模型同步到视图?当模型中数据发生变化时会触发Object.defineProperty的set方法,在这个方法内部能够劫持到数据的改变,然后就可以在该方法内部通知视图更新
视图中的数据如何同步到模型中?(v-model指令是怎么实现改变了元素中的数据同步到模型中)监听表单元素的change事件,在change事件中可以拿到用户输入的数据,然后给模型中的数据赋值
v-if和v-show的区别
v-if和v-show都是用来控制元素的显示和隐藏,当值是true，元素显示，值为false,元素隐藏
区别: v-if当切换布尔值时,会创建/删除元素；v-show当切换布尔值时,会改变元素的样式,display:block
Vue生命周期函数的理解?
生命周期就是在vue实例执行过程中会触发的一批函数,这些函数可以帮助我们处理不同时间段的业务逻辑
- 创建阶段
-
beforeCreatevue实例被创建出来,此时仅仅只是分配了内存,属性和方法都还没有挂载到vue实例上 -
created此时vue实例已经创建完毕,data中的属性和methods中的方法都已经挂载到vue实例上
-
- 渲染阶段
-
beforeMountvue实例中的数据被解析渲染到内存中的虚拟DOM上,真实中的DOM指令还没有被解析 -
mountedvue实例中的数据已经完全被渲染到了真实DOM中
-更新阶段 -
beforeUpdate模型中的数据已经改变,但视图中的数据还没有同步更新 -
updated此时模型中的数据改变,视图层数据已经同步更新
-
- 销毁阶段
-beforeDestroyvue中的数据和方法还能继续使用,但是指令不能再被vue解析-
destroyedvue中的数据和方法都已经被销毁
-
说一下单向数据流
组件之间的传值,数据从父级组件传递给子组件，只能单向绑定。
-
父组件向子组件传值
在父组件中定义数据,通过属性绑定的形式绑定到子组件上,在子组件中定义props接收传递过来的变量
-
子组件向父组件传值
在子组件中使用this.$emit触发一个自定义的方法名,然后传递数据第一个参数就是自定义的方法名,第二个参数就是需要传递给父组件的数据
this.$emit('func',this.msg)在父组件中使用子组件时,绑定一个事件,事件名称和子组件触发的方法名同名
vue-router路由模式有几种,原理分别是什么?
vue-router路由库是用哪种技术实现的,总共有两种,分别叫hash模式和history模式,默认是hash模式
-
hash模式:地址上带有#号;url地址可以放在任意标签中打开;可以兼容低版本的浏览器
hash模式原理:监听hashchange事件,可以调用window.location.hash获取到锚点值,和路由规则进行匹配,匹配到之后将路由规则中定义的组件渲染到页面
history模式:地址上没有#号,更加符合URL形式;url地址不能重复打开; -
history模式原理:利用HTML5新提供的history.pushState API 来完成 URL 跳转而无须重新加载页面
history模式需要后台进行相关配置:要在服务端增加一个覆盖所有情况的候选资源：如果 URL 匹配不到任何静态资源，则应该返回同一个 index.html 页面，这个页面就是你 app 依赖的页面
Vuex怎么用,它相对与localstorage有什么优点和缺点
vuex的核心是：state,getter,actions,mutations
-
state用来定义存放公共数据this.$store.state.msg -
mutations定义方法this.$store.commit('change','我是被修改的数据') -
getters用于获取数据 进行一些操作 类似于Vue实例中的过滤器和计算属性this.$store.getters.fixmsg -
actionactions和mutations都是定义对数据进行操作的方法,mutations中都是同步方法,mutations中定义异步方法this.$store.dispatch('asyncchange','我是被异步修改的数据')
区别
localstorage无法实现双向数据绑定,模型层的数据改变视图中数据不会发生改变,vuex数据不能持久化,需要结合localstorage使用,比较臃肿,小型项目不建议使用
总结
以上就是我最近面试遇到的面试题,希望对各位有所帮助,后期我也会持续更新,有遇到新的问题会及时更新。如果有什么错误,还请各位大佬指出在评论留言,小子会更改。最后希望大家能顺利的找到自己满意的工作,喜欢的可以支持一下,毕竟座在床上写了一下午(别问我为什么还在床上)也蛮辛苦的