求职刷题神器

funit.cn

讨论区 > 求职面经 > 前端实习生-北京字节跳动一面

前端实习生-北京字节跳动一面

西柚纳纳米
发布于2021-03-02 14:09:02 170浏览

  字节的一面还是比较简单的,和一般公司的一面差不太多,基本大家只要多复习复习JS的基础和ES6,其实都差不多能够答出来。接下来记下具体这次的面试和流程,希望能对XDM有所帮助


CSS

  1. 居中对齐
  2. position


  首先是面试官让你自我介绍,介绍完之后开始问CSS方面的知识,这部分问的少,居中对齐有哪几个方案,position居中对齐的方案解释下原理,这两个问题回答完就直接JS部分了。CSS部分复习比较广泛繁琐,尽量还是在日常使用中累积经验


JS

  1. 事件循环
  2. Promise
  3. call bind
  4. 拍平方案
  5. 状态码


  这部分首先是事件循环题,是一个老生常谈的题目了,我没记下原题,这里贴一个类似的题目,当时出的是只有五个打印的题目,这个题目只要注意在微任务中Promise、settimeout的执行顺序,遇到await会立即执行表达式,然后把表达式后面的代码放到微任务队列里,让出执行栈让同步代码先执行就行了


async function async1() {
    console.log('async1 start');
    await async2();
    console.log('async1 end');
}
async function async2() {
    console.log('async2');
}
console.log('script start');
setTimeout(function() {
    console.log('setTimeout');
}, 0)
async1();
new Promise(function(resolve) {
    console.log('promise1');
    resolve();
}).then(function() {
    console.log('promise2');
});
console.log('script end');

/**
 * script start
 * async1 start
 * async2
 * promise1
 * script end
 * async1 end
 * promise2
 * setTimeout
 */


  紧接着的是手写的题目,要求手写call函数和Promise函数(这个其实没有让我去写,只是说了下实现的思路,后面的Redux简单实现也是只要求说了思路),注意以下写的东西并不是当时写的代码


Function.prototype.myCall = function(context) {
    context = context || window;
    context.func = this;
    const params = [...arguments].slice(1);
    const result = context.func(...params);
    return result;
}

function MyPromise(executor) {
    var self = this;
    this.status = 'pending';
    this.value = undefined;
    this.reason = undefined;
    this.onResolvedCallbacks = [];
    this.onRejectedCallbacks = [];
    function resolve(value) {
        if (self.status === 'pending') {
            self.status = 'resolve';
            self.value = value;
            self.onResolvedCallbacks.map((fn) => {
                fn();
            })
        }
    }
    function reject(reason) {
        if (self.status === 'pending') {
            self.status = 'rejected';
            self.reason = reason;
            self.onRejectedCallbacks.map((fn) => {
                fn();
            })
        }
    }
    try {
        executor(resolve, reject);
    } catch (err) {
        reject(err)
    }
}

MyPromise.prototype.then = function (infulfilled, inrejected) {
    var self = this;
    if (this.status === 'resolve') {
        infulfilled(this.value)
    }
    if (this.status === 'rejected') {
        inrejected(this.reason)
    }
    if (this.status === 'pending') {
        this.onResolvedCallbacks.push(function () {
            infulfilled(self.value)
        });
        this.onRejectedCallbacks.push(function () {
            inrejected(self.reason)
        });
    }
};
处。


  Promise部分完之后,面试官问知道拍平吗?拍平能说出有哪几种方案,我说了简单的比如toString+split的方案,递归的方案,还有Array.prototype.flat可以做到这一点,然后这里面试官说希望我能手写一个flat函数,要求传数组进去能够返回拍平后的数组


// 错误示范
// 这个是当时我写的,num并未起作用,然后面试官就让我回答后续的问题了
function flat(arr, num){
    let res = [];
    if(num > 0){
        arr.map(item => {
            if(Array.isArray(item)){
                res = [...res, flat(item, num - 1)]
            } else {
                res.push(item)
            }
        })
    }else {
        res = arr
    }
    return res;
}

console.log(flat([1,2,3,[1,2, [3,4], 5], 6], 1))


  紧接着面试官询问了我了解哪些状态码,我说完之后他取出304状态码问这个状态码是什么时候会看到的,这个地方其实就是问你对缓存的了解,问完后就进入了React的部分

  1. React
  2. diff算法
  3. this.setState异步同步
  4. 生命周期说一遍
  5. this.setState为什么不能用在render里
  6. 为什么hooks不能用在if-else里面
  7. redux实现


  首先简单问了React中diff的原理,key的作用,然后问了生命周期都有哪些,让我按自己的记忆说一遍,因为后面我用的是hooks,所以生命周期我只说了六七个,然后问了我,this.setState是同步的还是异步的,这里是一个小陷阱,因为this.setState在一些时候是同步的,一些时候是异步的,这个大家可以自己去了解一下在监听事件、绑定事件、生命周期中的this.setState表现。然后问了我this.setState为什么不能用在render里,这里也是一点小陷阱,因为事实上不是不能用,而是尽量谨慎,this.setState会触发重新render,你可以为其设置限制条件等控制他的重新渲染。为什么hooks不能用在if-else里面,这个其实我没有太清楚,所以说了不好意思不太清楚。值得一提的是,大厂的面试官不会因为你不懂而改变对你的态度,始终都会是比较温和的面试态度,所以这点对于面试者还是比较舒服的,不会出现面完心态大崩的情况啦。然后问了我懂不懂redux的简单的实现,正好这个我有写过一个简单的实现,然后就边地打了几行,边讲具体的代码和设计思路,具体代码在下方


export default function createStore(reducer){
    let state = null;
    const listeners = [];
    const getState = () => state
    
    const dispatch = (action) => {
        state = reducer(state, action)
        listeners.forEach(listener => listener())
    }
    
    const subscribe = (listener) => listeners.push(listener)
    
    // 这里初始化dispatch的原因是在这之前,state是为null的
    dispatch({});
    return {
        dispatch,
        subscribe,
        getState,
    }
}


其他:

graphql的意义


  最后面试官还问了我graphql的意义是什么,这个是因为我的简历上是有说用过graphql的,所以问了用这个的原因,这里我答得是和Restful的一些差别,这个的话大家可以没用过的话就可以不用复习,不用担心面试官会问出除你简历所写之外的技术(昂除非是很基础的比如CSS、html),最后是让我问问题,我询问了该前端团队所选用的技术栈是怎样的,也是gql + apollo那一套加中间层,具体的没有详细问,希望我的面经能够对大家的面试有所帮助。

本文首次发布于趣IT ,转载请注明出处,谢谢合作

前端实习生-北京字节跳动一面

全部评论0

成为第一个评论的人

还可以上传7

表情
  • 快速扫码进群
    加入职友圈
下一步
知道了