字节跳动前端实习四面凉经..炎炎夏日的一丝清凉..

学前端一年多了,本着想在暑假找一个实习,然后开始投简历,出乎意料的字节跳动简历筛过了..上个礼拜五下午四面完一直没音信了..大概率是凉了..所以纪念一下第一次被大厂面..本文有些避重就轻,一些比较基础的就一笔带过了

一面

一面是一个小姐姐面的,一面都是考察的一些基础,主要就是看自己简历上写了什么然后挑着问..

上来先让写了两道题
- 第一道是分析this指向然后判断输出什么,大概就是对象里有方法,然后各种调用,这样的面试题也很多了..我也没具体记这个..回答的还算ok
- 第二道是一个算法题: 给定一段英文,统计哪一个字母出现的频率最高,出现了几次?
  一上来就写算法题..我是有点紧张的..然后写的比较乱,但好在小姐姐应该是看懂了..我在这里说一下我的思路:
  - 假设给定的英文是这样的
```
 Youth means a temperamental predominance of courage over timidity of the appetite for adventure over the love of ease 
```
  - 我先将空格去除变成一个纯字母的字符串 str = str.split(' ').join('')
  - 然后用了map的数据结构, 遍历字符串,挨个存,如果不存在就存进去,如果存在就更新值+1, 这样建立了一个统计的映射关系..
```
let map = new Map()
for(let i = 0 ; i < str.length ; i++){
    if( map.has(str[i]) ){
        map.set( str[i], map.get(str[i]) + 1 )
    }else{
        map.set( str[i], 1 )
    }
}
```
  - 然后这里我当时有点傻了..具体怎么做的我给忘记了..反正是写的好复杂,又取出来存了个对象,再用sort排序对象..其实构造好上步的映射关系后直接使用entries()遍历一遍就可以了..
之后问了一些常规的,比如什么是原型,什么是原型链,js的继承方式有哪些,有什么好处?然后她写了一个构造函数,new了一个对象,各种问xx.prototype ,xx.__proto__,xx.prototype.prototype,xx.prototype.__proto__是什么,中间一度被搞晕了..不过面试官还是给机会了,说你再好好想想,然后最后理清楚了
new操作符都做了什么事情?Object.create(obj)呢?
- new: 说了新生成一个对象,然后连接到构造函数的原型上,然后绑定this,最后返回新对象
- Object.create(obj): 说了和new不同的是,他会先生成一个空的中间对象,然后把传进去的obj挂到那个空的中间对象的原型上,最后返回这个新生成的空对象,这也就是为什么继承中, 选择它可以改写子类的constructor并且保留父类的constructor
apply,call,bind做了什么事情?有什么区别?
- 他们用来改变this指向,可以把apply,call看作一组,不同的区别是第参数不一样,除了第一个需要改变的this指向,call接收的是多个参数, apply是接收一个数组.至于bind是创建一个新的函数,调用时，绑定this并且返回
我现在有好多个promise我想让他们并行操作,全部完成后再返回,怎么做?
- promiose上有一个all方法,接收一个由promise实例构成的数组
对async/await了解吗?
- 说了由async修饰的函数可以用同步的方式书写异步代码,需要异步的时候用await修饰内部语句..
对http缓存了解吗?
- 这个我答的不太好..先说了,强缓存和协商缓存,又扯了expire,etag.cache-control字段,(我其实真有点分不清..),反正脑子里有什么就说什么..
你刚才说cache-control,那no-store和no-cache有什么区别?
- 这个我有点忘了..但是我记得的是no-store才是不进行任何缓存,但是no-cache忘记了..然后就回答了这个忘记了..其实no-cache是不缓存过期的资源
还是缓存机制..webpack里hash,contenthash,chunkhash有什么区别?
- 这个我是真不会..就直接说了不清楚..这里简单总结一下,webpack里通过文件名后加hash值的方式来控制缓存的版本,hash是同一个项目共用同一个hash,只要一个变了所有文件都变了,这肯定不合理,chunkhash是同一个入口的共用一个hash,这样也不太合理,因为很多文件时同一个入口,其中一个变了,都变了也不行,contenthash才是只管自己,只会改变发生变动的那一个
webpack如何做代码拆分?
- 这里我也答的不太好,只说出来在vue-router中我们会使用 import()的方式
如果要你设计一个vue弹窗组件,你会怎么设计?
- ..我简单的说一下我怎么回答的..我说可以设置一个高宽占满整个屏幕的黑色半透明背景当遮罩,然后中间使用positon:absolute;top:0;bottom:0;left:0;right:0;margin:auto;或者flex放中间,是弹框的部分,然后可以使用slot放置显示的内容,设置一个close按钮,yse,no按钮,利用this.$emit向父组件传递v-if的显隐值和用户点击的true or false值..
然后一面就结束了..

