百度面試篇——百度的一面會遇到怎樣的題？

前言

金三銀四，這個春天，比冬天更寒冷，不是由於別的，而是當下嚴峻的就業形勢，但願這篇文章能給各位讀者嚴冬中送去一些溫暖。本文將講述一次面試百度的慘痛經歷，包含個人一些思考。

題目

本文將按照順序將題目分爲三類，分別按照題目、答案、思考的順序去書寫。話很少說，正文開始。

CSS類題目

面試官：例如qq聊天界面（此處圖省略），左邊一個頭像右邊一個三角，三角右邊是聊天內容，如圖：

答：定位，三角形，xxxx。
面試官：那你實現一下三角形，頭像與三角形垂直方向居中。

三角形

答案

<style>
.triangle{
    width: 0;
    height: 0;
    border: 10px solid black;
    border-top-color: transparent;
    border-bottom-color: transparent;
    border-left-color: transparent;
}
</style>
<div class="triangle"></div>

效果圖：

思考

這道題實際上考察的知識點爲css盒模型。傳統的給矩形加border咱們以爲沒啥疑問。可是矩形的寬和高爲0時候，border會怎麼渲染呢？這就是這題的考點。
用一段代碼說明這個問題以下：

<style>
    .triangle{
        position: relative;
        top: 100px;
        left: 100px;
        width: 0;
        height: 0;
        border: 50px solid black;
        border-top-color: rgb(250, 0, 0);
        border-bottom-color: #f0f;
        border-left-color: #00f;
        border-right-color: #ff0;
    }
</style>
<div class="triangle"></div>

效果圖：

惋惜這題我沒答出來，一個是由於把border跟border-radius搞混了，
覺得有個border-left-top-color這樣，
二是平時使用的時候沒有注意總結，只是拷貝代碼。沒有深刻了解border。

垂直居中

這個題是想考，左邊頭像的中心點與右邊三角的中心點，在一條線上對齊。

答案

這個題我只想到了margin-top與display:flex兩種方案，可是被面試官否掉了。個人思路是margin-top值確保他倆對齊，可是面試官以爲很差，我說display:flex配合align-items:center，也被否了。

思考

這個題不想多說什麼，以前作過，可是無奈面試官不認帳，各位大佬們有什麼想法歡迎評論，這個題須要答案的話，F12審查一下其餘web頁面怎麼作的就行了。

----------------以上就是css所有題目了-------------------

JS類題目

js實現數組分組

輸入arr = [1,2,3,4,5,6,7] ; size = 3;
輸出 arr = [[1,2,3], [4,5,6], [7]]

答案

function splitArr(arr, size) {
  var ret = [],tmp = [],count=0;
  for(var i = 0; i < arr.length; i++) {
      tmp.push(arr[i]);
      count += 1;
      if(count === size) {
        ret.push(tmp);
        tmp = [];
        count = 0;
      }
  }
  if(count > 0) {
      ret.push(tmp);
  }
  return ret;
}
// test
var arr = [1,2,3,4,5,6,7];
var ret = splitArr(arr, 3);
console.log(ret);

思考

1.定義ret變量用來當函數返回值。
2.遍歷數組，挨個數組元素推tmp裏，湊夠size個往ret裏推一次且重置tmp與count。
3.最後若是count>0說明有沒湊夠size的數組。在往ret裏推一次。
4.返回ret。
這個題沒什麼說的。常規題目。

浮點數加法

0 .1+ 0.2爲何會產生偏差？怎麼解決偏差問題，實現floatAdd(a,b)

答案

由於都用了一種特殊的浮點數表示規則，0.1二進制表示會有精度丟失問題。
floatAdd(a,b)實現以下

// 方法一
function floatAdd(a, b) {
  return parseFloat((a+b).toFixed(10));
}
// 方法二
function floatAdd2(a, b) {
  // a,b轉換爲字符串
  var aStr = String(a);
  var bStr = String(b);
  // 取小數點後面的部分，可能爲undefined，則設爲空串
  var aDigit = aStr.split('.')[1] || '';
  var bDigit = bStr.split('.')[1] || '';
  // 計算爲了使他們變成整數的最小倍數
  var mult = Math.max(aDigit.length, bDigit.length);
  // 同乘以多少倍，就同除以多少倍
  return (a * Math.pow(10, mult) + b * Math.pow(10, mult)) / Math.pow(10, mult);
}
// test
console.log(floatAdd(0.1, 0.2));
console.log(floatAdd2(0.1, 0.2));

思考

第一次解答採用了第一種方法，是在一本書上看到的方法，被面試官否認了。而後詢問了面試官第二種方法能夠嗎？面試官說那你寫下來。屬於常規的考題。

特別的fn

實現一個fn(callback, wait, arg1, arg2, arg3)的函數，callback在wait秒後調用, arg1~n爲callback參數。

