2021西安大小公司 前端十套面试题
作者:莹宝思密达
以下题目必问:
- css垂直水平居
- vue方向 组件传值,路由传参,vuex必问,nextTick使用和keep-alive有可能问
- CORS跨域
- react方向 ,如何传值, redux和hooks
- 项目中遇到的难题及解决方式
面试套路:
①离职原因:在真实原因上记得夸赞上家公司,千万不要抱怨。
②优缺点:优点:学习能力强,抗压力好。缺点:因为社会经验不足,人际交往能力不强。
③还有什么问题要问:
部门项目方向和技术,公司人员构成,如何做人才培养,hr在面试时比较看重应聘者的什么。
hr问薪资时,请求介绍公司薪资结构,以及 试用期工资,有木有五险一金,之后给到一个范围。
第一套 公司:久远银海
1.使200px*200px的div位于垂直水平居中
① 已知元素宽高:绝对定位+margin:auto:
div{
width: 200px;
height: 200px;
background: green;
position:absolute;
left:0;
top: 0;
bottom: 0;
right: 0;
margin: auto;
}
②. 已知元素宽高: 绝对定位+负margin
div{
width: 200px;
height: 200px;
background: green;
position:absolute;
left:0;
top: 0;
bottom: 0;
right: 0;
margin: auto;
}
③. absolute+transform
div{
width: 200px;
height: 200px;
background: green;
position:absolute;
left:50%; /* 定位父级的50% */
top:50%;
transform: translate(-50%,-50%); /*自己的50% */
}
④.flex + justify-content + align-items
.box{
height:600px;
display:flex;
justify-content:center; //子元素水平居中
align-items:center; //子元素垂直居中
/* aa只要三句话就可以实现不定宽高水平垂直居中。*/
}
.box>div{
background: green;
width: 200px;
height: 200px;
}
2.px和em的区别
px:固定长度
em:相对长度单位,相对于当前对象内文字的字体尺寸,也就是font-size设置的长度。如果当前font-size尺寸未被人设置,则寻找父级的font-size。如果父级没有设置font-size,那就相对于浏览器默认字体尺寸(16px)。
3.js实现给onclick事件同时绑定2个方法
function a(){alert(1)};
function b(){alert(2)};
<input type=”button” οnclick=”a(),b()”>
4.定时器都有哪些,区别是什么
js 定时器有以下两个方法:
setInterval() :按照指定的周期(以毫秒计)来调用函数或计算表达式。方法会不停地调用函数,直到 clearInterval() 被调用或窗口被关闭。
setTimeout() :在指定的毫秒数后调用函数或计算表达式。
5.JS数据类型有几种。
8种。Number、String、Boolean、Null、undefined、object、symbol、bigInt。
备注:前六种在ES5中定义,sumbol在ES6中定义,bigInt在谷歌67版本中定义,是指安全存储、操作大整数。
6.计算一个数组中所有数的和。
var a=[1,2,3];
var sum=a.reduce(function(prev,cur){
return prev+cur;
})
7.解释MVVM和MVC模式的区别。
8.清除浮动
①使用clear属性的空元素 在浮动元素后使用一个空元素如<div class="clear"></div>,并在CSS中赋予.clear{clear:both;}属性即可清理浮动
②使用css的overflow属性 给浮动元素的容器添加overflow:hidden;或overflow:auto;可以清除浮动
③给父元素设置高度
④使用CSS的:after伪元
<style>
.box-container::after {
content:"";
display:block;
clear:both;
}
.box{
float: left;
height: 100px;
width: 100px;
border: 1px solid red;
}
</style>
<div class="box-container">
<div class="box"></div>
</div>
9.解释盒子模型
box-sizing:content-box(标准模式) width=content-width
border-box(怪异模式) width=border+padding+content-width
10.解释eval()方法
eval()方法就像是一个完整的ECMScript解释器,它只接受一个参数,即要执行的js字符串。
eval(“alert(‘hi’)”);//hi
第二套 博彦科技
1.typeof和Instanceof的区别
①typeOf用来检测给定变量的数据类型,结果为undefined ,boolean,string,number,object,function
例子:console.log(typeof a===”number”);//true
②instanceOf用来检测引用类型
例子alert(obj1 instanceof Array );//true
2.forEach和map区别
①forEach()对数组中的每一项运行给定函数。这个方法没有返回值。
②map()对数组中的每一项运行给定函数,返回每次函数调用的结果组成的数组。
两个方法都不会修改数组中的包含的值。
3.for-in 和for-of 的区别
for-in 遍历键名,不仅遍历数字键名,还会遍历手动添加其他键以及原型链上的键。为遍历对象而生,不适用数组。
for-of 遍历键值 遍历数组,类数组对象,字符串,Set,Map以及Generator对象。
4.介绍原型链
利用原型让一个引用类型继承另一个引用类型的属性和方法。
5.深浅拷贝。
浅拷贝:
var obj4=Object.assign({},obj3);
深拷贝:
方法一:
function clone(oldObj) {
if (oldObj == null) {
return null;
}
if (typeof oldObj != "object") {
return oldObj;
}
//如果要克隆的是一个数组,那么赋值为[],否则就是要克隆一个对象,赋值为{}
var newObj = Array.isArray(oldObj) ? [] : {};
for (var key in oldObj) {
newObj[key] = clone(oldObj[key]);
}
return newObj;
}
方法二:
var objString = JSON.stringify(obj1);
var obj2 = JSON.parse(objString);
第三套 公司:核音智言
1.webpack打包基本配置
https://segmentfault.com/a/1190000019923659
2.防抖和节流
https://blog.csdn.net/weixin_39939012/article/details/101211869
3.ES6新增内容
4.闭包的应用
①防抖和节流
②通过循环给页面上多个DOM节点绑定事件
5.this的指向
①一般为全局window
②对象的方法里,this指调用该方法的对象
③构造函数的this,指向创建出来的实例,改变this指向
④window内置函数的回调函数中调用(SetInterval等)为window
⑤apply ,call ,bind指向第一个参数
⑥匿名函数的执行环境具有全局性,this指向window
第四套 西部证券
1.为什么会有跨域,跨域的方式有什么?
浏览器的同源策略。使用Cors跨域,前端代码与发送普通请求没有差异,我们只需在服务端设置即可res.header('Access-Control-Allow-Origin', 'http://localhost:3001');
2.promise宏任务和微任务程序执行
求程序运行结果
console.log('1');
setTimeout(function() {
console.log('2');
process.nextTick(function() {
console.log('3');
})
new Promise(function(resolve) {
console.log('4');
resolve();
}).then(function() {
console.log('5')
})
})
process.nextTick(function() {
console.log('6');
})
new Promise(function(resolve) {
console.log('7');
resolve();
}).then(function() {
console.log('8')
})
setTimeout(function() {
console.log('9');
process.nextTick(function() {
console.log('10');
})
new Promise(function(resolve) {
console.log('11');
resolve();
}).then(function() {
console.log('12')
})
})
// 1 7 6 8 2 4 3 5 9 11
https://blog.csdn.net/qq_38606793/article/details/97368842
3.BOM和DOM有什么区别
①BOM是Browser Object Model的缩写,即浏览器对象模型。
BOM和浏览器关系密切。浏览器的很多东西可以通过JavaScript控制的,例如打开新窗口、打开新选项卡(标签页)、关闭页面,把网页设为主页,或加入收藏夹,等等…这些涉及到的对象就是BOM。
②DOM是Document Object Model的缩写,即文档对象模型。
DOM和文档有关,这里的文档指的是网页,也就是HTML文档。网页是由服务器发送给客户端浏览器的,无论用什么浏览器,接收到的HTML都是一样的,所以DOM和浏览器无关,它关注的是网页本身的内容。由于和浏览器关系不大,所以标准就好定了。
第五套 四叶草react
1.判断对象是否为空
①将对象转为字符串
JSON.stringify(a)===”{}”
②for..in循环
var obj={};
function isObjEmpty(obj){
for(var key in obj){ return true;}
return false;
}
③Obj.getOwnPropertyNames()返回一个由指定对象的所有自身属性的属性名
Obj.getOwnPropertyNames(obj).length===0;
④Obj.keys()返回属性数组
Obj.keys.length===0
2.css选择器权重排序
!important > 内联 > id > 类/伪类/属性 > 元素选择器 > * 群组选择器 > 继承
3.阻止默认事件
e.preventDefault()
e.stopPropgation()
4.消除字符串两边多余空格
.trim()
5.鼠标点击<a>标签的触发伪类顺序
爱恨原则 love hate
:link :visited :hover :active
6.let var const 区别
①var声明变量存在变量提升,let和const不存在变量提升
②let、const都是块级局部变量
③同一作用域下let和const不能声明同名变量,而var可以
第六套:蔚星软件
1.将 arr=[{a:1,b:2},{c:3}]返回为 {a:1,b:2,c:3}
var obj=arr.reduce((prev,cur)=>{
return Object.assign(prev,cur)
})
2.url发送到地址栏都经历了什么
①DNS域名解析
②当浏览器拿到IP后,就向服务器发送http连接请求,进行三次握手
③发送请求
④接受响应
⑤浏览器渲染页面
处理HTML标记并构建DOM树
处理CSS标记并构建CSSDOM树
将DOM和CSSDOM合并为一颗渲染树;
根据渲染树来布局,以计算每个节点的任何信息;(重排)
将各个节点绘制到屏幕;
如果DOM或CSSDOM被修改,以上过程需要重新执行;
⑥四次挥手 断开连接
第七套 浙江宇视
1.定时器介绍
2.数据类型
3.如何实现1个click上添加多个事件
4.JSON支持的类型有什么
①简单值:字符串,数值,布尔,null不支持undefined
②对象
③数组
5.浏览器如何渲染页面
6.解释错误码304
第八套 星图测试
1.解释盒子模型
2.position是如何相对父元素定位的
①absoute 相对static定位以外的第一个父元素定位
②relative 相对原来位置
③fixed 相对浏览器
④static 默认值
3.隐藏元素的实现方法
①apacity:0 透明度为0,占位
②visibility:hidden 占位,不影响任何用户交互,浏览器解析该元素
③display:none 不占位,浏览器不解析该元素
④position:absolute;left:-9999px;tp:-9999px
4.什么是原型,什么是类,类与实例的关系是这样,如何销毁类
5.数组去重
var arr=[1,2,4,3,3,3,3]
var newSet=new Set(arr)
var newArr=[...newSet]
6.ES6了解多少
let,const,promise,Object扩展,箭头函数,(自由发挥)
7.localStorage,sessionStorage,cookie的区别
https://blog.csdn.net/weixin_42614080/article/details/90706499
8.跨域
9.flex的弹性布局
10.post和get区别
第九套 腾讯云
1.手写快速排序
2.继承如何实现
3.闭包
4.跨域,如何设置携带cookie 的请求
5.cookie传值
6.MVC和MVVM区别
7.react hooks的使用
8.TCP/IP 三次握手四次挥手的过程
9.HTTPS和HTTP区别
第十套 数澜科技 神州科技。。等
1.vue组件通信
2.CORS前后台如何设置
3.异步处理的方法
4.如何比较两个对象是否相等
5.vue2和vue3有什么不同,他们实现双向通信的原理是什么
6.如何做鉴权
7.如何做动态路由