瓜子前端实习生一面(已挂）

面试官人很和善，需要腾讯会议共享屏幕，面试了大概七十分钟。我代码比较差写的很慢，但是面试官人挺好一直也没催就等着，写了很久很久。。。。

1.用几种方法写出垂直水平居中写了两种 margin的方法和flex的方法，花了贼久。

答案：

/* 第一种 */
div{
      position: relative; /* 相对定位或绝对定位均可 */
      width:500px;
      height:300px;
      top: 50%;
      left: 50%;
      margin: -150px 0 0 -250px; /* 外边距为自身宽高的一半 */
      background-color: pink; /* 方便看效果 */
  }
 /* 第二种 */
div{
      position: absolute;   /* 相对定位或绝对定位均可 */
      width:500px;
      height:300px;
      top: 50%;
      left: 50%;
      transform: translate(-50%, -50%);
      background-color: pink;   /* 方便看效果 */ 
 }
 /* 第三种 */
.container {
  display: flex;
  align-items: center;    /* 垂直居中 */
  justify-content: center;  /* 水平居中 */
 }
 .container div {
  width: 100px;
  height: 100px;
  background-color: pink;   /* 方便看效果 */
 }
 /* 第四种 */
 div {
  position: absolute;
  width: 300px;
  height: 300px;
  margin: auto;
  top: 0;
  left: 0;
  bottom: 0;
  right: 0;
  background-color: pink; /* 方便看效果 */
 }

答案来源：https://blog.csdn.net/ST_Pace/article/details/78268222

2.问了盒模型，不了解。

***括（内容（content）,内边距（padding）,边框（border）,外边距（margin）

3.给三个数组，用js写，把三个数组合并去重，并进行排序。

面试官建议用快排。写到中途面试官说实在不熟js用c++也行，又换成c++，但是尽管他尽力的引导了，最后还是没写出来，真的写了很久很久。然后他说不行讲讲思想，思想讲出来了。

回来写了：

    const a = [23,4,2,5];
    const b = [3,12,2,23];
    const c = [3,7,1,6,0];

    function f(a,b,c) {
        const d = [...a,...b,...c];
        var del = [];
        d.forEach(function (val1,index1){
            if(del.indexOf(val1)==-1){
                del.push(val1);
            }
        });
        quicksort(del,0,del.length-1);
        console.log(del);
    }
    function quicksort(del,left,right) {
        if(left<right){
            var mid = sort(del,left,right);
            quicksort(del,left,mid-1);
            quicksort(del,mid+1,right);
        }

    }

    function sort(del,left,right){
        var a = del[left];
        while(left<right){
            while (left<right && del[right]>a){right--;}
            del[left]=del[right];
            while (left<right && del[left]<a){left++;}
            del[right]=del[left];
        }
        del[left]=a;
        return left;
    }

    f(a,b,c);

4.问对原型链了不了解，之前看过但是也没答上来。

Object.__proto__、Function.__proto__、Object.prototype、Function.prototype

又进一步问.__proto__、prototype这两个分别是什么？

5.给一个嵌套的对象，问怎么取出里面的c的值。我回答说data.a.b.c，他说你怎么知道他是值不是一个对象呢？然后我想起有一个方法可以判断是不是数组或者对象（instanceof），但当时没想起来是什么方法，我只说记得有个方法可以递归去判断，如果既不是数组也不是对象就取出来。面试官不是很满意，应该不是他要的方法，待我待会去查查。

好家伙竟然是前端大挑战里面15题里的一道

https://www.nowcoder.com/questionTerminal/a82e035501504cedbe881d08c824a381

6.最后十几分钟终于开始问计算机网络的基础知识，问能否讲出从url请求一直到呈现出请求后的网页的过程，我说了请求和数据返回以及浏览器渲染的过程，提到了get和post。面试官说他的侧重点是网络的四层结构。俺只记得五层结构，就说了下前四层。他问每一层都有哪些协议，答出来几个。然后问到域名和IP地址是怎么相互映射的，ohgod本来这个知道是DNS但是当时脑子一片空白，俺说这个真不知道（然后心里立即吐槽自己，我这说的好像别的就知道了一样。。）。

7.问了TCP的三次握手和四次挥手的过程。

#实习##面经##瓜子二手车##前端工程师#