前端面试题总结

2018-06-04  本文已影响0人  Jassi

背景：前端经验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;

两者都是从一个状态 变化 到另外一个状态
过渡 不能在始 终状态之间 定义过渡的子过程细节
动画 可以在始 终在始 终状态之间 定义过渡的子过程细节 
过渡属性有
    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动画经过GPU加速优化，更流畅，
但是他属于CSS3的特性，浏览器支持程度不一样，js动画浏览器支持程度更好

css动画经过GPU加速优化

<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>

题目：问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))

在一般函数中
1. this总是代表它的直接调用者, 例如 obj.func ,那么func中的this就是obj
2.在默认情况,没找到直接调用者,则this指的是 window;在严格模式下,没有直接调用者的函数中的this是 undefined
3.使用call,apply,bind绑定的,this指的是绑定的对象

this已经定义 指向已经明确 指向其父级作用域的this，默认指向在定义它时,它所处的对象,而不是执行时的对象, 
没有arguments

答案：33

答案：[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；

框架相关

栈外技术

相同点：数据存储机制 不跨域
不同点:
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不在不同的浏览器窗口中共享，即使是同一个页面

算法

其他

写在最后

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

上一篇下一篇

猜你喜欢

热点阅读