面試分享：專科半年經驗面試阿里前端P6+總結(附面試真題及答案)

時間 2019-11-05

標籤面試分享專科半年經驗阿里前端 p6 總結答案欄目快樂工作简体版

原文原文鏈接

前言

先介紹一下本身的狀況吧javascript

成都青城山下某大學畢業，專科，軟件測試專業畢業
22歲，15年出來實習，工做經驗接近三年，以前主要作後端寫PHP，本身喜歡瞎折騰，從去年六月份開始研究前端，算下來前端經驗半年多

年末因爲種種緣由想換一份工做，但因爲太忙，沒認真搞簡歷，也沒怎麼複習基礎，致使不少原本會的都沒敢往簡歷上寫。因而寫了一個簡版的簡歷掛在Boss直聘上，準備年過完再認真籌備這件事情。css

令我意外的是，一週竟收到八條阿里的面試邀請，看了網上前輩的一些心得：阿里三個月內只能應聘一次，因而選了兩個心儀的部門投了簡歷，其中一個內推完沒下文，多半是學歷沒過😂html

如下是阿里面試過程

第一輪電話面試

自我介紹前端

balabala....，很久沒面試過，自我介紹竟然顯得很緊張，說了一些簡歷上沒有的東西，好比以前寫PHP、用Swoole作智能硬件通信啊之類，以及爲何寫前端啊，balabala...java

會ES6嗎，什麼是解構賦值？直接舉了個例子mysql

const { a, b, c } = { a: 'aa', b: 'bb', c: 'cc' }
複製代碼

說下React的生命週期react

實例化ios
- getDefaultProps
- getInitialState
- componentWillMount
- render
- componentDidMount
存在期面試
- componentWillReceiveProps
- shouldComponentUpdate
- componentWillUpdate
- componentDidUpdate
銷燬時redis
- componentWillUnmount
React方法中，調用事件處理方法(裏面要用到this)怎麼調用
```
this.foo.bind(this)
複製代碼
```
接問題4，爲何須要bind(this)

做用域的問題，foo() {} 與 const foo = () => {}裏面的this做用域不同，foo() {}裏面使用外部成員，須要bind(this)，直接使用的this做用域僅在該方法內部
接問題4，能不能不使用bind(this)
- 可使用箭頭函數
- 可使用lodash-decorators裏面的Bind裝飾器
裝飾器的原理

語法糖，實則調用Object.defineProperty，能夠添加、修改對象屬性
本身實現一個通用方法，作到不須要使用bind與裝飾器達到問題4的目的

柯里化 + apply，詳細過程不贅述...
閉包裏面的this做用域

內部函數的this指向外部包裹它的做用域
React render作了什麼

主要分首次渲染與更新來講，說的比較多，不贅述，網上react源碼分析一大堆...這期間順帶提到了利用redux-saga在shouldComponentUpdate時所作優化，以及本身的開源項目
說說xss與csrf，怎麼防止
- xss：跨站腳本攻擊，若是不過濾執行了js代碼，可能致使cookie泄露等。防止：過濾
- csrf：跨站請求僞造，挾制用戶在當前已登陸的Web應用程序上執行非本意的操做。防止：設置token、寫操做用post、JSON API禁用CORS、禁用跨域請求、檢查referrer
Ajax的原理，你日常怎麼發送網絡請求的
- 經過XMLHttpRequest/ActiveXObject新建Ajax請求
- 經過onreadystatechange註冊回調函數
- 使用open、setRequestHeader、send結合發送請求
- 日常發送網絡請求：用next作同構應用時，使用isomorphic-fetch發送請求，若是隻是客戶端發送請求時，使用axios

有三個元素，第一個與第三個寬度都爲100px，中間元素佔用剩餘空間，怎麼作到中間元素隨着瀏覽器寬度的變化而變化

<div className="main">
    <div className="div-1"></div>
    <div className="div-2"></div>
    <div className="div-3"></div>
    <style jsx>{` .main { width: 100vw; height: 100vh; display: flex; justify-content: space-around; } .div-1,.div-3 { min-width: 100px; height: 100vh; } .div-2 { width: 100%; height: 100vh; } `}</style>
