字节跳动前端实习，一面、二面

前言

楼主大三

自我感觉：一面怕是会挂，结果进了二面，二面面完感觉嗨行，面试官说会有三面通知的，结果等了一天的寂寞，呜呜没有电话...

面的是抖音，

字节跳动真的是我的第一意愿了！

呜呜呜，我这么喜欢它，它还演我....

一面

时间：2020.12.23

Q1：同学，同学，你能听到我说话吗

A：我赶紧调设备，嘤嘤嘤啥情况，为啥听不到面试官的声音....结果好像是面试官的设备有点问题，他换了两台电脑，然后正常了

Q2：说一下项目叭，你做了什么内容，负责的什么模块

A：云云云

Q3: cookie和session的区别？

A：云云云....

cookie数据存放在客户端浏览器上，session数据存放在服务器上。
cookie只能存储ASCII码字符串，session则可以存储任何类型的数据
cookie不安全，session比较安全
session在一定时间内保存在服务器上，当访问增多，会比较占用服务器性能

Q4: 如何进行CORS跨域的？

A：云云云，服务端必须设置 Access-Control-Allow-Origin响应头字段，CORS 有两种类型的请求：一种是简单请求（simple request），一种是复杂请求（preflight request）。

Q5: TCP位于哪一层呢？它的主要的应用场景?

Q6: TCP 的可靠运输机制，流量控制机制，拥塞控制机制？

Q7: HTTP是基于什么协议的？

Q8: OSI的七层协议和五层网络架构？

Q9: BFC的触发条件？

Q10: 写一个两栏布局？（一栏自适应，一栏固定长度）

Q11: 清除浮动的方法？为什么要清除浮动

Q12: 外边距合并-父盒子塌陷？

Q13: js的数据类型？堆、栈...

云云云

Q14: 继承...
可以手写一个寄生组合式继承吗？

Q15: new的过程
四步：

首先创建了一个新的空对象
设置了原型，将对象的原型设置称为函数的prototype对象
让函数的this指向了这个对象，指向构造函数的代码（为这个新对象添加了新属性）
判读函数的返回值类型，如果是值的类型，返回创建的对象；如果是引用类型，返回引用类型的对象

Q16: 事件冒泡与事件捕获

Q17: 事件委托的原理

Q18: 看题

const event = new Event();

event.on('test', () => {});

event.emit('test');

event.once('once', () => {});

event.off('test');

我不知道我理解的对不对，各位大佬也可以分享下你们的答案嗷！但我觉得面试官是想要让我实现一个发布订阅模式
话不多说，上代码:

class Event {
    constructor() {
        this.handlers = {}
    }

    on(eventName, callback) { //监听事件，触发时调用callback函数
        const eventCallbackStack = this._getHandler(eventName).callbackStack
        eventCallbackStack.push(callback)
    }

    emit(eventName, ...args) { //触发事件，并把参数传给事件的处理函数
        if(this.handlers[eventName]) {
            this.handlers[eventName].callbackStack.forEach(cb => {
                // 修正this指向
                cb.call(cb, ...args)
            })
            // 移除once事件
            if(this.handlers[eventName].isOnce) {
                this.off(eventName)
            }
        }
    }

    once(eventName, callback) {//为事件注册单次监听器
        const eventCallbackStack = this._getHandler(eventName, true).callbackStack
        eventCallbackStack.push(callback)
    }

    off(eventName) { // 停止监听事件
        this.handlers[eventName] && delete this.handlers[eventName]
    }

    _getHandler(eventName, isOnce = false){
        if(!this.handlers[eventName]) {
            this.handlers[eventName] = {
                isOnce,
                callbackStack: [],
            }
        }
        return this.handlers[eventName]
    }
}
  //测试一波~
    const event = new Event()

    console.log('注册test事件')
    event.on('test', () => {
      console.log('监听到test');
    }
    )
    event.emit('test');

    console.log('注册once事件');
    event.once('once', () => {
      console.log('监听到once');
    });
    event.emit('once');

    event.off('test');
    console.log('再次触发test事件');
    event.emit('test');

在控制台输出一波~o(￣▽￣)ｄ
图片说明

看一道关于树的题目，手敲出来

const tree = {
  name: '1',
  children: [
    {
      name: '1.1',
      children: [
        { name: '1.1.1' },
        { name: '1.1.2' }
      ]
    },
    {
      name: '1.2',
      children: [
        { name: '1.2.1' },
        { name: '1.2.2' }
      ]
    }
  ]
}

/**
 * 深度优先搜索算法
 * @param {Tree} tree 树
 * @param {string} name 查找的项
 * @return {TreeNode | null} 对应的项相对的节点
 */
function dfs(tree = {}, name = ''){}


## 二面
呜呜呜呜，等我睡一告再起来写！！！！然后把答案补上

#实习##面经##字节跳动##前端工程师#