前端面试手记

前言

面试是一个自我提升的过程，希望以下记录能够帮助自己在面试中有所收获。

记录一

第一家是一个天使轮的公司，面试没有笔试，令我感到很无奈，面试官貌似不是技术，问了我两个题目：

• 手写一个客户登录的过程，使用原生js实现。手写
• 请问websocket怎么使用。手写

第二个题目我没答上来，因为压根没用过。下面是这两个题目的答案。

<!--第一题-->
var xhr  = new XMLHttpRquest()
xhr.send("GET","API",true)
shr.onreadystatechange = function(){
    if(xhr.readystate === 4){
        if(xhr.status === 200){
            JSON.parse(xhr.responseText)
        }
    }
}

<!--第二题-->
var ws = new websocket('http://128.12.1.2:8080')

ws.onmesage = function(e){
    console.log(e.data)
}

ws.onopen = function(e){
    ws.send('hello')
    
    if(ws.bufferedAmount  === 0){
        console.log('发送完毕')
    }
}

ws.onclose = function(e){
  var code = event.code;
  var reason = event.reason;
  var wasClean = event.wasClean;
}


ws.onerror = function(e){
    
} 

复制代码

---

记录二

第二家是一个中型的公司，下面是面试过程：

笔试

写出你熟悉的状态码，并写出含义 (10)

<!--大体分为三类-->
<!--成功-->
200 成功   
201 请求成功并创建了新的连接    
202 已接收 服务器已经接受请求，但是尚未处理
<!--请求失败-->
400 错误请求
401 未授权 要求验证身份
403 服务器拒绝
<!--重定向-->
300 多种选择
301 永久移动
302 临时移动
<!--服务器错误-->
500 服务器代码运行出错
503 服务器关闭

复制代码

使用css3画出一个扇形

这个题我开始使用border的特性画出了三角形，然后使用border-raduis 使其一边变成弧形

width:0px;
border-bottom : 100px solid red;
border-left : 30px solid transparent;
border-right: 30px solid transparent;
border-raduis : 50%
复制代码

但是面试官说他想要一个任意角度的扇形 我没想出来，回来看了一波博客，感觉这是自己理解出的最简单的方法·····

<style>
    .r1 {
        position: absolute;
        width: 200px;
        height: 200px;
        border-radius: 50%;
        background-color: yellow;
        clip: rect(0, 100px, 200px, 0);
    }

    .r2 {
        position: absolute;
        width: 200px;
        height: 200px;
        border-radius: 50%;
        background-color: white;
        clip: rect(0, 100px, 200px, 0);
        transform: rotate(40deg);
    }
</style>

<div class="r1"></div>
<div class="r2"></div>
复制代码

<!--必须为position:absolute-->
clip:rect(30px 200px 200px 20px)
复制代码

值	描述
shape	设置元素的形状。唯一合法的形状值是：rect (top, right, bottom, left)
auto	默认值。不应用任何剪裁。
inherit	规定应该从父元素继承 clip 属性的值。

主要是考闭包和函数参数的传递

function test(a,b){
    alert(b)
    return function(c){
        return test(c,a)
    }
}


复制代码

主要是考变量提升。

复制代码

写出flex布局的相关属性和含义

1. 怎么激活flex布局

   • display:flex
   • 行内元素可以使用 display:inline-flex

2. 容器的属性

   • flex-direction: row | row-reverse | column |column-reverse //主轴的方向
   • flex-wrap: nowrap 默认 | wrap 换行第一行在上面 | wrap-reverse 换行，第一行在下面 // 在项目超过默认轴线排列数量的情况下 （使用百分比） 超出一行的容器，以什么方式排列
   • flex-flow: <flex-direction> || <flex-wrap> 默认值 row nowrap // 前两个属性的综合
   • justify-content: flex-start| flex-end | center| space-between | space-around // 主轴X轴方向的对其方式
   • align-items: flex-start | flex-end | center | baseline 基于项目里面的文字的base-line | stretch 上下填满 //交叉轴Y轴上面的对齐凡是

   必须对父元素设置自由盒属性display:flex;，并且设置排列方式为横向排列flex-direction:row;并且设置换行，flex-wrap:wrap;这样这个属性的设置才会起作用。

   • align-content:stretch 默认 | flex-start| flex-end | center| space-between | space-around

