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)};

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>
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.如何做动态路由

2021西安大小公司十套前端面试题相关推荐

2017年秋招二十套前端面试题分享
前端面试--四月二十家前端面试题分享 1.正文第一套第二套第三套第四套第五套第六套第七套第八套第九套第十套第十一套第十二套第十三套第十四套第十五套第十六套第十七套第 ...
2021最新最全前端面试题（包含HTML、CSS、JavaScript、Vue、React、浏览器、算法与数据结构等）
整理了一些前端面试题,希望对正在找前端工作的伙伴有用.本篇文章内容篇幅较大,主要针对初中级前端开发工程师. 篇幅过长,大家可以先点赞收藏以后慢慢看. 关于HTML 的title和alt属性有什么区别 ...
身为三本的我就是凭借这些前端面试题拿到百度京东offer的，前端面试题2021及答案
更新啦!更新啦! 2022年面试题及答案点进来之后你的噩梦就要来了,接下来你要面对上百道面试题,那么,如果你-- 是个小白菜: 推荐使用2~3周的时间来消化接下来的面试题, 遇到不会的没听说过名词请 ...
前端面试题2021及答案
身为三本的我就是凭借这些前端面试题拿到百度京东offer的,前端面试题2021及答案... 此文转载自:https://blog.csdn.net/qq_33277654/article/detail ...
想进互联网大公司？那这些题你总得会吧？前端面试题2022及答案前端面试题2022及答案
长文噩梦预警! 如果你想进大型互联网公司本文掌握程度90%~100% 想进中大企业掌握程度70%~85% 想进小企业掌握程度45%~80% 想家里蹲掌握程度:undefined 咳咳,如果你 ...
2021前端面试题系列：HTTP请求和HTTP缓存控制
大家好,我是前端岚枫,一枚二线城市的程序媛,今天主要跟大家分享我整理的笔记2021前端面试题系列:HTTP请求和HTTP缓存控制,此方面内容在我们的工作中常用到, 也是面试官经常提问的问题,希望下面文 ...
前端面试题2021(超详细)
真的是一篇好文章,好文就要收藏~ 晟小明身为三本的我就是凭借这些前端面试题拿到百度京东offer的,前端面试题2021及答案
最近超火的公司前端面试题
前端面试题: 一个200*200的div在不同分辨率屏幕上下左右居中,用css实现 div{ position: absolute; width: 200px; height: 200px; left ...
2021前端面试题汇总——查漏补缺
博主最近在持续面试(被虐)中,本片文章将持续更新系列文章大厂前端面试题总结(CSS篇) 大厂前端面试题总结(ES6篇) 大厂前端面试题总结(Vue篇) 大厂前端面试题总结(浏览器篇) 大厂前端面试 ...

2021西安大小公司十套前端面试题

2021西安大小公司前端十套面试题

2021西安大小公司十套前端面试题相关推荐

最新文章

热门文章

2021西安大小公司十套前端面试题

2021西安大小公司 前端十套面试题

2021西安大小公司十套前端面试题相关推荐

最新文章

热门文章

2021西安大小公司前端十套面试题