面试官一问一答式的前端面试题

  发布时间:2019-11-08 14:24:15   作者:佚名   我要评论
本文给大家分享面试官常问的前端面试题,感兴趣的朋友跟随小编一起看看吧

1,请问你平常用什么浏览器调试?

谷歌,火狐 ,偶尔调试的时候用IE 偶尔会使用下国产的浏览器

问:请说下火狐浏览器,360的浏览器的内核 没听错就是360浏览器

IE浏览器内核:Trident内核,也是俗称的IE内核;

Chrome浏览器内核:统称为Chromium内核或Chrome内核,以前是Webkit内核,现在是Blink内核;
Firefox浏览器内核:Gecko内核,俗称Firefox内核;
Safari浏览器内核:Webkit内核;
Opera浏览器内核:最初是自己的Presto内核,后来是Webkit,现在是Blink内核;
360浏览器、猎豹浏览器内核:IE+Chrome双内核;
搜狗、遨游、QQ浏览器内核:Trident(兼容模式)+Webkit(高速模式);
百度浏览器、世界之窗内核:IE内核;
2345浏览器内核:以前是IE内核,现在也是IE+Chrome双内核;

2.请让一个div居于屏幕中间,并且让里面的p元素文本相对于div元素 水平和垂直居中 ?听完心里有点懵逼

直接说答案了 面试官想听下面这个

<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8" />
<title>让DIV标签中的P标签水平和垂直都居中</title>
<style type="text/css">
      *{
        margin:0;
        padding:0;
      }
       .parent {
           display: table;
           width: 300px;
           height: 300px;
           text-align: center;
           position: absolute;
           left:50%;
           top:50%;
           margin-top:-150px;
           margin-left:-150px;
       }
       .son  {
           display: table-cell;
           height: 200px;
           background-color: yellow;
           vertical-align: middle;
       }
</style>
</head>
<body>
  <div class="parent">
      <p class="son">Lorem ipsum dolor sit amet, consectetur adipisicing elit. Laudantium tempore deleniti quos perferendis corporis ab accusamus, magni quibusdam, tempora ea!</p>
  </div>
</body>

 

很多童鞋可能没听说过 display:table 和 display:table-cell 的配合 就能实现 这个问题把我问住了 我以为这已经算是很难的题了 专门问一些很少使用的样式

3.你用过哪些预处理的css语言 我回答scss 那好 你简历上说你用过mint-ui组件 那你说下 怎么解决样式穿透的问题

听完我又懵逼 心里难受 我也是第一次听 样式穿透

面试官的本意是这个:

vue引用了第三方组件,需要在组件中局部修改第三方组件的样式,而又不想去除scoped属性造成组件之间的样式污染。此时只能通过>>>,穿透scoped。

但有些Sass 之类的预处理器无法正确解析 >>>,(此时) 可以使用 /deep/ 操作符( >>> 的别名)

<style scoped>
(方法一:)(有些情况可能会无效,比如我现在,哈哈哈)

  外层 >>> 第三方组件 {
      样式
  }
(方法二:)
/deep/  第三方组件 {
      样式
  }
</style>

ps:

1、/deep/与class名之间有无空格都可。

2、也可写成: .audit /deep/ .el-radio-button_inner{ color:red } ——前面加class + /deep/ + 三方clss名 (格式)

4.你以为这样就结束了 其实 只是开始 心里越来越难受

vue-router可以回退吗 ?回退之后参数导致数据丢失怎么处理,你使用那种方式缓存 !我们不能一直让用户刷新界面吧

听完 我那是来面试的 我是来锻炼心里承受能力的

首先对刷新参数消失想到的方法是在刚开始的时候将参数存到localStorage里面,但是如果这种传参比较多的话可能存储的地方会有点多;

然后再看一些博客的时候提到用vue 的<keep-alive>,即在<router-view>外套一层<keep-alive>实现页面缓存,但是这样确实是不是每一个页面都需要缓存的特别是一些状态之间切换需要流程化更改状态的页面,写上这个就不能实现数据的实时刷新了

也可以使用那个方法 监听 在回退的那个界面 监听 使用watch()监视 $route的变化 定义一个方法获取数据

注意! 注意! 注意! 重要的事说三遍, 接受参数时,这里是 重点 这里是 $route 取参数 不是$router重要的事情说三遍

然后params对应通过params接受,query通过query接受

5.请说出 vuex中的几个方法以及使用 终于到我会的了

 

