记一次字节跳动前端面试，已拿offer

4月9号下午4:30约了字节跳动的面试，人生中第一次视频面试吧 ( •̀ ω •́ )✧

一面：
本来约的下午4:30一面的，但是发生了小意外，面试官可能比较忙，迟到了几分钟. 面试开始，首先介绍一下自己，就简单说了一下自己来自什么学校，然后现在大三，成绩一直班级第一，年级第二，因为大四一年没课，所以可以找实习。
先是聊了聊项目，问是不是自己写的，然后看我项目了用了SSR，要我简单介绍了一下SSR，然后为什么不用SPA，这个当然得回答首页白屏而且会造成SEO问题，然后问了我GraphQL，我就介绍了我项目的设计结构，以及如何用GraphQL进行前后端交互的，以及这种方式交互有什么好处等等。。。
面试官了解情况后就开始试我的技术了，先问我JS类型判断，这个很简单，写了typeof, instanceof, Object.toString.call ，然后说了一下用typeof能检测8种值，es5的string，boolean，number，function，object，undefined es6的symbol，以及最新的bigint。然后开始问我函数式编程，我首先介绍了一下纯函数，函数的副作用，然后说了curry的实现
先写了个ES5的

function curry (fn, arr = []) {
    return fn.length === arr.length ? fn.apply(null, arr) : function (...args) {
        return curry (fn, arr.concat(args))
    }
}

然后随手写了一个用ES6写了一个一行代码实现curry

const curry = (fn, arr = []) => fn.length === arr.length ? fn(...arr) : (...args) => curry(fn, [...arr, ...args]);

然后给他讲了偏函数等等，实现的话就没让我实现了。他问我是不是es6用的多，要我介绍一下es6扩展了哪些东西。毫不犹豫的写了各种基本类型的扩展，比如数值扩展，函数扩展啊，比如剪头函数等等，然后还有Proxy,Reflect,Promise,class,生成器函数，async/await等等，当然他就问Proxy对象能拦截什么，我说总共13个吧，但是我不一定写得全，然后随手就写了，get，set，deleteProperty, has, getPrototypeOf, defineProperty ，....。然后他问我Promise 我给他讲了一下这个对象，然后又顺便扩展出JS实现异步的5种方式callback, 发布订阅模式，Promise，生成器函数，async/await等等，然后介绍了实现异步的Event Loop，即浏览器端的宏任务，微任务，以及nodejs中的几个事件循环阶段，然后介绍了一下异步在其他语言上是怎么实现，然后随手就写了一段python代码，

while True:
    e = event_queue.front()

然后说了一下如果阻塞了JS中的主线程会发生什么情况，就是下面的代码。

setTimeout(() => console.log("hello world"))
while (true) {}

然后就开始问我提到的发布订阅设计模式，其实这就是一个nodejs中的EventEmitter，然后就随手写了一个EventEmitter类，主要方法有on, emit, once, off

class EventEmitter {
    constructor () {
        this._eventpool = {};
    }
    on (event, callback) {
        this._eventpool[event] ? this._eventpool[event].push(callback) : this._eventpool[event] = [callback]
    }
    emit (event, ...args) { 
        this._eventpool[event] && this._eventpool[event].forEach(cb => cb(...args))
    }
    off (event) {
        if (this._eventpool[event]) {
            delete this._eventpool[event]
        }
    }
    once (event, callback) {
        this.on(event, (...args) => {
            callback(...args);
            this.off(event)
        })
    }
}

当然在写的时候也有点紧张了，once方法忘咋写了，面试官就给了个小提示，最后还是写上了，当我写完这个时，他就出来一道原型链的题，我没记错的话是这样的

function a() {
    this.b = 3
}
a.prototype.b = 7;
var t = new a();
var b = 2;
a();
console.log(t.b);
console.log(b);
// 3
// 3

题目非常简单，我就不解释了
然后问了我PureComponent，flex布局以及一些css的东西，比如水平垂直居中等等，当然这些比较简单，我就不说了。
最后他问我平常怎么学习的，我说主要是书看的多一点，比如JavaScript高级程序设计，ES6标准入门，Javascript设计模式，然后平常喜欢去掘金，前端之巅里面看一些文章等等。最后他说你稍等十分钟，我给你联系二面，o(￣▽￣)ブ

二面：
一面大概面了一个多小时吧，然后十分钟没到，二面就打电话过来了，二面的面试官一脸严肃，出第一题，要我用css实现一个模态窗口，要从窗口下面向上弹的动画，其实这个一点都不难，反正我花几分钟就是写出来了。然后问一些css的单位比如rem，em，问css的布局方式，就是只用盒子模型布局，position的布局，flex布局，grid布局等等。然后问我跨域的问题，如何解决，我说了后端响应时设置Access-control-allow-origin头部，还有JSONP，然后他就那个响应头问的比较深，反正我也没答上，然后就要我写JSONP，我是首先介绍了一下它的基本原理，然后写到一半他就没让我写了。然后问我一堆网络安全的问题，比如XSS攻击，这个我会，所以也答的比较轻松，然后问我CSRF，这个没听过就过了，然后我说前端安全那块我不太熟，面试官就没有继续问我这个问题了。然后要我写个节流函数，随手就写

