字節跳動前端實習四面涼經..炎炎夏日的一絲清涼..

時間 2019-11-07

標籤字節跳動前端實習四面炎炎夏日一絲清涼简体版

原文原文鏈接

學前端一年多了,本着想在暑假找一個實習,而後開始投簡歷,出乎意料的字節跳動簡歷篩過了..上個禮拜五下午四面完一直沒音信了..大機率是涼了..因此記念一下第一次被大廠面..本文有些拈輕怕重,一些比較基礎的就一筆帶過了css

一面

一面是一個小姐姐面的,一面都是考察的一些基礎,主要就是看本身簡歷上寫了什麼而後挑着問..前端

上來先讓寫了兩道題vue
- 第一道是分析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__是什麼,中間一度被搞暈了..不過面試官仍是給機會了,說你再好好想一想,而後最後理清楚了webpack
new操做符都作了什麼事情?Object.create(obj)呢?ios
- new: 說了新生成一個對象,而後鏈接到構造函數的原型上,而後綁定this,最後返回新對象
- Object.create(obj): 說了和new不一樣的是,他會先生成一個空的中間對象,而後把傳進去的obj掛到那個空的中間對象的原型上,最後返回這個新生成的空對象,這也就是爲何繼承中, 選擇它能夠改寫子類的constructor而且保留父類的constructor
apply,call,bind作了什麼事情?有什麼區別?git
- 他們用來改變this指向,能夠把apply,call看做一組,不一樣的區別是第參數不同,除了第一個須要改變的this指向,call接收的是多個參數, apply是接收一個數組.至於bind是建立一個新的函數,調用時，綁定this而且返回
我如今有好多個promise我想讓他們並行操做,所有完成後再返回,怎麼作?github
- promiose上有一個all方法,接收一個由promise實例構成的數組
對async/await瞭解嗎?web
- 說了由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;
};

複製代碼