如何準備面試?

sunseekers發表於2019-01-19

未來幾個月內,將迎來一波人才合理流動。

沒有面試成功的面試經驗卻來分享面試,估計也只有我能做這樣的事情了哈哈。我現在只是在為了面試而準備,在準備的過程中無意間發現自己還有很多不懂的地方,所以拿出來說一說寫一寫。題外話,無論你是否有或者在看機會,我們都應該保持兩個月一次的被面試,是讓我們保持對行情的瞭解,對知識的進一步學習。更是一次學習交流的機會,讓我們不在侷限於目前工作

為什麼要了解瀏覽器工作原理?

前端,不管是pc端還是移動端,都是在最終要在瀏覽器上面執行展示的。所以我們首先應該瞭解的是瀏覽器的工作原理,前端藉助於瀏覽時引擎而展示,如果我們連最基礎瀏覽器工作原理都不太明白,那麼我們如何進行效能優化?如何提高使用者體驗?如何將我們的工作做到極致?你可能會告訴我網上有很多效能優化的方案,隨便找找複製貼上就好的,是的完全可以這樣,沒有任何問題。早期的我就是這樣的,那時候的我可能是並沒有想再前端這個行業長久發展,只是想混口飯吃,混過面試。但是在實際的工作中,我發現了專案的問題,當你請求一個網頁,從請求到頁面渲染要等上30s,你就知道專案專案優化的重要性,等等。現在的我想在前端這個行業走的更久,更遠,或許已經是一種追求了。所以我想和你說去了解了解瀏覽器的工作原理吧?我自己不太懂,來不來這麼好的文章,我推薦一篇,我自己覺得寫的好不錯的

zhuanlan.zhihu.com/p/47407398

好好利用開發工具

前面我說到了瞭解瀏覽器工作原理,我假設你已經瞭解了瀏覽器工作原理了,那麼接下來我們就可以有針對性開展進行網頁的效能。網上說了那麼多可以優化的方案,我們可以一一嘗試一下,是的,完全沒有任何問題。但是如果你想更加精確準確的瞭解到底是哪裡耗時多,影響了最終的展示?想對症下藥的話,我建議你還是好好利用開發工具,開發工具精確無誤告訴你哪裡需要優化,可以進行如何優化。不一定會比網上好,但是一定不會差。我不會寫一篇文章告訴你如何利用開發工具,我寫不來那麼好的文章,這東西有時效性,我建議你去看官方文件,人家寫的比我好多了,管用還是實時更新的

developers.google.com/web/tools/c…

說說我刷的面試題

我是在準備面試,是在準備喲,而不是已經面試了。多麼希望自己要不要面試直接入職呀!歡迎有經驗的評論指點,好讓我順利面試完,入職公司。哈哈 前面說了那麼多廢話,好好利用開發工具,瞭解瀏覽器工作原理,這些可能面試觀都不會問你。

  1. 偽類

在寫樣式的時候,或許還用 class ,id,但是在我的工作中我很少用到 id ,用 class 用的多,但是有時候會詞窮,不知道要寫怎麼語義話的名字。這時候我喜歡用偽類,方便。偽類和偽元素是有區別的,不要混淆。

p:first-child => 表示在一組兄弟元素中的第一個元素。

p:nth-child(1) => 這個 CSS 偽類首先找到所有當前元素(p)的子元素底下的第一個

我用這兩個用的比較多,所以就直說他了,你想要了解更多,看文件

developer.mozilla.org/zh-CN/docs/…

  1. 重繪和迴流(重排)

不同的人會給不同的組合,但是實際上卻就是一個意思,網上也有很多很不錯的答案來解釋,我就不一一貼連結了,就說說自己最簡單粗暴的理解

重繪:頁面屬性發生變化(隻影響外觀,不影響佈局),比如顏色改變,不影響佈局吧

重排(迴流):頁面結構發生變化(會發生很昂貴的代價,影響佈局),比如寬度改變要影響佈局吧

  1. ++之前和++之後的區別

a++ : 先用a的原值,然後a加1;