function throttle (fn, time) {
    var canRun = true;
    return function () {
        if (!canRun) return false;
        canRun = false;
        var that = this, args = arguments;
        setTimeout(function () {
            fn.apply(that, args);
            canRun = true;
        }, time || 500);
    }
}
setInterval(throttle(function() {
    console.log("hello world")
}), 100)

问我用reduce实现map的功能，这个比较简单，分分钟就完事了

Array.prototype.map = function (callback) {
    var arr = this;
    return arr.reduce((acc, cur, i) => {
        acc.push(callback(cur, i, arr));
        return acc
    }, []);
}
var m = [1,2,3,4,54].map(function (v, i, arr) {
    return v * v
});
console.log(m)

让我实现二叉树的后序遍历，想都没想，递归版

function TreeNode (val) {
    this.val = val;
    this.left = null;
    this.right = null;
}

function vist(root) {
    if (root) {
        vist(root.left);
        vist(root.right);
        console.log(root.val);
    }
}

写完之后，才发现自己上当了，自己写太快了，面试官就要我实现一个非递归版的，可能当时也比较紧张吧，而且面试官一边看着我写代码一边笑，我写到一半就不想写了，跟面试官讲了讲思路就让我过了
然后问我nodejs的事件循环，我跟一面的面试官就说了这个，所以把一面说的在跟这个面试官说一遍就ok了，最后他问我还有什么想问他的吗，我就随口一问CSRF，反正这个也不懂。没想到面试官非常耐心的给我讲了CSRF，瞬间感觉到了字节跳动面试官是有多么的负责，然后挂电话1分钟后又给我打过来了，说接下来19点到20:00点有空吗，给你约一下三面，然后给你30分钟，去吃个饭吧。哇塞，感觉这是我见到的最好最好的面试官了。(≧︶≦))(￣▽￣ )ゞ

三面：
其实二面的面试官要我去吃饭，自己也没去吃，就一直准备三面可能要问的东西，差不多20：00点的时候三面的面试官打来了电话。估计三面的面试官看我面完前两面，觉得我挺累的，就没太问我题了，首先要我自我介绍，先说自己哪个学校的，现在大三，然后成绩班级第一，年级第二，然后年级里大概有300人。然后自己在保证成绩的同时，利用自己课余时间学习了前端....。然后就开始和他聊项目，聊了一下我项目的设计，然后说了一下我当时为什么要用GraphQL，用它有什么好处等等。面试官问我学习前端多久了，怎么学习前端的 ，我回答的是大概学习前端5个月左右，平常看JavaScript高级程序设计，es6标准入门，JavaScript设计模式，深入理解react，你不知道的JavaScript，深入浅出nodejs等书，当然还有像疯狂Java讲义，流畅的python这些书，然后还喜欢上掘金、Medium、前端之巅了看一些文章等等，然后自己也写一些博客什么的。然后他又问了我nodejs相关的问题吧。然后他又问我平常看什么书籍，当时可能也有些激动，就把旁边的JavaScript高级程序设计给他看，当时面试官就乐了。当然还问了我一些人生规划啊，自己的优缺点啊，最后他看我会设计模式，就让我敲一个单例模式，我想这还不简单，在JavaScript里也就var a = {}就ok了，然后我就跟面试官说要不我用Java敲一个，随手就写了一个线程安全的Java单例设计模式，然后还跟他聊聊了大前端时代该如何更好的学习前端啊等等，最后他让我等几分钟，他帮我联系HR。不得不说字节跳动的面试官效率真高。d=====(￣▽￣*)b

四面：
其实四面的时候发生了点小插曲，经过三面大概是面到了晚上9点半，然后我又在电脑前等了一个小时也不见HR和我联系，最后就打电话给字节跳动的负责人问问啥情况，然后她跟我说HR晚上比较忙，在加上太晚了，就约到了另一天下午4点。四面的话，因为不是技术面嘛，所以都问我为什么要学前端，前端学多久了，前端怎么学习啊，平常除了学习成绩好获得的一些奖学金之外，还有没有其他奖。自己目前有哪些方面不足啊等等问题。比较尴尬的就是我一直以为我面的头条部门，结果HR跟我说他们那里是抖音，这昨天三个面试官都没跟我说他们是什么部门啊，外加上自己一晚上干三面也挺累的都忘记问啥部门了。不过最后还是得加一下HR的微信嘛，HR还让三面我的面试官加了我微信，感觉美滋滋。φ(*￣0￣)

面试问了我老多东西了，而且还很基础，有很多自己问题自己都记不清了，不过今天顺利拿到字节跳动offer就ok了，期待7月份去字节跳动的实习。ο(=•ω＜=)ρ⌒☆