3. 项目属性

   • order:<integer> 默认0目的排序 数值越小越靠前
   • flex-grow:<integer> 默认0及在项目中占几份 一般为1份
   • flex-shrink: <integer> 项目缩小比例 默认1 在空间不足时，为了使所有项目在一行，数值越大小放严重
   • flex-basis: <length> || auto默认为auto 如果设置px 则占据实际宽度
   • flex:是上面三个值的简写 快捷值有auto(1 1 auto) none(0 0 auto)
   • align-self:除了 auto 都和 align-items一样

以vue或者react为例画出他们的生命周期图

如果需要你转后端你会考虑使用哪种语言，为什么？

考树的遍历。

估计这个要认真学一下了

    // 还是用自己的蠢方法实现的
    var nodes = [
        { id: 10, title: 'dw10', parentId: 4 },
        { id: 2, title: 'dw2', parentId: 0 },
        { id: 4, title: 'dw4', parentId: 2 },
        { id: 12, title: 'dw12', parentId: 2 },
        { id: 8, title: 'dw8', parentId: 4 },
        { id: 9, title: 'dw8', parentId: 12 }
    ]

    nodes.sort((a, b) => {
        return a.parentId - b.parentId
    })


    function toTree(arr) {
        const root = arr[0]
        _Tree(arr, root)
        return root
    }

    function _Tree(arr, root) {
        for (let i = 0; i < arr.length; i++) {
            if (arr[i].parentId === root.id) {
                if (root.child) {
                    root.child.push(arr[i])
                } else {
                    root.child = [arr[i]]
                }
            }
        }

        var child = root.child
        if (child && child.length !== 0) {
            for (let i = 0; i < child.length; i++) {
                _Tree(arr, child[i])
            }
        }
    }

    toTree(nodes)
复制代码

使用es6写一个工厂模式

自己的理解

class Man{
    constructor(name){
        this.name = name
    }
    
    getName(){
        return this.name
    }
    
    static Factory(name){
        return new Man(name)
    }
}
复制代码

怎么使一个没有长宽的div水平居中

<!--注意点：一定要在子盒子里面添加内容，因为子盒子的div本身是没有宽高的，如果你不加内容，根本无法实现效果-->
<style>
.one {
    position: relative;
    width: 200px;
    height: 200px;
    background-color: rebeccapurple;
}

.two {
    position: absolute;
    top: 50%;
    left: 50%;
    transform: translate(-50%,-50%);
}
</style>
<div class="one">
    <div class="two">wo</div>
</div>


<style>
.one {
    display: table-cell;
    text-align: center;
    vertical-align: middle;
    width: 100px;
    height: 100px;
    background-color: red;
}

.two {
    display: inline-block;
}
</style>
<div class="one">
    <div class="two">wo</div>
</div>

复制代码

10. 将'i have a dream' 里的dream替换成apple，写出三种方法。

var str = 'i have a dream'

<!--第一种-->
var str1 = str.replace(/d\w+m$/g,'apple')

var index_d = str.indexOf('d')
var arr = str.split('')

<!--第二种-->
var arr2 = arr.slice(0,index_d) // 0 到 d 但是不包括d 不改变原来 返回已被被截取的目标 arr和str 都有这样的方法 和substring 的参数一样 起始位置
var str2 = arr2.concat('apple').join('')

<!--第三种-->
var arr3 = str.split('')
var arr4 = arr3.splice(index_d,5,'apple')   // arr3 =  'dream' 数组专有 改变原有数组

var str3 = arr3.join('')
<!--还有好多种...-->
复制代码

• 对string 和 array的所有操作方法进行总结

  string

  • charAt(index) && chartCodeAt(index) 返回指定位置的字符 返回指定位置的字符的unicode编码
  • substr(startIndex,length) substring(startIndex,endIndex) 截取的字符串不包括end。 slice() 和substring一样，但是可以是负数 以上三种不对源字符串有影响
  • toUpperCase toLowerCase
  • indexOf indexLastOf()
  • split

  array

  • indexOf()
  • push pop shift unshift
  • splice(index,length,....) 会影响原数组
  • slice(index,end) 不会影响原数组
  • forEach((item,index,arr)=>{}) 不产生新数组，但是arr这个参数可以改变原数组
  • map((item,index,arr)=>{}) return 可以产生一个新数组 arr 不可以操控原数组
  • reduce((prevalue,item,index,arr)=>{},startVaule) 聚合 startValue 是第一次循环是prevalue的初始值

  // 统计字符串中字符出现的次数
  let str = 'fsadfasdfagagajkgnahjgasdjfajsfjk';
  let strArr = str.split('');
  console.log(strArr);
  let sr = strArr.reduce((preValue, curValue, curIndex, array) => {
      if (!preValue[curValue]) {
          preValue[curValue] = 0;
      }
      preValue[curValue] += 1;
      return preValue;
  }, {})
  console.log(sr);
  复制代码

  • flier((item,index,array)=>{ return true}) 过滤
  • sort() 排序

  arr.sort((left,right)=>{
      //升序
      return left-right
      // 降序
      return right-left
  })
  复制代码