</div>
複製代碼

講講box-sizing
- 標準模式：width與height指的是內容區域的寬高，增長padding、border、margin會影響整體尺寸
- 怪異模式：width與height指內容區+padding+border，增長padding、border不會影響整體尺寸
作項目有沒有遇到什麼坑

最近作的這些項目項目也沒有遇到什麼大坑，印象很深的是以前實習搭建EKL中央日誌服務器的時候，被一個時間問題坑了一天，EKL收集的日誌時間與服務器的時間（時區）不一致，致使收集不到日誌
你以爲搭建EKL有那些難點

相關服務器搭建卻是沒什麼難點，我以爲使用EKL最麻煩的是寫grok match正則，匹配不一樣的日誌，須要不一樣的正則，不過寫到後面也習慣了，還OK
講講印象比較深的後端項目

以前實習時，作智能硬件項目，是一個寵物智能項圈，能記錄寵物的運動數據，硬件每隔一段時間會發送大量的陀螺儀與加速計數據到服務端，經過swoole創建tcp，接受二進制數據，而後將接受到的數據經過map reduce處理...
停一下，你講處處理大數據用map reduce，那爲何不用redis之類的

我我的以爲應該是當時團隊比較小，須要一個快速且簡單的解決方案，因此map reduce正是咱們所須要的，redis我也知道，可使用zset，求和很方便
說說mysql的事務

BEGIN、事務回滾ROLLBACK、事務提交COMMIT
說說你最滿意的業務項目

說了一個next.js的觸屏版同構項目，項目中使用到了prefech預先加載，以及next的動態加載，體驗至關的快，用nprogress展現滾動條，在next.js尚未發佈5.0版本/解決style-jsx中使用less、sass問題的時候，本身用postcss解決了，整個項目使用flexible + rem作響應式，本身改寫了video-react組件，兼容觸屏版，還有一些自認爲不錯的業務思想不贅述...
說說rem與em的區別

rem是根據根的font-size變化，em是根據父級的font-size變化

一面總結

一面面試的時候時不時順帶表現一下本身，根據面試官的問題回答時順帶提了一下看過的開源項目，好比react(redner過程)、next(postcss解決style-jsx編寫less、isomorphic-fetch的使用等)、ant pro(lodash-decorators的使用)等

第二輪筆試

1.實現destructuringArray方法，達到以下效果

// destructuringArray( [1,[2,4],3], "[a,[b],c]" );
// result
// { a:1, b:2, c:3 }
複製代碼

2.須要經過threshold參數控制調用函數頻率

const yourFunction = function(func, threshold) {
 // 請實現
}
const triggerSearch = yourFunction((val) => {
  const {
    onSearch
  } = this.props
  onSearch(val)
}, 300)
triggerSearch(searchText)
複製代碼

個人答案（能夠先不看，本身現實一下）

// 第一題
const targetArray = [1, [2, 3], 4];
const formater = "[a, [b], c]";
const formaterArray = ['a', ['b'], 'c'];

const destructuringArray = (values, keys) => {
  try {
    const obj = {};
    if (typeof keys === 'string') {
      keys = JSON.parse(keys.replace(/\w+/g, '"$&"'));
    }
    
    const iterate = (values, keys) =>
      keys.forEach((key, i) => {
        if(Array.isArray(key)) iterate(values[i], key)
        else obj[key] = values[i]
      })
      
    iterate(values, keys)
    
    return obj;
  } catch (e) {
    console.error(e.message);
  }
}

console.dir(destructuringArray(targetArray,formater));
console.dir(destructuringArray(targetArray,formaterArray));

// 第二題
const yourFunction = function(func, threshold) {
  let timeOut;
  return function() {
    if (!timeOut) {
      timeOut = setTimeout(() => {
        timeOut = null;
        func.apply(this, arguments)
      }, threshold)
    }
  }
}

const triggerSearch = yourFunction((val) => {
  const {
    onSearch
  } = this.props
  onSearch(val)
}, 300)
triggerSearch(searchText)
複製代碼