記人生第一次工做面試 - 小米前端實習

時間 2019-12-10

原文原文鏈接

題外話

筆者目前大三,北京周邊院校。做爲人生的第一場面試,以及一些感觸,有感而發,經歷三面,包含部分面試題。css

我的經歷簡述：至今接觸互聯網編程有8年多,也依靠互聯網從初二作到經濟獨立。大一的時候選擇了前端並開始深刻學習,目前基本掌握html,css,js,es6等,有屢次先後端獨立開發經驗,也有團隊引導經歷。之因此想加入xx,是由於xx,想加入一個有激情、有上進的Team - 官話,也就是自我介紹html

見識到的東西：

工做環境: 和學校咱們本身的場地相比, 高大上不少倍, 辦公環境由玻璃擋片桌子構成,每一個桌子上基本有蘋果筆記本一臺,外加橫豎顯示器各一臺。
福利: 我所知道的是我花了1分錢買了友寶在學校3元錢的冰紅茶(3-2-0.99[京東])。
面試官: 同齡人。
面試: 坐着不是站着,因此若是糾結穿什麼鞋的話,不必。
感觸: 揹着電腦跑一天,真的很累。
自我介紹: 真的沒那麼重要,由於氣氛不適合說出那麼一段官話。

學到的東西(不含技術)：

尊重別人的勞動成果: 當我看到第三面Lead面試官,將我寫的4k字的主觀題(面試前作的),用標記把重點標出的時候,我已經以爲,我或者不少人其實已經輸在態度上。
謙虛: 面試官們技術或者各方面都比我厲害,但從頭至尾,面試官給個人感受就是很是和善,會的東西不少,不驕不躁，仔細聽我說，而後也給我建議和反饋,真的是社會的老師。
經過二手資料學習技術固然不錯,不論是看教程仍是看博客,雖然效率是有了,但會錯過不少細節,因此學習一手資料，直接看經典JS書,或許學到的更多。個人ES6剛開始是看M課網的ES6CP實戰教程學習的,後來又看了深刻理解ES6這本書,感觸真的不同。不過這一點,筆者也沒作的很好,始長年輕氣燥。(筆者大一就知道這四本書：你不知道的JavaScript,高性能Javascript,紅寶書,犀牛書,但每一次拿到書,都沒有靜的下心來學習。當代年輕人,靜下心專心的完成一件事,真的很重要。)
對於一個技能, 假如實踐須要用到的知識有20%, 那麼認知須要覆蓋80%。 - 面試官前輩語錄

我的對前端面試,以及知識體系的一些見解

經過這一次面試吧,我以爲個人知識體系更多的是靠面試準備這段期間搭起來的，而不是平時的項目開發，或者當時在學習基礎的時候。因此我目前的想法是,經過看JS的經典書籍，把本身的知識體系用本身看的書用思惟導圖搭建起來,而不是靠面經和麪試之類的書籍，也許是知識點太淺吧，雖然面試的時候，不少問題都能回答，可是本身自身的硬件其實不算是太硬的。前端

正題

一面

知識點：原始類型,對象,閉包,原型,Event Loop,TCP,瀏覽器緩存機制,網絡安全方面(XSS,CSRF),CSS，HTTP2，ES6等等git

PS：題目順序可能記不住(題目可能有交叉),大概的題以下,自行思索。es6

你知道JS有哪些類型嗎？
==和===的區別
怎麼判斷對象是否爲空
閉包是什麼,怎麼理解? a(1)(2)怎麼調用的, 如何用代碼實現a(1)(2)(3)(4)...(n)的函數定義
你知道new一個實例的時候發生了什麼嗎？相似寫一個本身定義的new函數
你知道call,apply,bind之類的函數嗎? 如何本身實現原理？
你知道ES6中的關於數組的哪些新方法或屬性,說說arr.form()
如何實現原型繼承?
兩欄佈局：左邊寬度固定,右邊自適應(筆者建議儘可能用五種方法實現)
你知道瀏覽器緩存嗎？怎麼實現？有哪些位置？
XSS和CSRF方別是什麼？怎麼防止？怎麼實現攻擊？
VUE響應式原理,哪一個函數實現的? Proxy有什麼用？
TCP: 1KB，14KB，15KB，30KB等大小的文件，哪一個先加載完(網速固定,數字記不清了)
git,你知道除了那些簡單的命令，你還知道什麼,好比如何版本回退(我沒答出來完整的，給我講了兩個回退方案不一樣的區別)

暫時能想起來的也就這麼多,筆者自我感受大概回答出80%--吧。由於這些不少知識點基本是靠面經或者面試相關的手冊書籍堆砌起來的知識體系,因此本身評價算是很薄弱，但這一部分在實戰項目中是很難遇到的。面試

二面

