個人前端2019面試指引

時間 2019-12-01

標籤個人前端面試指引欄目快樂工作简体版

原文原文鏈接

固然也能夠看個人 github 的 issues 歡迎 star!css

前言

其實，如今已經總結的夠多了，你們能夠看看：html

可是看過了仍是很容易就忘了，仍是得本身敲一遍好。就總結一些本身有問題的地方吧前端

本身遇到以及整理的一些點：react

1. this 的指向：

const a = {
  count:1,
  b:{
    count: 2,
    getCount: function(){
      console.log(this.count);
    }
  }
}

const getb = a.b.getCount
console.log(getb())
console.log(a.b.getCount()) // 這裏要注意不要被迷惑了 
複製代碼

理解的話，首先要明確的是 this 是在函數裏面，在函數調用時動態指定的，指向當前函數（方法）的執行棧（上下文）。能夠查看理解 JavaScript 中函數調用和 thiswebpack

2. 正則匹配判斷

一個字符串只由[](){}這幾種構成，要求寫一個函數 isMatch(str) 匹配以下格式（1）({[())]} （2）([{({[]})})] ，結果返回 booleangit

分析：要求有兩個github

它們是成對出現的
[{(分別都是在 }])的前面後來的代碼實現：

function updateStr(str, reg) {
  let isLoop = true;
  let result = str;
  while (isLoop) {
    result = result.replace(reg, (val, str1, str2) => {
      val = val.substring(1, val.length - 1);
      return val;
    });
    if (!reg.test(result)) {
      isLoop = false;
    }
  }
  return result;
};

function isMatch(str) {
  const reg1 = /(\()[\{\}\(\[\]]*(\))/; // 每次匹配一個 (),而後去除
  const reg2 = /(\{)[\(\)\{\[\]]*(\})/;// 每次匹配一個 {},而後去除
  const reg3 = /(\[)[\[\(\)\{\}]*(\])/;// 每次匹配一個 [],而後去除
  const REGS = [reg1, reg2, reg3];
  const result = REGS.reduce((total, reg, index) => {
    return updateStr(total, reg);
  }, str);
  return !result;
}

// 測試
let strArray = ['}([(())]){', '{[{([(())])})', '{{[[{([(())])}))'];
let result = strArray.map(val => {
  return isMatch(val);
});
console.log(result);


<!--固然在 LeetCode 上也有相似的題目，經過棧的特性來解決的-->
// https://leetcode.com/problems/valid-parentheses/submissions/1
function isMatch(str) {
  let map = {
    '(': -1,
    ')': 1,
    '[': -2,
    ']': 2,
    '{': -3,
    '}': 3
  };
  let stack = [];
  for (let i =0; i < str.length; i++){
    if(map[str[i]] < 0){
      stack.push(str[i]);
    }else{
      let last = stack.pop();
      if(map[last] + map[str[i]] !==0) return false;
    }
  } 
  return stack.length <= 0;
}

複製代碼

3. 實現一個 LazyMan 的對象

要求以下web

LazyMan('Tony');
// Hi I am Tony

LazyMan('Tony').sleep(10).eat('lunch');
// Hi I am Tony
// 等待了10秒...
// I am eating lunch

LazyMan('Tony').eat('lunch').sleep(10).eat('dinner');
// Hi I am Tony
// I am eating lunch
// 等待了10秒...
// I am eating diner

LazyMan('Tony').eat('lunch').eat('dinner').sleepFirst(5).sleep(10).eat('junk food');
// Hi I am Tony
// 等待了5秒...
// I am eating lunch
// I am eating dinner
// 等待了10秒...
// I am eating junk food
複製代碼

關鍵點：面試

實現一個事件隊列，每次 shift() 調用一個
鏈式調用

答案算法

4. 將一維數組經過 pid 轉成多維數組：

要求：

const previous = [{
    name: "1",
    id: 1,
    pid: 0
  },
  {
    name: "2",
    id: 2,
    pid: 1
  },
  {
    name: "3",
    id: 3,
    pid: 2
  }]
  
  const result = [{
    name: "1",
    id: 1,
    pid: 0,
    children:[{
         name: "2",
        id: 2,
        pid: 1
    }]
  },{
    name: "3",
    id: 3,
    pid: 2  
  }
  ]
複製代碼

要點：

遞歸
判斷每個 item 是否屬於 tree 中元素
找到它的 parent，並把 item 添加到它的 children 中，返回一個新的 tree

其實就是樹的不一樣表現形式

代碼實現能夠看這裏 codesandbox.io/s/nw5xlozk6…

5. 模擬實現加法器

2個正整數字符串的相加，即 '1'+'19' --> '20',注意考慮超長字符串相加

思路：

超級長，不能用 parseInt，它有最大值的限制 Number.MAX_VALUE

JavaScript 類型系統——Number 數字類型

模擬實現一個十進制的加法器
能夠擴展支持任意進制的運算

6. AMD，CMD，CommonJs，ES6 Module：解決原始無模塊化的痛點

AMD：requirejs 在推廣過程當中對模塊定義的規範化產出，提早執行，推崇依賴前置
CMD：seajs 在推廣過程當中對模塊定義的規範化產出，延遲執行，推崇依賴就近
CommonJs：模塊輸出的是一個值的 copy，運行時加載，加載的是一個對象（module.exports 屬性），該對象只有在腳本運行完纔會生成
ES6 Module：模塊輸出的是一個值的引用，編譯時輸出接口，ES6 模塊不是對象，它對外接口只是一種靜態定義，在代碼靜態解析階段就會生成。

7. HTTP 緩存有哪幾種？

關鍵： ETag、CacheControl、Expires 參考 HTTP緩存控制小結

8. 一些 webpack -- 按需加載？構建速度？

參考

9. 翻轉二叉樹

JavaScript 二叉搜索樹以及實現翻轉二叉樹

10. 本身遇到的css梳理

11. js 基礎梳理 -- 冴羽大大的blog

12. web 安全

13. 靜態資源放置於獨立域名之下

啓用新的一級域名，每次請求瀏覽器不會攜帶cookie。這對於cookie內容比較大，而且流量大的網站會省去很多寬帶費用。同時這也解惑了爲何不用二三級域名。
動靜分離。靜態資源與動態內容分離，有利於部署於CDN，減輕web服務器壓力
HTTP協議對同一個域名的同時下載線程數有限制。主要是爲了優化下載速度，防止同一域名下下載線程數過多，致使下載速度變慢。各個瀏覽器都會遵照這個規定，可是限制的數目可能不一致。基於這個緣由，可將資源部署於不一樣的域名，以達到最大化併發下載。
靜態資源獨立部署，爲全局產品服務。這屬於業務劃分的範疇了。好比taobao.com和tmll.com都會用到tbcdn.cn上的靜態資源，這些資源沒必要從屬於某個產品。
接第4點緣由，有利於最大化利用客戶端緩存。好比訪問taobao.com，緩存了tbcdn.cn上的某個js文件，以後再訪問tmll.com時，也用到此js文件，沒必要再從tbcdn.cn上下載，直接用客戶端緩存便可。

同時，就已經減輕了每臺服務器的壓力，服務器越多，每一個服務器壓力就越小