二面

上来先做自我介绍,然后简单聊了聊..问我平常怎么学习的,使用github做什么balabla
然后让我设计并手写一个组件
- 两个下拉单选框, A,B. B 的选项依赖于A的取值,封装成一个组件
- 首先明确了一下外部传进来的数据结构大概是这样的,就是一个两层的树结构
```
let obj = [
    {
        name: 'beijing',
        children: [
            {
                name: 'chaoyang',
                children: null
            },
            {
                name: 'haidian',
                children:null
            }
        ]
    },
    {
        name: 'shanxi',
        children:[
            {
                name:'taiyuan',
                children: null
            },
            {
                name: 'jinzhong',
                children: null
            }
        ]
    }
]
```
- 然后就是手写了..因为是视频面试,在牛客自带的编辑器上写的,面试官说不要在意过多的细节, 意思到了就行了..用的是vue,先写了一个框架template,script,style什么的,然后定义了传进来的props,然后用先写A下拉框用v-for生成option模板,然后加点击事件,获取到点击的哪一项,然后设置一个computed属性来监听B下拉框的数据,比如点击了北京那一条,它的children数组的数据用来生成B下拉框,然后是设置一个button,使用this.$emit将选中的name传递出去,有的具体vue语法细节忘了..询问完面试官他说这个没事,意思到了就行..最后还写了一个怎么使用的实例,是要给别人用的 ,具体怎么使用呢?然后又写了一个父组件,引入下拉框组件,传值,自定义事件接受子组件的数据..
三面
- 三面比较痛苦了就..一上来自我介绍完毕后,就聊了聊,聊完就让我做题..
- ```
现有一个抽奖活动, 一共100万人参加, 奖品有1000个, 每个人最多中将1份,且已知每人有一个中将倍数, 为整数, 最大200, 最小1,要求写函数实现抽奖过程
```
  - 我当时愣了有十分钟...写了删删了写的...最后写了一个不太好的版本
  - 简单说一下我的思路..就是m这个中奖倍数当作了复活权,m是多少就有重新抽奖的机会..最后写了一个这样的版本..哭了..还是太菜了

四面

本来三面完了之后我都有点郁闷了,以为凉了,没想到hr小姐姐立马打电话说临时加一面,然后就当天下午隔了一个多小时就继续了
还是问技术..问怎么学习了,问平常看了什么书,我说看过js高程,css揭秘,图解http,,然后问我图解http哪里的知识印象最深..我嘴贱的说了缓存...然后就是一直问一直问,,问到自闭了..当然其他两本书也是类似的问法..
最后!!!!!!我想一头撞死的环节来了!!!让我写一道题,反转链表!!!我没写出来..当时脑子真是瓦特了,就陷入僵局了,连用一个数组保存一下里面的数据,然后再重新遍历赋值这种不原地的笨办法也没写出来..快被自己蠢死了..不说了,菜是原罪..下面说下怎么解这道题吧..

//三指针法
let reverseList = head => {
  let curt = head;
  let prev = null;
  let next = null;

  while (curt) {
    next = curt.next;
    curt.next = prev;

    prev = curt;
    curt = next;
  }

  return prev;
};

//递归
let reverseList2 = head => {
  if (head === null) return null;
  let prev;
  if (head.next === null) {
    return head;
  }
  prev = reverseList(head.next);
  
  head.next.next = head;
  head.next = null;
  return prev;
};

总之核心思想就是, 防止单链表断掉, 要在每次反转完保存一下 ,无论递归还是非递归

最后

一周过去了..不报太大希望了..吸取教训..继续前行..还有, 有哪家公司招人,哪个大佬能内推我一波吗(base:北京)!!!,orz

字节跳动前端实习四面凉经..炎炎夏日的一丝清凉..

一面

二面

三面

四面

最后