++a :先給a加1,然後用a的新值

  1. [] == [] //false,都是物件,長得一樣,可是確引用了不同的地址,所以不相等 [] == ![] //true,這個解釋就好像有點麻煩了,![]會轉化為一個boolean進行比較。所以就相等了, 上面都是我自己瞎扯的,可以自行https://www.google.com/ 或者https://www.baidu.com

  2. ['1','2','3'].map(parseInt)?? [1, NaN, NaN] 應該是和 parseInt() 的第二個引數有關係 parseInt 的基數 radix,導致出現超範圍的 radix 賦值和不合法的進位制解析,才會返回 NaN

  3. let a = {},b={key:1},c={key:2}; a[b] = 123; a[c] = 456; a[b]?? 答案:a[b] = 456 因為b,c是變數,a[b],a[c]相當於a[object object],所以是引用了同一段地址

  4. 多個陣列合並之後去重

建議自己先寫然後在看我的

利用物件屬性的唯一性去重

function uniqueArray(arr,...rest){
        let array = arr.concat(...rest)
        let obj = {}
        let result = []
        array.forEach(item=>{
          obj[item]?'':obj[item]=true && result.push(item)
        })
    return result
      }
  uniqueArray([1,2],[3,4,2],[9,0,2])
複製程式碼
function uniqueArray(arr,...rest){
        let array = arr.concat(...rest)
        let obj = {}
        return array.reduce((pre,next)=>{
          obj[next]?'':obj[next]=true&&pre.push(next)
          return pre
        },[])
      }
  uniqueArray([1,2],[3,4,2],[9,0,2])
複製程式碼

陣列方法去重

function uniqueArray(arr,...rest){
      let array = arr.concat(...rest)
      let uniqueArray = []
  array.forEach((item,index)=>{
    if(array.indexOf(item)==index){
      uniqueArray.push(item)
    }
  })
  return uniqueArray
    }
uniqueArray([1,2],[3,4,2],[9,0,2])
複製程式碼

es6 去重

function uniqueArray(arr,...rest){
      let array = arr.concat(...rest)
     let map = new Map()
  array.forEach(item=>{
    if(!map.has(item)){
      map.set(item,item)
    }
  })
  console.log(map.values())
  return [...map.values()]
    }
uniqueArray([1,2],[3,4,2],[9,0,2])
複製程式碼

這道題很基礎,但是我去覺得他涉及到的知識面不少,還可以擴充套件

擴充套件,陣列物件根據指定的屬性去重?確保唯一性???這個可以自己思考,利用上面的方法可實現,這個是上面的升級版。貼一個我以前寫的連結

juejin.im/post/5bc897…

  1. 陣列的 reduce

之前沒怎麼用 reduce ,不知道原來 reduce 可有這麼強大,上面嘗試之後,去了解了一下 reduce 的文件,貼連結

developer.mozilla.org/zh-CN/docs/…

如果你看連結,就不要看我接下來的廢話了

二維陣列轉化為一維陣列

[[2,3],[4,5],[0]].reduce((prev,next)=>{
    return prev.concat(next)
},[])
複製程式碼

計算陣列中每個元素出現的次數

var names = ['Alice', 'Bob', 'Tiff', 'Bruce', 'Alice'];

var countedNames = names.reduce(function (allNames, name) { 
  if (name in allNames) {
    allNames[name]++;
  }
  else {
    allNames[name] = 1;
  }
  return allNames;
}, {});
複製程式碼

按屬性對 object 分類節

var people = [
  { name: 'Alice', age: 21 },
  { name: 'Max', age: 20 },
  { name: 'Jane', age: 20 }
];

function groupBy(objectArray, property) {
  return objectArray.reduce(function (acc, obj) {
    var key = obj[property];
    if (!acc[key]) {
      acc[key] = [];
    }
    acc[key].push(obj);
    return acc;
  }, {});
}

var groupedPeople = groupBy(people, 'age');
複製程式碼

陣列去重

let arr = [1,2,1,2,3,5,4,5,3,4,4,4,4];
let result = arr.sort().reduce((init, current)=>{
    if(init.length===0 || init[init.length-1]!==current){
        init.push(current);
    }
    return init;
}, []);
複製程式碼

好了,暫時就先寫到這裡了,以後在慢慢更。最近在準備面試應該有很多要慢慢寫的

我也不例外的在準備,看是否有更好的機會。請推薦 github.com/sunseekers 哈哈

相關文章