奔三路 - 你30岁前的学习路!

奔三路学习网

当前位置: 主页 > 前端面试通 > 笔经面经 >

高材生的字节跳动前端面试,已拿offer

时间:2019-04-13 11:24来源:未知 作者:admin
面试问了我老多东西了,而且还很基础,有很多自己问题自己都记不清了,不过今天顺利拿到字节跳动offer就ok了,期待7月份去字节跳动的实习。
作者:白日梦201712091734936
链接:https://www.nowcoder.com/discuss/177482?type=2&order=3&pos=2&page=1
来源:牛客网

本来约的下午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的

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

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

1
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代码,

1
2
while True:
    e = event_queue.front()

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

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

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

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
class EventEmitter {
    constructor () {
        this._eventpool = {};
    }
    on (event, callback) {
        this._eventpool[event] ? this._eventpool[event].push(callback) : this._eventpool = [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方法忘咋写了,面试官就给了个小提示,最后还是写上了,当我写完这个时,他就出来一道原型链的题,我没记错的话是这样的

1
2
3
4
5
6
7
8
9
10
11
function a() {
    this.b = 3
}
a.prototype.b = 7;
var t = new a();
var b = 2;
a();
console.log(t.a);
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,这个没听过就过了,然后我说前端安全那块我不太熟,面试官就没有继续问我这个问题了。然后要我写个节流函数,随手就写

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
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的功能,这个比较简单,分分钟就完事了

1
2
3
4
5
6
7
8
9
10
11
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)

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

1
2
3
4
5
6
7
8
9
10
11
12
13
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月份去字节跳动的实习。ο(=•ω<=)ρ⌒☆

(责任编辑:admin)
顶一下
(0)
0%
踩一下
(0)
0%
------分隔线----------------------------
发表评论
请自觉遵守互联网相关的政策法规,严禁发布色情、暴力、反动的言论。
评价:
表情:
用户名: 验证码:点击我更换图片

奔三路小程序已改版