答案

function myFn(callback, fn, ...args) {
  setTimeout(() => {
    callback(...args);
  }, wait);
}

思考

當我這樣寫出代碼後，面試官說直接用了...args這樣啊。其實我想考的是另個，我秒懂了面試官的意思，給出了另外一種寫法Array.prototype.slice.call(arguments, 2)。含義就是摘除callback與wait兩個參數以後的參數。常規考題沒什麼說的。

----------以上爲記得的js的題目-----------------

項目題目

項目主要是根據簡歷的內容隨機提問。

項目優化所作的努力，如何保證代碼的可靠性

個人答案

優化：
webpack懶加載、代碼分隔，異步加載。
靜態資源CDN
可靠性:
Eslint

思考

面試官看起來對於答案不甚滿意，歡迎各位看官補充，給的回答方向大概就是兩塊，優化與可靠性

小程序踩過哪些坑

對答內容

• 答：textArea自動增高的文字溢出問題。
• 問：那最後怎麼解決的。
• 答：官方提了issue無果，改用單行輸入。
• 問：若是是移動端怎麼實現一個自動增高的輸入框。
• 答: contenteditable應該能夠吧？
• 問：（忘記怎麼問了，大概是否認了）
• 答：我算一下元素寬度，而後監聽輸入，除以一行能放的字數。
• 問：那每一行字數都不肯定呢？字符間距若是被樣式改了呢？
• 答：那我沒有什麼更好的答案了。

思考

面試官建議遇到問題不要逃避。我這屬於回答的負面教材。再此建議各位好好準備簡歷上的內容，必定要挑有解決方案的問題。其實這個是我作小程序時候確實有過經驗，不事後來都忘了。被面試官提起，沒想到太多，說了一個。很尷尬。

至於怎麼實現，網上搜了下通常兩種作法，一種是直接使用contenteditable屬性，兼容性還能夠，使用css加下邊框就行了。再一種就是監聽textarea的input事件，處理函數就是監聽滾動條的高度，有滾動條的高度就設置textarea的高度屬性，讓滾動條消失。

vue scoped樣式覆蓋問題

由於簡歷裏提到了覆蓋iView組件庫樣式問題，因此問我如何覆蓋的。涉及到一個style標籤上加scoped的問題

問答狀況

我：
分兩種狀況，
1.組件在模板所屬的dom內，能夠覆蓋。
2.組件在模板所屬的dom外，例如modal會直接追加到body中，覆蓋不掉。
面試官答：應該都不行吧。我記得是。
我：那這個下去試試吧，我記得是能夠的。

思考

這個問題我下來試了下，是能夠的。有小夥伴感興趣的能夠試試。

項目組織問題

面試官問若是說我想吧這個項目某個模塊外包出去，那如何組織項目。

對答狀況

• 我：直接讓他們開發業務組件就行了，開發完後我來給加上路由。
• 面試官：那若是外包方須要訪問store呢，須要訪問router呢。
• 我： emm..那我沒有什麼更好的思路，由於我這邊通常就是gitflow工做流，沒接觸過這裏，涉獵的比較少。臨時遇到這個問題，確實沒什麼好的想法
• 面試官：emm...百度內部好像有個什麼系統。處理這類問題。

思考

這個問題確實是由於自身眼界所限，沒有遇到這樣場景，也就沒有想到這樣場景，以及對應的解決方案。不知有哪位老鐵知道這種通常怎麼處理，不吝賜教哈。

結果

• 面試官：你以爲你答的咋樣
• 我：以爲css這裏沒答好，那個三角形我是作過的，可是給忘了。
• 省略一部分忘記的……
• 面試官：咱們總結下，css是有點弱，js還行，項目思考少一些。你等下吧，我去問問二面願不肯意麪

過了一會……
告知我掛了。送走了我。

總結

雖然此次面試掛了，但總結仍是須要的，首先說說個人感覺：
1.css的問題確實是以前開發過程當中沒有對問題深刻的思考，致使的問題，因此平時寫代碼仍是要多想。
2.簡歷裏體現的東西，要一個一個過一遍，確保當面試官問起來的時候，有話能夠聊。
3.項目經歷這個東西，做爲一個成天圍繞一畝三分地作增刪改查的boy確實有不少硬傷，因此這也是我出去面試，尋求新機會的初衷。
4.先總結這麼多，想到了再繼續補充。

後記

雖然此次沒過，可是仍是指望能加入百度的，固然也挺但願能進阿里、騰訊、頭條、美團、滴滴的，求大佬帶我飛。謹以此文作一次記念，記念本身第一次拿到了百度的面試邀請，而後順利的被掛掉。若是以爲本文對你有用，歡迎點贊或者收藏，同時歡迎各路大佬在評論區積極探討上述的問題或者非上述的問題，共同成長