web 前端

sunseekers發表於2019-01-19
Web前端

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

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

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

前端，不管是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])
複製程式碼
function unique(array) {
 return Array.from(new Set(array));
}
複製程式碼
function unique(array) {
  return [...new Set(array)];
}
var unique = (a) => [...new Set(a)]
複製程式碼

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

陣列去重的方法還有很多，比如排序去重+indexOf，filter+indexOf，排序+filter

github.com/mqyqingfeng…

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

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 哈哈

相關文章