知識點： ES6，CSS3，瀏覽器相關, 算法算法

用原生JS實現Promise.all方法
Flex實現以下圖的佈局：(不知道掘金怎麼傳圖,只能用markdown表格畫了), 外面dom未知寬高,內部四個角度各有一個dom

	以下圖#號區域
###########		###########


###########		###########

求[1,32,5,4,5,-1,3,4,-20]數組(任何一個數組)的子數組的最大和是多少[注意：不能改變數組順序]
深淺拷貝
cookie，localstroge等這四個存儲有什麼區別
restful API規範接口相關的。get,post有什麼區別
下面的記不住了...

其餘題目暫時記不住了,前面有的挺涼的,感受回答了60%吧。固然還交流了一些不關於技術的內容(必定是面試官哥哥讓我緩解氣氛,因此是題外話)編程

三面

實際手寫代碼的題,很涼後端

實現如下函數未完成的部分(題目是我本身總結老師的話,而後寫的題目代碼)

function action(id) {
  return new Promise((resolve, reject) => {
    setTimeout(() => {
      (Math.random() <= 0.5) ? resolve(id) : reject(id)
    }, 300)
  })

}
function notify(id, state) {
  console.log('notify=> ', id, state)
}
let idList = [1, 2, 3, 4, 5, 6, 7, 8, 9, 10]

/**2000 * * @param {Function} action 異步數據回調函數 - 接口 * @param {Array} idList 異步獲取數據回調所須要參數 - 傳遞的數組，需遍歷 * @param {Function} notify 異步回調通知回調函數 * return 異步數據回調成功或失敗的id結果 - 需返回Promise */
function getProList(action, idList, notify) { // 老師就給了這一行代碼,其餘的是語義補充
  // 補充完成函數
 
}
const res = getProList(action, idList, notify)
res.then((res) => { console.log(res) })


複製代碼

回來以後在學校寫的(今早花了30分鐘左右完成的吧),遇到promise的嵌套，筆者懵了：api

function action(id) {
  return new Promise((resolve, reject) => {
    setTimeout(() => {
      (Math.random() <= 0.5) ? resolve(id) : reject(id)
    }, 300)
  })

}
function notify(id, state) {
  console.log('notify=> ', id, state)
}
let idList = [1, 2, 3, 4, 5, 6, 7, 8, 9, 10]

/**2000 * * @param {Function} action 異步數據回調函數 - 接口 * @param {Array} idList 異步獲取數據回調所須要參數 - 傳遞的數組，需遍歷 * @param {Function} notify 異步回調通知回調函數 * return 異步數據回調成功或失敗的id結果 - 需返回Promise */
function getProList(action, idList, notify) {
  // 補充完成函數
  return new Promise((resolve, reject) => {
    let res = {
      success: [],
      fail: []
    }
    for (const id of idList) {
      let promise = action(id)
      promise.then(() => {
        res.success.push(id)
        notify(id, 'success')
        return Promise.resolve(res.success.length + res.fail.length)
      }, () => {
        res.fail.push(id)
        notify(id, 'fail')
        return Promise.resolve(res.success.length + res.fail.length)
      }).then((length) => {
        if (length === idList.length) {
          resolve(res)
        }
      })
    }
  })
}
const res = getProList(action, idList, notify)
res.then((res) => { console.log(res) })


複製代碼

原型鏈實現繼承（哈哈哈哈,自己沒難度的題,換個套路,我就不會作了）

// 實現child繼承parent
function extends(parent, child){
    
}
複製代碼

個人答案: child.prototype = Object.create(parent.prototype,{})

我本來準備好的套路：

function Parent(value) {
  this.val = value
}
Parent.prototype.getValue = function() {
  console.log(this.val)
}

function Child(value) {
  Parent.call(this, value)
}
Child.prototype = Object.create(Parent.prototype, {
  constructor: {
    value: Child,
    enumerable: false,
    writable: true,
    configurable: true
  }
})

const child = new Child(1)

child.getValue() // 1
child instanceof Parent // true
複製代碼

結語

哈哈,由於這個文章主要是想給團隊的另外兩個成員看下題目的,也想給本身的學弟學妹們一些指引,因此寫的有點迷,將就將就吧。而後我想學學弟學妹們說的是：靜下心學習，無論未來要考研仍是搞技術，我的以爲：考研的，在大三下學期以前，必定要學習一些技術，否則考完研，你會很迷，或者以後工做，可能偏市場方向去了，而不是技術。對於不考研的，這段話給我本身說：靜下心，繼續準備，別想着不努力，未來有好工做，別想着臨時抱佛腳，別想着我爸是雷J。關於學校課程：我如今回去從新學數據結構和算法相關的，還有網絡相關的(TCP之類的 - 目前的課)。