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

作者：莹宝思密达

 

以下题目必问：

1. css垂直水平居
2. vue方向 组件传值，路由传参，vuex必问，nextTick使用和keep-alive有可能问
3. CORS跨域
4. react方向 ，如何传值， redux和hooks
5. 项目中遇到的难题及解决方式

 

面试套路：

①离职原因：在真实原因上记得夸赞上家公司，千万不要抱怨。

②优缺点：优点：学习能力强，抗压力好。缺点：因为社会经验不足，人际交往能力不强。

③还有什么问题要问：

部门项目方向和技术，公司人员构成，如何做人才培养，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.如何做动态路由