美文网首页
前端面试题总结

前端面试题总结

作者: Jassi | 来源:发表于2018-06-04 10:11 被阅读0次

背景:前端经验2年,5月份经历了几个公司的面试,记录一下面试总结

css部分

  • 上下左右居中布局
1. 父元素flex布局
<div class="parent">
    <div class="child"></div>
  </div>
  <style>
    .parent{
      background:gray;
      width:300px;
      height:300px;
      display: flex;
      justify-content: center;
      align-items: center;
    }
    .child{
      background:red;
      width:100px;
      height: 100px;
    }
2. 父元素相对定位 子元素绝对定位 结合left top margin/transform-translate
<div class="parent">
    <div class="child"></div>
  </div>
  <style>
    .parent{
      background:gray;
      width:300px;
      height:300px;
      position: relative;
    }
    .child{
      background:red;
      width:100px;
      height: 100px;
      position: absolute;
      top:50%;
      left:50%;
     /*margin-top: -50px;
      margin-left: -50px;*/
      transform: translate(-50%,-50%);
    }
  </style>
  • 盒模型
每个块级元素都看做有一个盒子 盒子包含content padding border,
一般块元素的height width是指content 部分的height width,
在怪异模式下 是指border box的height width,
标准模式下可以使用box-sizing 属性 指定为border box;
  • 纯css写轮播
  • css3新特性有哪些
  • 动画与过渡的区别
两者都是从一个状态 变化 到另外一个状态
过渡 不能在始 终状态之间 定义过渡的子过程细节
动画 可以在始 终在始 终状态之间 定义过渡的子过程细节 
过渡属性有
    transition-property
    transition-duration
    transition-timing-function
    transition-delay
动画属性有
    animation-name
    animation-duration
    animation-timing-function
    animation-delay
    animation-iteration-count
    animation-direction
    animation-play-state
  • css动画与js动画的区别
css动画经过GPU加速优化,更流畅,
但是他属于CSS3的特性,浏览器支持程度不一样,js动画浏览器支持程度更好
  • css动画的优点
css动画经过GPU加速优化
  • css3选择器中:与::的区别
    :伪类 ::伪元素
  • CSS 选择器 优先级(实战题)
    答案 gray
<div id="wrapper">
  <p class="inner">
    <span class="content">
      <b class="txt">color is ?</b>
    </span>
  </p>
  <style type="text/css">
    #wrapper span{
      color:green
    }
    .content b.txt{
      color:gray;
    }
    p.inner b{
      color:red;
    }
    .txt{
      color:black;
    }
  </style>
</div>
  • BFC怎么形成的
  • BFC的特点
  • BFC实战
题目:问A的宽 高分别是多少?代码如下
答案:280px 260px
<div class="A">
  <div class="B"></div>
  <div class="C"></div>
  <div class="D"></div>
</div>
 <style type="text/css">
  .A{
    float: left;
    background: gray;
  }
  .B,.C,.D{
    height: 50px;
    width:200px;
    margin:20px;
    padding:20px;
  }
  .B{
    float: left;
    background:green;
  }
  .D{
    float: right;
    background:red;
  }
  .C{
    position: relative;
    top:50px;
    left:50px;
    background:yellow;
  }
  </style>

JS部分

  • 二维数组拍平
[].concat.apply([],arr)
  • 数组去重
这个方法时间复杂度为O(n),而且稍微gai'd
let arr=[1,2,3,4,5,8,10,2,4,7,3,2]
    function noRepeat(arr){
      let obj={}
      arr.forEach(item=>{
        obj[item]||(obj[item]=true)//这样写去重
        // obj[item]=obj[item]?obj[item]+1:1 //这样不仅去重而且方便后期统计出现的次数
      })
      return Object.keys(obj)
    }
    console.log(noRepeat(arr))
  • this
在一般函数中
1. this总是代表它的直接调用者, 例如 obj.func ,那么func中的this就是obj
2.在默认情况,没找到直接调用者,则this指的是 window;在严格模式下,没有直接调用者的函数中的this是 undefined
3.使用call,apply,bind绑定的,this指的是绑定的对象
  • 箭头函数
this已经定义 指向已经明确 指向其父级作用域的this,默认指向在定义它时,它所处的对象,而不是执行时的对象, 
没有arguments
答案:33
  • console.log([0,1,2,10].map(parseInt))

答案:[0, NaN, NaN, 3]
解析:parseInt接受两个参数,第二个标示进制(2-36之间),map函数将vaule和key传给parseInt,y因此parseInt接受到的参数依次为
(0,0)--第二个参数为零,默认采用10进制解析,输出结果为0;
(1,1)--第二个参数为1,不在2-36之间 所以输出NAN;
(2,2)--第二个参数为2,则采用二进制解析第一个参数,但是二进均是0或1标示的,所以2进制不能解析2,输出NAN;
(10,3)--第二个参数为3,3采用三进制解析,输出结果为3;

框架相关

  • JQuery $与$.fn,$.ready与window.onload与window.DOMcomponentLoaded
  • Vue:生命周期及各个钩子的作用
  • React:生命周期及各个钩子的作用
  • Vuex:什么情况下使用,与eventbus区别
  • redux:
  • 前端路由:动态路由与子路由
  • 框架选型

栈外技术

相同点:数据存储机制 不跨域
不同点:
1. 作用:cookie用于前后端通信,localStorage sessionStorage本地存储
2. 长度:cookie限制4k,localStorage sessionStorage 各浏览器不一致,但是比cookie大很多 一般5M
3. 存储方式:cookie字符串形式,不同字段用分号隔开,localStorage sessionStorage 均是键值对方式,且都是简单数据类型,对于数组 对象等引用类型 可先用JSON.stringfy转换后存储
4. 有效期:cookie 在其字段中expire对应的时间内有效,localstorage长期有效,除非手动删除,sessionstorage关闭会话时候失效
5. 作用域:cookie在其字段domain path对应的域名即父级域名内有效,在所有同源窗口中都是共享的;localstorage在同域名下有效,在所有同源窗口中都是共享的;sessionStorage不在不同的浏览器窗口中共享,即使是同一个页面

算法

  • 冒泡排序、快速排序、排序二叉树
    参看另一篇博客
  • 最短路线
  • 协方差
  • 时间复杂度及推导
  • hash算法怎么实现的

其他

  • 平时怎么学习的
  • 遇到了什么问题,怎么解决
  • 有什么打算、规划是怎样的
  • 为什么跳槽
  • 你有什么要问的么

写在最后

面试心态很重要:自信 稳重 不卑不亢 实事求是

相关文章

网友评论

      本文标题:前端面试题总结

      本文链接:https://www.haomeiwen.com/subject/jyajsftx.html