前端面试手记

前言

面试是一个自我提高的过程，但愿如下记录可以帮助本身在面试中有所收获。

记录一

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

• 手写一个客户登陆的过程，使用原生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 标签时，文档的解析不会中止，其余线程将下载脚本，待到文档解析完成，脚本才会执行。