var store=new Vue.Store({
     //用户自定义的变量和值都放在state对象里面
      state:{
           count:10   // 用户自定义的变量:值
     },
    //获取用户定义的数据(注意,获取vuex共享数据只能通过函数获取)
   getters:{
        //用户自定义函数,参数是state是固定的不要修改
       getCount(state){
              return state.count;
    },
     //修改vuex中的共享数据
    mutations:{
             //用户自定义函数
            subCount(state){
                    state.count--;
           },
          clear(state){
                   state.count=0;
          }
    },
   //异步修改数据,有些数据 我们并不要立即修改
   actions:{
        modifyCount(context){
            //context指的是 $store对象  调用mutations中的方法来实现异步修改数据
            setTimeout(()=>{
                      context.commit("clear");    //调用了 mutations对象中的clear
              },3000)//用定时器模拟异步修改
       }
}
});

 

直接在<template></template>中使用 是{{$store.getters.getCount}} 注意后面不要加括号

修改共享数据中的数据是 :this.$store.commit("subCount"); 提交subCount方法 this.$store.commit("clear") 你可以在 组件中的methods中使用 也可以在watch 中也可以使用

6.请说出es6中常用的数组方法

forEach() 、map()、filter()、reduce()、some()、every()

请说出 some和every的区别

some

/遍历数组每一项,有一项返回true,则停止遍历,结果返回true。不改变原数组
every:

遍历数组每一项,每一项返回true,则最终结果为true。当任何一项返回false时,停止遍历,返回false。不改变原数组
 

7.请说出你在vue中觉得哪些是比较重要的东西!

我回答的是双向绑定 单页面操作 虚拟dom树

最后聊了些其他的 就让我走了 虽然很多回答不上来 但也是知道了 一些新东西 还是学到了 ,笑笑就过去了 说明自己还是有很多要学习的东西 给自己加油下 哈哈

总结

以上所述是小编给大家介绍的面试官一问一答式的前端面试题,希望对大家有所帮助,如果大家有任何疑问请给我留言,小编会及时回复大家的。在此也非常感谢大家对脚本之家网站的支持!
如果你觉得本文对你有帮助,欢迎转载,烦请注明出处,谢谢!

相关文章

  • Web前端面试笔试题总结

    这篇文章主要介绍了Web前端面试笔试题总结,小编觉得挺不错的,现在分享给大家,也给大家做个参考。一起跟随小编过来看看吧
    2020-02-18
  • 80道前端面试经典选择题汇总

    这篇文章主要介绍了80道前端面试经典选择题汇总,文中通过示例代码介绍的非常详细,对大家的学习或者工作具有一定的参考学习价值,需要的朋友们下面随着小编来一起学习学习
    2020-01-08
  • 面试官常问的web前端问题大全

    这篇文章主要介绍了面试官常问的web前端问题大全,非常不错,具有一定的参考借鉴价值,需要的朋友可以参考下
    2020-01-03
  • 前端十几道含答案的大厂面试题总结

    这篇文章主要介绍了前端十几道含答案的大厂面试题总结,小编觉得挺不错的,现在分享给大家,也给大家做个参考。一起跟随小编过来看看吧
    2020-01-02
  • 超实用前端面试题整理(小结)

    这篇文章主要介绍了超实用前端面试题整理(小结),小编觉得挺不错的,现在分享给大家,也给大家做个参考。一起跟随小编过来看看吧
    2019-12-19
  • 2020最新Web前端经典面试试题

    这篇文章主要介绍了2020最新Web前端经典面试试题,非常不错,具有一定的参考借鉴价值,需要的朋友可以参考下
    2019-12-19
  • 解析前端面试题2019年小米工程师面试题(附答案)

    这篇文章主要介绍了解析前端面试题2019年小米工程师面试题(附答案),小编觉得挺不错的,现在分享给大家,也给大家做个参考。一起跟随小编过来看看吧
    2019-11-27
  • 2019年京东前端工程师面试题(附答案)

    这篇文章主要介绍了2019年京东前端工程师面试题(附答案),小编觉得挺不错的,现在分享给大家,也给大家做个参考。一起跟随小编过来看看吧
    2019-11-26
  • 2019年滴滴出行前端工程师面试题(附答案)

    这篇文章主要介绍了2019年滴滴出行前端工程师面试题(附答案),文中通过示例代码介绍的非常详细,对大家的学习或者工作具有一定的参考学习价值,需要的朋友们下面随着小编来
    2019-11-25
  • 2019年百度前端工程师面试题(附答案)

    这篇文章主要介绍了2019年百度前端工程师面试题(附答案),小编觉得挺不错的,现在分享给大家,也给大家做个参考。一起跟随小编过来看看吧
    2019-11-22

最新评论