面试

说一下盒子模型，盒模型会产生哪些问题。

盒子模型会有那些问题：

• margin上下重合的问题

种类	解决方法
上下两个div	底部元素产生bfc，使用position:absolute
父子元素div	父级元素加上border:1px solid transparent或者overflow:hidden

能描述一下vue的生命周期中什么时候挂载的dom树。

http中的304经历那些过程。

重定向和转发的区别。

如果现在要做一个日历组件你会使用什么布局来解决。

操作在短时间内很多次操作vue的数据，vue会怎么刷新。

有没有了解过jquery的源码，你对jquery这种操作方式有什么看法，vue是怎么解决dom平凡操作的这种问题的。

对自己的职业1-3年内职业规划有哪些？

解释一下作用域链。

说一下对this的理解。

记录三

电话面试

解释一下vue的响应原理，并解释怎么从数据更新到视图层的。

function observer(obj){
    // 递归边界
    if(!obj || typeof obj !== 'object'){
        return
    }

    Object.keys(obj).forEach((item,index,arr)=>{
        defineReactive(obj,item,obj[item])
        observer(obj[item])
    })
}

function defineReactive(data,key,val){
    Object.defineProperty(data,key ,{
        enumerable:true,
        configurale:true,
        get:function(){
            // 需要在这里添加订阅者
            return val
        },
        set:function(newValue){
            val = newValue
            console.log('属性'+key+'被监听了'+'现在的值为'+newValue)

            // 在这里通知订阅者去更新视图
        }
    })
}


var library = {
    book1: {
        name: ''
    },
    book2: ''
};

observer(library)

library.book1.name = 'vue权威指南'; 
library.book2 = '没有此书籍';

// 再往下面的东西不想啃了  这里用到的是 发布-订阅者模式
复制代码

缓存 cookie 头信息的控制等等

• http 头信息

请求头字段	作用
Cache-control	控制cookie 的缓存
Connection	浏览器想要的连接方式 比如keep-alive
Date	报文创建报文时间
If-Modified-Since	对应响应头里面的 Last-Modofied 控制缓存
If-None-Match	配合响应头ETag使用
Host	请求的服务器域名

响应头	作用
Location	客户端重定向的uri
server	服务器的名字
ETag	指纹
Last-Modofied	上一次服务器文件修改的时间

下面是http请求中cache-conctrol

响应头的选项

怎么解决父级塌陷，overflow：hidden怎么产生bfc的，产生bfc的方式还有哪些。

清除浮动

• 当子元素浮动时，给父元素添加overflow：hidden，按照它的第一个特性，应该将子元素超出的部分截掉，但是因为子元素有浮动，无法裁剪，所有只能由父元素增加高度去包裹住子元素，使得父元素拥有了高度，而这个高度是跟随子元素自适应的高度，这样就把浮动的子元素包含在父元素内了。

怎么产生bfc？

• 根元素
• float的值不为none
• overflow的值不为visible
• display的值为inline-block、table-cell、table-caption
• position的值为absolute或fixed

看到有道友文章中把display：table也认为可以生成BFC，其实这里的主要原因在于Table会默认生成一个匿名的table-cell，正是这个匿名的table-ccell生成了BFC

有哪些布局方式。

element UI，antd的响应式布局是根据什么原理来的

为什么css执行顺序是从右至左比较快

浏览器专门建立了一个反常规思维的从右往左的匹配规则就是为了避免对所有元素进行遍历 遍历的节点会变少

浏览器的优化 script defer 和async的差别

<script async src="script.js"></script>
复制代码

 当浏览器遇到 script 标签时，文档的解析不会停止，其他线程将下载脚本，脚本下载完成后开始执行脚本，脚本执行的过程中文档将停止解析，直到脚本执行完毕

<script defer src="myscript.js"></script>
复制代码

当浏览器遇到 script 标签时，文档的解析不会停止，其他线程将下载脚本，待到文档解析完成，脚本才会执行。