[字节跳动前端·一二三面 + hr面 + 实习offer面试总结]

写在前面：

投了三个简历，最后不知道是那个部门约面，就去面试了，哈哈哈。其实好多东西记得不太清楚了，哈哈哈。

一面： 10月22日
直接前一晚睡在实验室了。第二天起来就9：20了，然后洗了把脸就调试设备。

10：30 面试开始：

Q1: 介绍自己？

A： 云云云…

Q2:在百度做了什么？

A：主要用mxgraph + node (express) + nuxt 做了两个项目（具体云云）

Q3:那面试开始吧。js数据类型？

A： 基本：Number,String,null,undefined,Boolean,
引用： Function Date Array Object
ES6新增： symbol ， set等

Q：说一下基本数据类型和引用数据类型实质区别？
A：基本数据类型因为占用内存较小，存储在栈内存中，方便查找，同时当基本类型的变量互相赋值的时候，不会出现值共享问题（及污染变量）。 引用类型值存储在堆内存中，通过一个引用指向其堆内存中的空间，互相赋值的时候会出现引用值共享问题。
Q:简单说一下set，symbol数据结构？
A：set数据结构是es6新增的一种数据结构，set数据结构中不会出现重复元素，也为js去重提供了一种新的方法，symbol通过 Symbol关键字创建，其创建的的值不会有重复的，主要为对象创建属性名，避免对象属性名重复。
云云…

Q4:变量类型检测？
A：主要有 typeof 返回 String，Number。Boolean，null, undefined, object
instanceof 缺点不能检测 基本类型值 number tring，但可以检测包装类型的 new String(),new Number()
简单说一下包装类

/*
        *  js复习： js包装类
        *   简介： 为了便于操作基本类型的值 
        *   javascript引入了三个特殊的引用类型  boolean  string number 的包装类
        */

        var a = 123;
        a.name = 'kjh';
        console.log(a.name);  //undefined

        var b = new Number(234);
        console.log(typeof b) // object
        console.log(typeof +b); //number


        
        // 那么，为什么基本类型可以添加属性，访问不报错，并且返回来undefined呢？
        // {
        //     第一步：var a = 123;  这一步并没有什么问题

        //     第二步： a.name = 'kjh'  
        //             {
        //                 这一步：系统知道a是个常量，所以包装类为你创建了一个Number类型的实例,
        //                 同时为这个实例添加了name属性为'kjh',之后又迅速销毁了这个实例。

        //                 new Number(123).name = 'kjh'
        //                 delete
        //             }
            
                    
        //     第三步：console.log(a.name);
        //             {
        //                 系统又直到你错了，包装类再次为你创建了一个Number类型的实例,
        //                 但是这个实例并没有name属性，所以返回了undefined。
        //             }
            
        // }

Q:可以手动实现一个instanceof嘛？

  function instanceof2(L,R){
            var O = R.prototype;
            L = L.__proto__;

            while(true){
                if(L == null){
                    return false;
                }`在这里插入代码片`
                if(L == O){
                    return true;
                }

                L = L.__proto__;
            }
        }

Q5：说一下闭包吧?
A；闭包概念 -> 闭包代码解析 -> 闭包本质 (AO,GO结合执行器上下文)->垃圾回收机制->闭包优缺点等。

Q6:js跨域问题
Q:为什么会出现跨域？
A同源策略， http://www.baidu.com：8080 协议，域名，端口一个不同都会出现跨域
Q:你怎么解决？
A：jsonp 云云
A:cors跨域
A:webpack 配置dev-server proxy代理跨域
A:Nginx跨域
详情可以看我文章。

Q7: 说一下原型，原型链查找过程吧？
A：bbbbbb

//         // 原型里面有以下三个主要概念
//         // constructor
//         // prototype
//         // __proto__


//         //Father的原型对象
//         Person.prototype.name = 'JiaHAO KANG';

//         function Person(){

//         }

//         // 创建了一个Fathe构造函数的实例
//         var person = new Person();  

//         //constructor
//         // 原型对象的constuctor属性指向其构造函数
//        Person.prototype.constructor == Person;  //true

//         //同时实例的constuctor属性也是指向创建它的构造函数
//        person.constructor == Person;  //true


//         //__proto__
//         //同时实例可以通过__poto__属性访问到实例原型
//        person.__proto__ == Person.prototype;  //true




//     //    原型链
//     Father.lol = '你是信仰';
//     function Father(){
//         this.name = 'kjh'
//     }

//    var son = new Father();

//     //子类可以通过原型链去访问父类的一些属性。
//     //原型链的查找过程

//     // 当我们要访问子类实例的属性的时候：
//     // （1）首先去son实例身上查找
//     // （2）son身上没有的话，就通过son.__proto__去Father.prototype查找
//     //  (3) Father.prototype没有的话，就通过Father.prototype__proto__ 去Object.prototype查找
//     //  (4) 最后一直找到Object.prototype.__proto__ == null,表示一次原型查找完毕。

Q8: 看一下代码输出？

A: 3 3 因为首先varb = 7，这时候i相当于全局对象window上有个b属性为7;但是 a函数执行的时候，this符合默认绑定，这个时候this指向window所以修改了 b = 3,所以console.log(b) 为3. 又因为var c = new a() 在修改a的原型之前，所以c.b = 3.
Q：你确定你的输出嘛？
A: ??? 我又看了一遍，确定吧，应该没问题吧。（面完之后打印了一下，的却没问题，面试官问了我三次，搞心态，哈哈哈哈）

Q9:了解promise嘛？
A:promise主要有两个参数，三个状态，resolve参数是一个函数，同时resolve对应请求成功，执行.then函数，reject是一个函数对应请求失败，执行.catch函数等。云云云。。。
Q:看一下以下输出：

A:第一个打印 2 3 失败 第二个不太清楚。
面试官给我讲了一遍。哈哈哈

Q10:问了几个CSS问题。
A:…

Q11:来一个算法。

A:貌似是个滑动窗口最大值问题.（剑指offer 64刷过）
是的。

function maxInWindows(num, size) {
        var maxArr = [];   //存储每个片段里面最大元素数组
        var scorllArr = [];   //滚动片段数组
        var max = null;   //最大值

        for (let i = 0; i < num.length; i++) {
            if (size > 0) {     //片段长度 > 0
                if (scorllArr.length < size) {
                    scorllArr.push(num[i])  
                }  //如果片段的长度小于size就继续给数组中推入元素
                if (scorllArr.length == size) {
                    maxArr.push(Math.max(...scorllArr));  
                    scorllArr.shift();
                }  //如果片段的长度等于size  1.计算长度  2.删除片段首部元素
            }
        }

        return maxArr;   //返回自己的数组
    }

Q:整个数组去重吧。
A: indexOf, 利用对象去重，es6去重，代码就不复现了。

Q：有什么问题问我？
A:部门主要是什么技术栈？ Q:react
A:假如我能过，大概多久通知
Q:这一面，我给你过了，有几个问题答得挺深比较满意，给你联系下一个面试官。

==一面总结：==整体问题简单，面试官人也很好。

二面：大约5分钟后

先去乐华玩了，回来了继续写。哈哈哈

Q1:实现一个两栏布局
A: 开启一个BFC即可 float
说说什么是BFC，怎么开启BFC
A:BFC… 设置 float postiion visiable display:flex等

Q2:垂直居中
A: css2 使用postion:absolute定位 css3使用flex

Q3:三次握手四次挥手？
A:…

Q4:TCP/IP OSI七层模型架构？
A:…

Q5:HTTP1.0和HTTP2.0区别？
A:…

Q6:HTTP/HTTPS的区别？
A:…

Q7:TCP拥塞控制和双全工通信具体过程？
A:…

Q8:可以手写一个promise.all嘛

A:之前没写过 haha promise.all () 返回一个新的promise,方法需要全部成功才能成功执行
promise.all 你想想返回值是什么，参数是什么？
A:传入一个promise元素数组，返回一个新的promise对象
ok，那你实现一下
具体代码：

 myPromise.all = function (arr) {
            return new Promise ((resolve,reject) => {
                if(!Array.isArray(arr)){
                    throw new TypeError('arguments must be a array');
                }

                var len = arr.length;
                var resolveNum = 0;
                var resolveResult = [];

                for(var i = 0; i < len; i++){
                    arr[i].then((data) => {
                        resolveNum ++;
                        resolveResult.push(data);
                        if(resolveNum == len){
                            return resolve(resolveResult);
                        }
                    }).catch((error) => {
                        return reject(error);
                    })
                }
            })
        }

Q9:讲一下双向绑定原理，实现vue双向绑定。
A：vue双向绑定主要通过Object.defioneProperty配合发布者-订阅者模式来实现。
Object.defioneProperty具有两个对象属性，一个数据属性，一个构造器属性，构造器属性中get函数和set函数主要用于数据劫持。
代码实现

let obj = {};

        Object.defineProperty(obj,'value',{
            get:function(){

            },
            set:function(newValue){
                obtn.value = newValue;
                show.innerText = newValue;
            }
        })

        obtn.addEventListener('keyup',function(e){
            obj.value = this.value;
        })

Q10:事件模型，事件委托。

Q11：vue生命周期

Q12：来一个算法题吧

哈哈哈，这个写了2边都有问题，最后说了自己的思路（使用栈来实现），面试官说没问题就过了。
代码：

var removeDuplicates = function(S) {
    let stack = []
    for(c of S) {
        let prev = stack.pop()
        if(prev !== c) {
            stack.push(prev)
            stack.push(c)
        }
    }
    return stack.join('')
};

二面完了，问了面试官自己在学习中的一些问题，以及以后的侧重点，是往深里学还是广学，最后问了，如果二面能过什么时候通知，二面面试官说我基础很好，给我过了，三面具体通知会有hr电话联系。

周四：三面
三面真的特别尴尬，周四早上还在睡觉的我，突然hr打电话说，leader比较忙，希望推到下一周，但是我这边因为其他公司原因说自己时间不够之类的，最后协商三面从下午4点调到了下午2点，然后背着书包去复习找教室。

自己刷了字节很多面经，发现三面大多比较温柔，甚至好多三面都没怎么问技术，然后窃喜。

Q1:简单自我介绍
A:balalalaal

Q2：说一说你在学习前端碰到的最大的问题？
A：balabalabalbalbal

这个时候窃喜，疯狂，难道我也运气号，聊聊天不怎么问技术，？？？？
是我想多了。。。。

Q3:开始一些技术问题吧
实现trim方法


通过获取字符串空格位置，通过字符串截取实现。

Q4:实现模板字符串的过程


这个有点恶心，哈哈哈。
Q5:实现三栏布局

A：写的圣杯布局：

 .box{
            padding: 0 200px 0 200px;
        }

        .center, .left, .right{
            height: 500px;
            float: left;
            position: relative;
        }

        .center{
            width: 100%;
            background: pink;
        }

        .left{
            width: 200px;
            background: red;
            left: -200px;
            margin-left: -100%;
        }

        .right{
            width: 200px;
            background: green;
            right: -200px;
            margin-left: -200px;
        }
    </style>
</head>
<body>
    <div class="box">
        <div class="center"></div>
        <div class="left"></div>
        <div class="right"></div>
    </div>
</body>

Q6：实现一个继承？
A:那就来个最难的吧。

Q7:求一下二叉树高度？
A:这个没写过，封装一个完整二叉搜索树可以吗？数据结构没问题，算法略差。
Q;写个快排吧？
A:好嘞。

//快速排序


function quickSort(arr,left,right){
    var i = left;
    var j = right;
    var key = arr[left];
    
    if(left >= right) return;
    
    while(i < j){
        while(arr[j] > key && i < j){
            j --;
        }
        
        while(arr[i] <= key && i < j){
            i ++;
        } 
        
        if(i < j){
            var temp = arr[i];
            arr[i] = arr[j];
            arr[j] = temp;
        }
    }
    
    arr[left] = arr[i];
    arr[i] = key;
    
    quickSort(arr,left,i-1);
    quickSort(arr,i + 1,right);
    
    return arr;
}


var arr = [1,2,8,5,4,0,9,6,3];

console.log(quickSort(arr,0,arr.length-1));

Q：好了，就这样吧，我去给你找HR。

可以的，三面敲了这么久的代码。

HR面：
1.你是怎么学习前端的？
2.为什么没有考虑出省上大学？
3.学习中碰到的困难？
4.在百度实习做了什么？
5.实习有什么收获？
6.可以什么时候来实习，大概多久？
7.西安邮电大学在西安具体算个什么水平？（hahahah）
8.介绍部门情况
9.还有别的offer嘛
.反问。。。。

最后希望大家加油，上岸。我尽可能把自己能想到的都写了。