前端面試題全面整理-帶解析 涵蓋（css、js、瀏覽器、vue、react、移動web、前端性能、算法、node）

前言

上期整理了一些vue面試題，本期整理總結這些前端面試題，涵蓋面很廣，而且面的都是知名大廠，因此這些題仍是頗有表明性的，都掌握之後一面基礎面應該沒什麼問題，二面也能應付大半，奉上：

css相關

1. 萬能居中

1.margin: 0 auto;水平
2.text-align: center;水平
3.行高，垂直
4.表格，center,middle；水平垂直
5.display:table-cell；模擬表格，all
6.絕對定位，50%減自身寬高
7.絕對定位，上下左右全0，margin:auto
8.絕對定位加相對定位。不須要知道寬高
9.IE6，IE7：給父元素設一個font-size:高度/1.14,vertical-align:middle

2. BFC優化

塊格式化上下文, 特性:

• 使 BFC 內部浮動元素不會處處亂跑；
• 和浮動元素產生邊界。

3. 盒模型哪兩種模式？什麼區別？如何設置

• 標準模式: box-sizing: content-box; 寬高不包括內邊距和邊框
• 怪異模式: box-sizing: border-box

4. 經常使用清除浮動的方法，如不清除浮動會怎樣？

當父元素不給高度的時候，內部元素不浮動時會撐開, 而浮動的時候，父元素變成一條線, 形成塌陷.

• 額外標籤法（在最後一個浮動標籤後，新加一個標籤，給其設置clear：both；）（不推薦）
• 父元素添加overflow:hidden; (觸發BFC)
• 使用after僞元素清除浮動（推薦使用）
• 使用before和after雙僞元素清除浮動

5. 刪格化的原理

好比antd的row和col, 將一行等分爲24份, col是幾就佔幾份, 底層按百分比實現; 結合媒體查詢, 能夠實現響應式

6. 純css實現三角形

// 經過設置border
.box
        {
            width:0px;
            height:0px;

            border-top:50px solid rgba(0,0,0,0);
            border-right:50px solid  rgba(0,0,0,0);
            border-bottom:50px solid green;
            border-left:50px solid  rgba(0,0,0,0);
            }

複製代碼

7. 高度不定，寬100%，內一div高不肯定，如何實現垂直居中？

• verticle-align: middle;
• 絕對定位50%加translateY(-50%)
• 絕對定位，上下左右全0，margin:auto

8. 至少兩種方式實現自適應搜索

• rem, em
• 百分比
• 媒體查詢
• bs, antd等的柵格佈局

9. 設置一段文字的大小爲6px

• 谷歌最小12px, 其餘瀏覽器能夠更小
• 經過transform: scale實現

10. css菊花圖

四個小圓點一直旋轉

// 父標籤
animation: antRotate 1.2s infinite linear;
// 子標籤
animation: antSpin 1s infinite linear;
@keyframe antSpin {
  to {
    opacity: 1 
  }
}
@keyframe antRotate {
  to {
    transform: rotate(405)
  }
}
// animation-delay: 逐個延遲0.4s

複製代碼

11. 關於em

<div style="font-size: 20px">
      123
      <div style="font-size: 2em;width: 2em">456</div>
 </div>
// 此時子元素的font-size爲40px, 寬度爲80px(還要乘以子元素font-size的係數)

複製代碼

12. 關於vh, vw

vw：viewpoint width，視窗寬度，1vw等於視窗寬度的1%。
vh：viewpoint height，視窗高度，1vh等於視窗高度的1%。
vmin：vw和vh中較小的那個。
vmax：vw和vh中較大的那個。

13. Flex佈局

• flex-direction控制主副軸
• flex-wrap控制換行(默認不換行)
• flex-flow是上兩個的結合
• justify-content主軸對齊方式
• align-items交叉軸對齊方式

14. overflow原理

• overflow: hidden能清除塊內子元素的浮動影響. 由於該屬性進行超出隱藏時須要計算盒子內全部元素的高度, 因此會隱式清除浮動
• 建立BFC條件(知足一個):
  • float的值不爲none；
  • overflow的值不爲visible；
  • position的值爲fixed / absolute；
  • display的值爲table-cell / table-caption / inline-block / flex / inline-flex。

15. 實現自適應的正方形:

• 使用vw, vh
• width百分比, height: 0, padding-top(bottom): 50%

16. 標準模式和怪異模式

• document.compatMode屬性能夠判斷是不是標準模式，當 document.compatMode爲「CSS1Compat」，是標準模式，「BackCompat」是怪異模式。
• 怪異模式是爲了兼容舊版本的瀏覽器, 由於IE低版本document.documentElement.clientWidth獲取不到
• 怪異模式盒模型: box-sizing: border-box; 標準模式: box-sizing: content-box

17. CSS3實現環形進度條

兩個對半矩形遮罩, 使用rotate以及overflow: hidden進行旋轉

18. css優先級

選擇器的特殊性值表述爲4個部分，用0,0,0,0表示。

• ID選擇器的特殊性值，加0,1,0,0。
• 類選擇器、屬性選擇器或僞類，加0,0,1,0。
• 元素和僞元素，加0,0,0,1。
• 通配選擇器*對特殊性沒有貢獻，即0,0,0,0。
• 最後比較特殊的一個標誌!important（權重），它沒有特殊性值，但它的優先級是最高的，爲了方便記憶，能夠認爲它的特殊性值爲1,0,0,0,0。

JS相關

1. ES5和ES6繼承方式區別

• ES5定義類以函數形式, 以prototype來實現繼承
• ES6以class形式定義類, 以extend形式繼承

2. Generator瞭解

ES6 提供的一種異步編程解決方案, Generator 函數是一個狀態機，封裝了多個內部狀態。

function* helloWorldGenerator() {
  yield 'hello';
  yield 'world';
  return 'ending';
}

var hw = helloWorldGenerator();

複製代碼

調用後返回指向內部狀態的指針, 調用next()纔會移向下一個狀態, 參數:

hw.next()
// { value: 'hello', done: false }

hw.next()
// { value: 'world', done: false }

hw.next()
// { value: 'ending', done: true }

hw.next()
// { value: undefined, done: true }

複製代碼

3. 手寫Promise實現

var myPromise = new Promise((resolve, reject) => {
  // 須要執行的代碼
  ...
  if (/* 異步執行成功 */) {
    resolve(value)
  } else if (/* 異步執行失敗 */) {
    reject(error)
  }
})

myPromise.then((value) => {
  // 成功後調用, 使用value值
}, (error) => {
  // 失敗後調用, 獲取錯誤信息error
})

複製代碼

4. Promise優缺點

• 優勢: 解決回調地獄, 對異步任務寫法更標準化與簡潔化
• 缺點: 首先，沒法取消Promise，一旦新建它就會當即執行，沒法中途取消; 其次，若是不設置回調函數，Promise內部拋出的錯誤，不會反應到外部; 第三，當處於pending狀態時，沒法得知目前進展到哪個階段（剛剛開始仍是即將完成).
  極簡版promise封裝:

function promise () {
  this.msg = '' // 存放value和error
  this.status = 'pending'
  var that = this
  var process = arguments[0]

  process (function () {
    that.status = 'fulfilled'
    that.msg = arguments[0]
  }, function () {
    that.status = 'rejected'
    that.msg = arguments[0]
  })
  return this
}

promise.prototype.then = function () {
  if (this.status === 'fulfilled') {
    arguments[0](this.msg)
  } else if (this.status === 'rejected' && arguments[1]) {
    arguments[1](this.msg)
  }
}

複製代碼

5. 觀察者模式

又稱發佈-訂閱模式, 舉例子說明.
實現: 發佈者管理訂閱者隊列, 並有新消息推送功能. 訂閱者僅關注更新就行

6. 手寫實現bind

Function.prototype.bind = function () {
   // 保存原函數
  var self = this
  // 取出第一個參數做爲上下文, 至關於[].shift.call(arguments)
  var context = Array.prototype.shift.call(arguments)
  // 取剩餘的參數做爲arg; 由於arguments是僞數組, 因此要轉化爲數組才能使用數組方法
  var arg = Array.prototype.slice.call(arguments)
  // 返回一個新函數
  return function () {
    // 綁定上下文並傳參
    self.apply(context, Array.prototype.concat.call(arg, Array.prototype.slice.call(arguments)))
  }
}

複製代碼

7. 手寫實現4種繼承

function Father () {}
function Child () {}
// 1\. 原型繼承
Child.prototype = new Father()
// 2\. 構造繼承
function Child (name) {
  Father.call(this, name)
}
// 3\. 組合繼承
function Child (name) {
  Father.call(this, name)
}
Child.prototype = new Father()
// 4\. 寄生繼承
function cloneObj (o) {
  var clone = object.create(o)
  clone.sayName = ...
  return clone
}
// 5\. 寄生組合繼承
// 6\. ES6 class extend繼承

複製代碼

8. css菊花圖

四個小圓點一直旋轉

// 父標籤
animation: antRotate 1.2s infinite linear;
// 子標籤
animation: antSpin 1s infinite linear;
@keyframe antSpin {
  to {
    opacity: 1 
  }
}
@keyframe antRotate {
  to {
    transform: rotate(405)
  }
}
// animation-delay: 逐個延遲0.4s

複製代碼

9. http狀態碼

• 1**: 服務器收到請求, 需請求者進一步操做
• 2**: 請求成功
• 3**: 重定向, 資源被轉移到其餘URL了
• 4**: 客戶端錯誤, 請求語法錯誤或沒有找到相應資源
• 5**: 服務端錯誤, server error
• 304: Not Modified. 指定日期後未修改, 不返回資源

10. Object.create實現（原型式繼承，特色：實例的proto指向構造函數自己）

11. async和await：

• Generator函數的語法糖，將*改爲async，將yield換成await。
• 是對Generator函數的改進, 返回promise。
• 異步寫法同步化，遇到await先返回，執行完異步再執行接下來的.
• 內置執行器, 無需next()

12. 算法和數據結構：

• 算法：
  解決具體問題所須要的解決方法。執行效率最快的最優算法。時間複雜度。輸入，輸出，有窮性，肯定性，可行性。冒泡排序，二叉樹遍歷，最長迴文，二分查找，指針，鏈表等，堆棧，隊列等。力扣，codewar，算法導論。
• 數據結構：
  邏輯結構：集合、線性、樹形、圖形結構
  物理結構：順序、鏈式存儲結構

13. 封裝JSONP

image

function jsonp ({url, param, callback}) {
  return new Promise((resolve, reject) => {
    var script = document.createElement('script')
    window.callback = function (data) {
      resolve(data)
      document.body.removeChild('script')
    }
    var param = {...param, callback}
    var arr = []
    for (let key in param) {
      arr.push(`${key}=${param[key]}`)
    }
    script.src = `${url}?${arr.join('&')}`
    document.body.appendChild(script)
  })
}

複製代碼

14. 手動實現map(forEach以及filter也相似)

// for循環實現
Array.prototype.myMap = function () {
  var arr = this
  var [fn, thisValue] = Array.prototype.slice.call(arguments)
  var result = []
  for (var i = 0; i < arr.length; i++) {
    result.push(fn.call(thisValue, arr[i], i, arr))
  }
  return result
}
var arr0 = [1, 2, 3]
console.log(arr0.myMap(v => v + 1))

// forEach實現(reduce相似)
Array.prototype.myMap = function (fn, thisValue) {
  var result = []
  this.forEach((v, i, arr) => {
    result.push(fn.call(thisValue, v, i, arr))
  })
  return result
}
var arr0 = [1, 2, 3]
console.log(arr0.myMap(v => v + 1))

複製代碼

15. js實現checkbox全選以及反選

<body>
    <button id="other">反選</button>
    <input type="checkbox" id="all" />全選
    <input type="checkbox" class="check" />1
    <input type="checkbox" class="check" />2
    <input type="checkbox" class="check" />3
    <script>
      var checkbox = document.getElementsByClassName('check')
      var checkAll = document.getElementById('all')
      var checkOther = document.getElementById('other')
      checkAll.onclick = function() {
        var flag = true
        for (var i = 0; i < checkbox.length; i++) {
          if (!checkbox[i].checked) flag = false
        }
        if (flag) {
          for (var i = 0; i < checkbox.length; i++) {
            checkbox[i].checked = false
          }
        } else {
          for (var i = 0; i < checkbox.length; i++) {
            checkbox[i].checked = true
          }
        }
      }
      checkOther.onclick = function() {
        for (var i = 0; i < checkbox.length; i++) {
          checkbox[i].checked = !checkbox[i].checked
        }
      }
    </script>
  </body>

複製代碼

16. 對原型鏈的理解？prototype上都有哪些屬性

• 在js裏，繼承機制是原型繼承。繼承的起點是 對象的原型（Object prototype）。
• 一切皆爲對象，只要是對象，就會有 proto 屬性，該屬性存儲了指向其構造的指針。
• Object prototype也是對象，其 proto 指向null。
• 對象分爲兩種：函數對象和普通對象，只有函數對象擁有『原型』對象（prototype）。
• prototype的本質是普通對象。
• Function prototype比較特殊，是沒有prototype的函數對象。
• new操做獲得的對象是普通對象。
• 當調取一個對象的屬性時，會先在自己查找，若無，就根據 proto 找到構造原型，若無，繼續往上找。最後會到達頂層Object prototype，它的 proto 指向null，均無結果則返回undefined，結束。
• 由 proto 串起的路徑就是『原型鏈』。
• 經過prototype能夠給全部子類共享屬性

17. 爲何使用繼承

一般在通常的項目裏不須要,由於應用簡單,但你要用純js作一些複雜的工具或框架系統就要用到了,好比webgis、或者js框架如jquery、ext什麼的,否則一個幾千行代碼的框架不用繼承得寫幾萬行,甚至還沒法維護

18. setTimeout時間延遲爲什麼不許

單線程, 先執行同步主線程, 再執行異步任務隊列

19. 事件循環述，宏任務和微任務有什麼區別？

• 先主線程後異步任務隊列
• 先微任務再宏任務

20. let const var做用域

塊級做用域, 暫時性死區

21. 節流和防抖

• 函數節流是指必定時間內js方法只跑一次。好比人的眨眼睛，就是必定時間內眨一次。這是函數節流最形象的解釋。

// 函數節流   滾動條滾動
var canRun = true;
document.getElementById("throttle").onscroll = function(){
    if(!canRun){
        // 判斷是否已空閒，若是在執行中，則直接return
        return;
    }

    canRun = false;
    setTimeout(function(){
        console.log("函數節流");
        canRun = true;
    }, 300);
};

複製代碼

• 函數防抖是指頻繁觸發的狀況下，只有足夠的空閒時間，才執行代碼一次。好比生活中的坐公交，就是必定時間內，若是有人陸續刷卡上車，司機就不會開車。只有別人沒刷卡了，司機纔開車。

// 函數防抖
var timer = false;
document.getElementById("debounce").onscroll = function(){
    clearTimeout(timer); // 清除未執行的代碼，重置回初始化狀態

    timer = setTimeout(function(){
        console.log("函數防抖");
    }, 300);
};  

複製代碼

22. 實現一個sleep函數

// 這種實現方式是利用一個僞死循環阻塞主線程。由於JS是單線程的。因此經過這種方式能夠實現真正意義上的sleep()。
function sleep(delay) {
  var start = (new Date()).getTime();
  while ((new Date()).getTime() - start < delay) {
    continue;
  }
}

function test() {
  console.log('111');
  sleep(2000);
  console.log('222');
}

test()

複製代碼

23. 閉包

• 概念: 內層函數可以訪問外層函數做用域的變量
• 缺點: 引發內存泄漏（釋放內存）
• 做用:
  • 使用閉包修正打印值
  • 實現柯里化
  • 實現node commonJs 模塊化, 實現私有變量
  • 保持變量與函數活性, 可延遲迴收和執行

24. Immutable.js

Facebook出品, 倡導數據的不可變性, 用的最多就是List和Map.

25. js實現instanceof

// 檢測l的原型鏈（__proto__）上是否有r.prototype，如有返回true，不然false
function myInstanceof (l, r) {
  var R = r.prototype
  while (l.__proto__) {
    if (l.__proto__ === R) return true
  }
  return false
}

複製代碼

27. ES6的模塊引入和CommonJs區別

28. 嚴格模式

// 嚴格模式下, 隱式綁定丟失後this不會指向window, 而是指向undefined
      'use strict'
      var a = 2
      var obj = {
        a: 1,
        b: function() {
          // console.log(this.a)
          console.log(this)
        }
      }
      var c = obj.b
      c() // undefined

複製代碼

29. fetch, axios區別

30. typescript缺點

• 並非嚴格意義的js的超集, 與js不徹底兼容, 會報錯
• 更多的限制, 是一種桎梏
• 有些js第三方庫沒有dts, 有問題

31. 構造函數實現原理

• 構造函數中沒有顯示的建立Object對象, 實際上後臺自動建立了
• 直接給this對象賦值屬性和方法, this即指向建立的對象
• 沒有return返回值, 後臺自動返回了該對象

// 模擬構造函數實現
var Book = function(name) {
          this.name = name;
        };

        //正經常使用法
        var java = new Book(‘Master Java’);

        //使用代碼模擬，在非IE瀏覽器中測試，IE瀏覽器不支持
        var python = {};
        python.__proto__ = Book.prototype;
        Book.call(python, 'Master Python');

複製代碼

32. for in 和 for of區別

• for in遍歷數組會遍歷到數組原型上的屬性和方法, 更適合遍歷對象
• forEach不支持break, continue, return等
• 使用for of能夠成功遍歷數組的值, 而不是索引, 不會遍歷原型
• for in 能夠遍歷到myObject的原型方法method,若是不想遍歷原型方法和屬性的話，能夠在循環內部判斷一下,hasOwnPropery方法能夠判斷某屬性是不是該對象的實例屬性

33. JS實現併發控制:

使用消息隊列以及setInterval或promise進行入隊和出隊

34. ajax和axios、fetch的區別

35. promise.finally實現

Promise.prototype.finally = function (callback) {
  let P = this.constructor;
  return this.then(
    value  => P.resolve(callback()).then(() => value),
    reason => P.resolve(callback()).then(() => { throw reason })
  );
};

複製代碼

瀏覽器網絡相關

1. reflow(迴流)和repaint(重繪)優化

image

• 瀏覽器渲染過程: DOM tree, CSS tree --> Render tree --> Paint
• DOM tree根節點爲html
• 渲染從瀏覽器左上角到右下角
• 第一次打開頁面至少觸發一次重繪和迴流, 結構如寬高位置變化時, 觸發reflow迴流;非結構如背景色變化時, 觸發repaint重繪. 兩者都會形成體驗不佳
• 如何減小重繪和迴流?
  • 經過classname或cssText一次性修改樣式, 而非一個一個改
  • 離線模式: 克隆要操做的結點, 操做後再與原始結點交換, 相似於虛擬DOM
  • 避免頻繁直接訪問計算後的樣式, 而是先將信息保存下來
  • 絕對佈局的DOM, 不會形成大量reflow
  • div不要嵌套太深, 不要超過六層

2.一個頁面從輸入 URL 到頁面加載顯示完成，這個過程當中都發生了什麼？

• 瀏覽器根據請求的URL交給DNS域名解析，找到真實IP，向服務器發起請求；
• 服務器交給後臺處理完成後返回數據，瀏覽器接收文件（HTML、JS、CSS、圖象等）；
• 瀏覽器對加載到的資源（HTML、JS、CSS等）進行語法解析，創建相應的內部數據結構（如HTML的DOM Tree）；
• 載入解析到的資源文件，渲染頁面，完成。

3.localStorage 與 sessionStorage 與cookie的區別總結

• 共同點: 都保存在瀏覽器端, 且同源
• localStorage 與 sessionStorage 統稱webStorage,保存在瀏覽器,不參與服務器通訊,大小爲5M
• 生命週期不一樣: localStorage永久保存, sessionStorage當前會話, 均可手動清除
• 做用域不一樣: 不一樣瀏覽器不共享local和session, 不一樣會話不共享session
• Cookie: 設置的過時時間前一直有效, 大小4K.有個數限制, 各瀏覽器不一樣, 通常爲20個.攜帶在HTTP頭中, 過多會有性能問題.可本身封裝, 也可用原生

4.瀏覽器如何阻止事件傳播，阻止默認行爲

• 阻止事件傳播(冒泡): e.stopPropagation()
• 阻止默認行爲: e.preventDefault()

5.虛擬DOM方案相對原生DOM操做有什麼優勢，實現上是什麼原理？

虛擬DOM可提高性能, 無須總體從新渲染, 而是局部刷新.
JS對象, diff算法

6.瀏覽器事件機制中事件觸發三個階段

• 事件捕獲階段: 從dom樹節點往下找到目標節點, 不會觸發函數
• 事件目標處理函數: 到達目標節點
• 事件冒泡: 最後從目標節點往頂層元素傳遞, 一般函數在此階段執行.
  addEventListener第三個參數默認false(冒泡階段執行),true(捕獲階段執行).
  阻止冒泡見以上方法

7.什麼是跨域？爲何瀏覽器要使用同源策略？你有幾種方式能夠解決跨域問題？瞭解預檢請求嘛？

• 跨域是指一個域下的文檔或腳本試圖去請求另外一個域下的資源

• 防止XSS、CSFR等攻擊, 協議+域名+端口不一樣

• jsonp; 跨域資源共享（CORS）(Access control); 服務器正向代理等

  

  image

• 預檢請求: 需預檢的請求要求必須首先使用 OPTIONS 方法發起一個預檢請求到服務器，以獲知服務器是否容許該實際請求。"預檢請求「的使用，能夠避免跨域請求對服務器的用戶數據產生未預期的影響

8.瞭解瀏覽器緩存機制嗎？

• 瀏覽器緩存就是把一個已經請求過的資源拷貝一份存儲起來，當下次須要該資源時，瀏覽器會根據緩存機制決定直接使用緩存資源仍是再次向服務器發送請求.
• from memory cache ; from disk cache
• 做用: 減小網絡傳輸的損耗以及下降服務器壓力。
• 優先級: 強制緩存 > 協商緩存; cache-control > Expires > Etag > Last-modified

9.爲何操做 DOM 慢?

DOM自己是一個js對象, 操做這個對象自己不慢, 可是操做後觸發了瀏覽器的行爲, 如repaint和reflow等瀏覽器行爲, 使其變慢

10.什麼狀況會阻塞渲染？

• js腳本同步執行
• css和圖片雖然是異步加載, 但js文件執行需依賴css, 因此css也會阻塞渲染

11.如何判斷js運行在瀏覽器中仍是node中？

判斷有無全局對象global和window

12.關於web以及瀏覽器處理預加載有哪些思考？

圖片等靜態資源在使用以前就提早請求
資源使用到的時候能從緩存中加載, 提高用戶體驗
頁面展現的依賴關係維護

13.http多路複用

• Keep-Alive: Keep-Alive解決的核心問題：必定時間內，同一域名屢次請求數據，只創建一次HTTP請求，其餘請求可複用每一次創建的鏈接通道，以達到提升請求效率的問題。這裏面所說的必定時間是能夠配置的，無論你用的是Apache仍是nginx。
• 解決兩個問題: 串行文件傳輸(採用二進制數據幀); 鏈接數過多(採用流, 並行傳輸)

14. http和https：

• http: 最普遍網絡協議，BS模型，瀏覽器高效。
• https: 安全版，經過SSL加密，加密傳輸，身份認證，密鑰

1. https相對於http加入了ssl層, 加密傳輸, 身份認證;
2. 須要到ca申請收費的證書;
3. 安全可是耗時多，緩存不是很好;
4. 注意兼容http和https;
5. 鏈接方式不一樣, 端口號也不一樣, http是80, https是443

15. CSRF和XSS區別及防護

16. cookie可設置哪些屬性？httponly?

chrome控制檯的application下可查看:

image

• name　　字段爲一個cookie的名稱。
• value　　字段爲一個cookie的值。
• domain　　字段爲能夠訪問此cookie的域名。
• path　　字段爲能夠訪問此cookie的頁面路徑。 好比domain是abc.com,path是/test，那麼只有/test路徑下的頁面能夠讀取此cookie。
• expires/Max-Age 　　字段爲此cookie超時時間。若設置其值爲一個時間，那麼當到達此時間後，此cookie失效。不設置的話默認值是Session，意思是cookie會和session一塊兒失效。當瀏覽器關閉(不是瀏覽器標籤頁，而是整個瀏覽器) 後，此cookie失效。
• Size　　字段 此cookie大小。
• http　　字段 cookie的httponly屬性。若此屬性爲true，則只有在http請求頭中會帶有此cookie的信息，而不能經過document.cookie來訪問此cookie。
• secure　　 字段 設置是否只能經過https來傳遞此條cookie

17. 登陸後，前端作了哪些工做，如何得知已登陸

• 前端存放服務端下發的cookie, 簡單說就是寫一個字段在cookie中代表已登陸, 並設置失效日期
• 或使用後端返回的token, 每次ajax請求將token攜帶在請求頭中, 這也是防範csrf的手段之一

18. http狀態碼

• 1**: 服務器收到請求, 需請求者進一步操做
• 2**: 請求成功
• 3**: 重定向, 資源被轉移到其餘URL了
• 4**: 客戶端錯誤, 請求語法錯誤或沒有找到相應資源
• 5**: 服務端錯誤, server error
• 301: 資源(網頁等)被永久轉移到其餘URL, 返回值中包含新的URL, 瀏覽器會自動定向到新URL
• 302: 臨時轉移. 客戶端應訪問原有URL
• 304: Not Modified. 指定日期後未修改, 不返回資源
• 403: 服務器拒絕執行請求
• 404: 請求的資源(網頁等)不存在
• 500: 內部服務器錯誤

19. # Http請求頭緩存設置方法

Cache-control, expire, last-modify

20. 實現頁面回退刷新

• 舊: window.history.back() + window.location.href=document.referrer;
• 新: HTML5的新API擴展了window.history，使歷史記錄點更加開放了。能夠存儲當前歷史記錄點、替換當前歷史記錄點、監聽歷史記錄點onpopstate, replaceState

21. 正向代理和反向代理

• 正向代理:

  

  image

  （1）訪問原來沒法訪問的資源，如google
  （2） 能夠作緩存，加速訪問資源
  （3）對客戶端訪問受權，上網進行認證
  （4）代理能夠記錄用戶訪問記錄（上網行爲管理），對外隱藏用戶信息

• 反向代理:

  

  image

  （1）保證內網的安全，可使用反向代理提供WAF功能，阻止web攻擊大型網站，一般將反向代理做爲公網訪問地址，Web服務器是內網。
  （2）負載均衡，經過反向代理服務器來優化網站的負載

22. 關於預檢請求

在非簡單請求且跨域的狀況下，瀏覽器會自動發起options預檢請求。

23. 三次握手四次揮手

• 開啓鏈接用三次握手, 關閉用四次揮手

24. TCP和UDP協議

• TCP（Transmission Control Protocol：傳輸控制協議；面向鏈接，可靠傳輸
• UDP（User Datagram Protocol）：用戶數據報協議；面向無鏈接，不可靠傳輸

25. 進程和線程的區別

• 進程：是併發執行的程序在執行過程當中分配和管理資源的基本單位，是一個動態概念，競爭計算機系統資源的基本單位。
• 線程：是進程的一個執行單元，是進程內科調度實體。比進程更小的獨立運行的基本單位。線程也被稱爲輕量級進程。
• 一個程序至少一個進程，一個進程至少一個線程。

vue相關

1. 生命週期

image

2 .雙向數據綁定v-model。這個最好也是本身實現一下 理解更深

經過v-model
VUE實現雙向數據綁定的原理就是利用了 Object.defineProperty() 這個方法從新定義了對象獲取屬性值(get)和設置屬性值(set)的操做來實現的。

// 依賴收集
// 簡化版
var obj = { }
var name 
//第一個參數：定義屬性的對象。
//第二個參數：要定義或修改的屬性的名稱。
//第三個參數：將被定義或修改的屬性描述符。
Object.defineProperty(obj, "data", {
  //獲取值
  get: function () {
    return name
  },
  //設置值
  set: function (val) {
    name = val
    console.log(val)
  }
})
//賦值調用set
obj.data = 'aaa'
//取值調用get
console.log(obj.data)

// 詳細版
 myVue.prototype._obverse = function (obj) { // obj = {number: 0}
    var value;
    for (key in obj) {  //遍歷obj對象
      if (obj.hasOwnProperty(key)) {
        value = obj[key]; 
        if (typeof value === 'object') {  //若是值是對象，則遞歸處理
          this._obverse(value);
        }
        Object.defineProperty(this.$data, key, {  //關鍵
          enumerable: true,
          configurable: true,
          get: function () {
            console.log(`獲取${value}`);
            return value;
          },
          set: function (newVal) {
            console.log(`更新${newVal}`);
            if (value !== newVal) {
              value = newVal;
            }
          }
        })
      }
    }
  }

複製代碼

3.vue父子組件傳遞參數

• 父 -->子: 經過props
• 子 -->父: 經過 $$refs 或 $emit

4.vue傳遞參數方法

• 父子組件傳參如上, v-bind : v-on @
• 兄弟組件傳參:(經過EventBus事件總線實現)

// 1\. 新建eventBus.js
import Vue from 'vue'
export default new Vue
// 或直接在main.js中初始化EventBus(全局)
Vue.prototype.$EventBus = new Vue()

// 2\. 發射與接收
// 若是是定義在eventBus.js中
import eventBus from 'eventBus.js'
eventBus.$emit()
eventBus.$on()

// 若是是定義在main.js中
this.bus.$emit()
this.bus.$on()

// 3\. 移除監聽
eventBus.$off()

複製代碼

5.vue自定義組件

可使用獨立可複用的自定義組件來構成大型應用, 採用帕斯卡命名法或橫線鏈接, 經過以上方式進行組件間通訊. 每個組件都是Vue實例, 可使用生命週期鉤子.

6. vue自定義指令

• 除核心指令以外的指令, 使用directive進行註冊.
• 指令自定義鉤子函數: bind, inserted, update, componentUpdated, unbind

7.vuex組成和原理

• 組成: 組件間通訊, 經過store實現全局存取
• 修改: 惟一途徑, 經過commit一個mutations(同步)或dispatch一個actions(異步)
• 簡寫: 引入mapState、mapGetters、mapActions

8.vue-router的原理，例如hashhistory和History interface這些東西要弄明白。其實看一下源碼就行了，看不懂能夠直接看解析的相關技術博客。

• vue-router用法:
  在router.js或者某一個路由分發頁面配置path, name, component對應關係
  • 每一個按鈕一個value, 在watch功能中使用this.$router.push實現對應跳轉, 相似react的this.history.push
  • 或直接用router-link to去跳轉, 相似react的link to
• vue-router原理: 經過hash和History interface兩種方式實現前端路由
  • HashHistory: 利用URL中的hash（「#」）;replace()方法與push()方法不一樣之處在於，它並非將新路由添加到瀏覽器訪問歷史的棧頂，而是替換掉當前的路由
  • History interface: 是瀏覽器歷史記錄棧提供的接口，經過back(), forward(), go()等方法，咱們能夠讀取瀏覽器歷史記錄棧的信息，進行各類跳轉操做. pushState(), replaceState() 這下不只是讀取了，還能夠對瀏覽器歷史記錄棧進行修改

9.vue的seo問題

seo關係到網站排名, vue搭建spa作先後端分離很差作seo, 可經過其餘方法解決:

• SSR服務端渲染: 將同一個組件渲染爲服務器端的 HTML 字符串.利於seo且更快.
• vue-meta-info, nuxt, prerender-spa-plugin頁面預渲染等

10.預渲染和ssr
以上

11.生命週期內create和mounted的區別

• created: 在模板渲染成html前調用，即一般初始化某些數據，而後再渲染成視圖。
• mounted: 在模板渲染成html後調用，一般是初始化頁面完成後，再對html的dom節點進行一些須要的操做和方法。

12.監聽watch

對應一個對象，鍵是觀察表達式，值是對應回調。值也能夠是methods的方法名，或者是對象，包含選項。在實例化時爲每一個鍵調用 $watch()

13.登陸驗證攔截(經過router)

• 先設置requireAuth:

routes = [
    {
        name: 'detail',
        path: '/detail',
        meta: {
            requireAuth: true
        }
    },
    {
        name: 'login',
        path: '/login'
    }
]

複製代碼

• 再配置router.beforeEach:

router.beforeEach((from, to, next) => {
    if (to.meta.requireAuth) { // 判斷跳轉的路由是否須要登陸
        if (store.state.token) { // vuex.state判斷token是否存在
            next() // 已登陸
        } else {
            next({
                path: '/login',
                query: {redirect: to.fullPath} // 將跳轉的路由path做爲參數，登陸成功後跳轉到該路由
            })
        }
    } else {
       next()
    }
})

複製代碼

14. v-for key值

不寫key值會報warning, 和react的array渲染相似. 根據diff算法, 修改數組後, 寫key值會複用, 不寫會從新生成, 形成性能浪費或某些沒必要要的錯誤

15. vue3.0的更新和defineProperty優化

• 放棄 Object.defineProperty ，使用更快的原生 Proxy (訪問對象攔截器, 也成代理器)
• 提速, 下降內存使用, Tree-shaking更友好
• 支持IE11等
• 使用Typescript

15. vue使用this獲取變量

正常要經過vm.[圖片上傳失敗...(image-6d2f4e-1570591304185)]

root傳參取值

16. jQuery的優缺點，與vue的不一樣，vue的優缺點？

• jq優勢: 比原生js更易書寫, 封裝了不少api, 有豐富的插件庫; 缺點: 每次升級與以前版本不兼容, 只能手動開發, 操做DOM很慢, 不方便, 變量名污染, 做用域混淆等.
• vue優缺點: 雙向綁定, 虛擬DOM, diff算法, MVVM, 組件化, 通訊方便, 路由分發等

17. vue解除雙向綁定

let obj = JSON.parse(JSON.stringify(this.temp1));

18. vue異步組件

爲了簡化，Vue 容許你以一個工廠函數的方式定義你的組件，這個工廠函數會異步解析你的組件定義。Vue 只有在這個組件須要被渲染的時候纔會觸發該工廠函數，且會把結果緩存起來供將來重渲染

Vue.component(
  'async-webpack-example',
  // 這個 `import` 函數會返回一個 `Promise` 對象。
  () => import('./my-async-component')
)

複製代碼

19. MVC與MVVM

• model-數據層 view-視圖層 controller-控制層
• MVC的目的是實現M和V的分離，單向通訊，必須經過C來承上啓下
• MVVM中經過VM（vue中的實例化對象）的發佈者-訂閱者模式實現雙向綁定，數據綁定，dom事件監聽
• 區別：MVC和MVVM的區別並非VM徹底取代了C，ViewModel存在目的在於抽離Controller中展現的業務邏輯，而不是替代Controller，其它視圖操做業務等仍是應該放在Controller中實現。也就是說MVVM實現的是業務邏輯組件的重用

20. vue漸進式

小到能夠只使用核心功能，好比單文件組件做爲一部分嵌入；大到使用整個工程，vue init webpack my-project來構建項目；VUE的核心庫及其生態系統也能夠知足你的各式需求（core+vuex+vue-route）

react相關

1. 新舊生命週期

• 舊: will, did; mount, update...
• 新: 16版本以後:
  • getDerivedStateFromProps: 虛擬dom以後，實際dom掛載以前, 每次獲取新的props或state以後, 返回新的state, 配合didUpdate能夠替代willReceiveProps
  • getSnapshotBeforeUpdate: update發生的時候，組件更新前觸發, 在render以後，在組件dom渲染以前；返回一個值，做爲componentDidUpdate的第三個參數；配合componentDidUpdate, 能夠覆蓋componentWillUpdate的全部用法
  • componentDidCatch: 錯誤處理
• 對比: 棄用了三個will, 新增兩個get來代替will, 不能混用, 17版本會完全刪除. 新增錯誤處理

2. react核心

• 虛擬DOM, Diff算法, 遍歷key值
• react-dom: 提供了針對DOM的方法，好比：把建立的虛擬DOM，渲染到頁面上 或 配合ref來操做DOM
• react-router

3. fiber核心(react 16)

• 舊: 瀏覽器渲染引擎單線程, 計算DOM樹時鎖住整個線程, 全部行爲同步發生, 有效率問題, 期間react會一直佔用瀏覽器主線程，若是組件層級比較深，相應的堆棧也會很深，長時間佔用瀏覽器主線程, 任何其餘的操做（包括用戶的點擊，鼠標移動等操做）都沒法執行
• 新: 重寫底層算法邏輯, 引入fiber時間片, 異步渲染, react會在渲染一部分樹後檢查是否有更高優先級的任務須要處理(如用戶操做或繪圖), 處理完後再繼續渲染, 並能夠更新優先級, 以此管理渲染任務. 加入fiber的react將組件更新分爲兩個時期（phase 1 && phase 2），render前的生命週期爲phase1，render後的生命週期爲phase2, 1能夠打斷, 2不能打斷一次性更新. 三個will生命週期可能會重複執行, 儘可能避免使用

4. 渲染一個react

• 分爲首次渲染和更新渲染
• 生命週期, 創建虛擬DOM, 進行diff算法
• 對比新舊DOM, 節點對比, 將算法複雜度從O(n^3)下降到O(n)
• key值優化, 避免用index做爲key值, 兄弟節點中惟一就行

5. 高階組件

高階組件就是一個函數，且該函數(wrapper)接受一個組件做爲參數，並返回一個新的組件。
高階組件並不關心數據使用的方式和緣由，而被包裹的組件也不關心數據來自何處.

• react-dnd: 根組件, source, target等
  export default DragSource(type, spec, collect)(MyComponent)
• 重構代碼庫使用HOC提高開發效率

6. hook(v16.7測試)

在無狀態組件(如函數式組件)中也能操做state以及其餘react特性, 經過useState

7. redux和vuex以及dva：

• redux: 經過store存儲，經過action惟一更改，reducer描述如何更改。dispatch一個action
• dva: 基於redux，結合redux-saga等中間件進行封裝
• vuex：相似dva，集成化。action異步，mutation非異步

8. react和vue的區別

• 數據是否可變: react總體是函數式的思想，把組件設計成純組件，狀態和邏輯經過參數傳入，因此在react中，是單向數據流，推崇結合immutable來實現數據不可變; vue的思想是響應式的，也就是基因而數據可變的，經過對每個屬性創建Watcher來監聽，當屬性變化的時候，響應式的更新對應的虛擬dom。總之，react的性能優化須要手動去作，而vue的性能優化是自動的，可是vue的響應式機制也有問題，就是當state特別多的時候，Watcher也會不少，會致使卡頓，因此大型應用（狀態特別多的）通常用react，更加可控。
• 經過js來操做一切，仍是用各自的處理方式: react的思路是all in js，經過js來生成html，因此設計了jsx，還有經過js來操做css，社區的styled-component、jss等; vue是把html，css，js組合到一塊兒，用各自的處理方式，vue有單文件組件，能夠把html、css、js寫到一個文件中，html提供了模板引擎來處理。
• 類式的組件寫法，仍是聲明式的寫法: react是類式的寫法，api不多; 而vue是聲明式的寫法，經過傳入各類options，api和參數都不少。因此react結合typescript更容易一塊兒寫，vue稍微複雜。
• 擴展不一樣: react能夠經過高階組件（Higher Order Components--HOC）來擴展，而vue須要經過mixins來擴展
• 什麼功能內置，什麼交給社區去作: react作的事情不多，不少都交給社區去作，vue不少東西都是內置的，寫起來確實方便一些，
  好比 redux的combineReducer就對應vuex的modules，
  好比reselect就對應vuex的getter和vue組件的computed，
  vuex的mutation是直接改變的原始數據，而redux的reducer是返回一個全新的state，因此redux結合immutable來優化性能，vue不須要。

9. react單向數據流怎麼理解

React是單向數據流，數據主要從父節點傳遞到子節點（經過props）。若是頂層（父級）的某個props改變了，React會重渲染全部的子節點。

10. React算法複雜度優化

react樹對比是按照層級去對比的， 他會給樹編號0,1,2,3,4.... 而後相同的編號進行比較。 因此複雜度是n，這個好理解。

關鍵是傳統diff的複雜度是怎麼算的？ 傳統的diff須要出了上面的比較以外，還須要跨級比較。 他會將兩個樹的節點，兩兩比較，這就有n^2的複雜度了。 而後還須要編輯樹，編輯的樹可能發生在任何節點，須要對樹進行再一次遍歷操做，所以複雜度爲n。加起來就是n^3了。

11. React優勢

聲明式, 組件化, 一次學習, 隨處編寫. 靈活, 豐富, 輕巧, 高效

移動端相關

1. 移動端兼容適配

• <meta name="viewport" content="width=device-width, initial-scale=1.0">
• rem, em, 百分比
• 框架的柵格佈局
• media query媒體查詢
• 手淘團隊的一套flexible.js, 自動判斷dpr進行整個佈局視口的放縮

2. flexible如何實現自動判斷dpr

判斷機型, 找出樣本機型去適配. 好比iphone以6爲樣本, 寬度375px, dpr是2

3. 爲何以iPhone6爲標準的設計稿的尺寸是以750px寬度來設計的呢？

iPhone6的滿屏寬度是375px，而iPhone6採用的視網膜屏的物理像素是滿屏寬度的2倍，也就是dpr(設備像素比)爲2, 而且設計師所用的PS設計軟件分辨率和像素關係是1:1。因此爲了作出的清晰的頁面，設計師通常給出750px的設計圖，咱們再根據需求對元素的尺寸設計和壓縮。

4. 如何處理異形屏iphone X

• safe area: 默認放置在安全區域以免遮擋, 但會壓縮
• 在meta中添加viewport-fit=cover: 告訴瀏覽器要講整個頁面渲染到瀏覽器中，無論設備是圓角與否，這個時候會形成頁面的元素被圓角遮擋
• padding: constant(env): 解決遮擋問題

5. 移動端首屏優化

• 採用服務器渲染ssr
• 按需加載配合webpack分塊打包, 經過entry和commonChunkPlugin
• 頗有必要將script標籤➕異步
• 有輪播圖 最好給個默認 另外要處理圖片懶加載
• 打包線上也要注意去掉map 文件
• 組件, 路由懶加載
• webpack的一切配置 確定是必須的
• 壓縮圖片 tinypng.com/
• 建議仍是用webpack的圖片壓縮插件
• 骨架屏
• Loading頁面

6. PWA全稱Progressive Web App，即漸進式WEB應用

一個 PWA 應用首先是一個網頁, 能夠經過 Web 技術編寫出一個網頁應用. 隨後添加上 App Manifest 和 Service Worker 來實現 PWA 的安裝和離線等功能
解決了哪些問題？

• 能夠添加至主屏幕，點擊主屏幕圖標能夠實現啓動動畫以及隱藏地址欄
• 實現離線緩存功能，即便用戶手機沒有網絡，依然可使用一些離線功能
• 實現了消息推送
  它解決了上述提到的問題，這些特性將使得 Web 應用漸進式接近原生 App。

7. 離線包方案

如今 web 頁面在移動端的地位愈來愈高，大部分主流 App 採用 native + webview 的 hybrid 模式，加載遠程頁面受限於網絡，本地 webview 引擎，常常會出現渲染慢致使的白屏現象，體驗不好，因而離線包方案應運而生。動態下載的離線包可使得咱們不須要走完整的 App 審覈發佈流程就完成了版本的更新

8. 自適應和響應式佈局的區別

1. 自適應佈局經過檢測視口分辨率，來判斷當前訪問的設備是：pc端、平板、手機，從而請求服務層，返回不一樣的頁面；響應式佈局經過檢測視口分辨率，針對不一樣客戶端在客戶端作代碼處理，來展示不一樣的佈局和內容。

2. 自適應佈局須要開發多套界面，而響應式佈局只須要開發一套界面就能夠了。

3. 自適應對頁面作的屏幕適配是在必定範圍：好比pc端通常要大於1024像素，手機端要小於768像素。而響應式佈局是一套頁面所有適應。

4. 自適應佈局若是屏幕過小會發生內容過於擁擠。而響應式佈局正是爲了解決這個問題而衍生出的概念，它能夠自動識別屏幕寬度並作出相應調整的網頁設計。

插件及工具相關

1. babel和polyfill

• Babel: Babel 是一個普遍使用的 ES6 轉碼器，能夠將 ES6 代碼轉爲 ES5 代碼。注意：Babel 默認只轉換新的 JavaScript 句法（syntax），而不轉換新的 API

• Polyfill: Polyfill的準確意思爲，用於實現瀏覽器並不支持的原生API的代碼。

2. jpg, jpeg和png區別

• jpg是jpeg的縮寫, 兩者一致
• PNG就是爲取代GIF而生的, 無損壓縮, 佔用內存多
• jpg犧牲圖片質量, 有損, 佔用內存小
• PNG格式可編輯。如圖片中有字體等，可利用PS再作更改。JPG格式不可編輯

3. git rebase和merge區別

image

image

前端性能優化

1. 減小HTTP請求（合併css、js，雪碧圖/base64圖片）
2. 壓縮（css、js、圖片皆可壓縮,使用webpack uglify和 svg）
3. 樣式表放頭部，腳本放底部
4. 使用CDN（這部分，很多前端都不用考慮，負責發佈的兄弟可能會負責搞好）
5. http緩存
6. bosify圖片壓縮: 根據具體狀況修改圖片後綴或格式 後端根據格式來判斷存儲原圖仍是縮略圖
7. 懶加載, 預加載
8. 替代方案: 骨架屏, SSR
9. webpack優化

原生通訊

1.JSBridge通訊原理, 有哪幾種實現的方式？

JsBridge給JavaScript提供了調用Native功能，Native也可以操控JavaScript。這樣前端部分就能夠方便使用地理位置、攝像頭以及登陸支付等Native能力啦。JSBridge構建 Native和非Native間消息通訊的通道，並且是 雙向通訊的通道。

• JS 向 Native 發送消息 : 調用相關功能、通知 Native 當前 JS 的相關狀態等。
• Native 向 JS 發送消息 : 回溯調用結果、消息推送、通知 JS 當前 Native 的狀態等。

2.實現一個簡單的 JSBridge，設計思路？

算法相關

1. 二分查找和冒泡排序

• 二分查找: 遞歸(分左右, 傳遞start,end參數)和非遞歸(使用while(l < h))
• 冒泡排序: 兩個for循環

2. 快速排序

function quickSort (arr) {
  if (arr.length < 2) return arr
  var middle = Math.floor(arr.length / 2)
  var flag = arr.splice(middle, 1)[0]
  var left = [],
        right = []
  for (var i = 0; i < arr.length; i++) {
    if (arr[i] < flag) {
      left.push(arr[i])
    } else {
      right.push(arr[i])
    }
  }
  return quickSort(left).concat([flag], quickSort(right))
}

複製代碼

3. 最長公共子串

function findSubStr(str1, str2) {
        if (str1.length > str2.length) {
          [str1, str2] = [str2, str1]
        }
        var result = ''
        var len = str1.length
        for (var j = len; j > 0; j--) {
          for (var i = 0; i < len - j; i++) {
            result = str1.substr(i, j)
            if (str2.includes(result)) return result
          }
        }
      }
      console.log(findSubStr('aabbcc11', 'ppooiiuubcc123'))

複製代碼

4. 最長公共子序列(LCS動態規劃)

另外一篇

// dp[i][j] 計算去最大長度，記住口訣：相等左上角加一，不等取上或左最大值
function LCS(str1, str2){
        var rows =  str1.split("")
        rows.unshift("")
        var cols =  str2.split("")
        cols.unshift("")
        var m = rows.length 
        var n = cols.length 
        var dp = []
        for(var i = 0; i < m; i++){ 
            dp[i] = []
            for(var j = 0; j < n; j++){ 
                if(i === 0 || j === 0){
                    dp[i][j] = 0
                    continue
                }

                if(rows[i] === cols[j]){ 
                    dp[i][j] = dp[i-1][j-1] + 1 //對角＋1
                }else{
                    dp[i][j] = Math.max( dp[i-1][j], dp[i][j-1]) //對左邊，上邊取最大
                }
            }
            console.log(dp[i].join(""))//調試
        } 
        return dp[i-1][j-1]
    }
//!!!若是它來自左上角加一，則是子序列，不然向左或上回退。
//findValue過程，其實就是和 就是把T[i][j]的計算反過來。
// 求最長子序列
function findValue(input1,input2,n1,n2,T){
    var i = n1-1,j=n2-1;
    var result = [];//結果保存在數組中
    console.log(i);
    console.log(j);
    while(i>0 && j>0){
        if(input1[i] == input2[j]){
            result.unshift(input1[i]);
            i--;
            j--;
        }else{
            //向左或向上回退
            if(T[i-1][j]>T[i][j-1]){
                //向上回退
                i--;
            }else{
                //向左回退
                j--;
            }
        }

    }

    console.log(result);
}

複製代碼

5. 數組去重，多種方法

• 雙for循環, splice剔除並i--回退
• indexOf等於index
• filter indexOf === index
• 新數組indexOf === index
• 使用空對象等

6. 實現一個函數功能：sum(1,2,3,4..n)轉化爲 sum(1)(2)(3)(4)…(n)

// 使用柯里化 + 遞歸
function curry ( fn ) {
  var c = (...arg) => (fn.length === arg.length) ? 
          fn (...arg) : (...arg1) => c(...arg, ...arg1)
  return c
}

複製代碼

7. 反轉二叉樹

var invertTree = function (root) {
  if (root !== null) {
    [root.left, root.right] = [root.right, root.left]
    invertTree(root.left)
    invertTree(root.right)
  }
  return root
}

複製代碼

8. 貪心算法解決揹包問題

var items = ['A','B','C','D']
var values = [50,220,60,60]
var weights = [5,20,10,12]
var capacity = 32 //揹包容積

greedy(values, weights, capacity) // 320

function greedy(values, weights, capacity) {
        var result = 0
        var rest = capacity
        var sortArray = []
        var num = 0
        values.forEach((v, i) => {
          sortArray.push({
            value: v,
            weight: weights[i],
            ratio: v / weights[i]
          })
        })
        sortArray.sort((a, b) => b.ratio - a.ratio)
        sortArray.forEach((v, i) => {
          num = parseInt(rest / v.weight)
          rest -= num * v.weight
          result += num * v.value
        })
        return result
      }

複製代碼

9. 輸入一個遞增排序的數組和一個數字S，在數組中查找兩個數，使得他們的和正好是S，若是有多對數字的和等於S，輸出兩個數的乘積最小的。

function FindNumbersWithSum(array, sum)
{
    var index = 0
    for (var i = 0; i < array.length - 1 && array[i] < sum / 2; i++) {
        for (var j = i + 1; j < array.length; j++) {
            if (array[i] + array[j] === sum) return [array[i], array[j]]
        }
        //index = array.indexOf(sum - array[i], i + 1)
       // if (index !== -1) {
       //     return [array[i], array[index]]
        //}
    }
    return []

複製代碼

10. 二叉樹各類(層序)遍歷

深度廣度遍歷

// 根據前序和中序重建二叉樹
/* function TreeNode(x) {
    this.val = x;
    this.left = null;
    this.right = null;
} */
function reConstructBinaryTree(pre, vin)
{
    var result = null
    if (pre.length === 1) {
        result = {
            val: pre[0],
            left: null,
            right: null
        }
    } else if (pre.length > 1) {
        var root = pre[0]
        var vinRootIndex = vin.indexOf(root)
        var vinLeft = vin.slice(0, vinRootIndex)
        var vinRight = vin.slice(vinRootIndex + 1, vin.length)
        pre.shift()
        var preLeft = pre.slice(0, vinLeft.length)
        var preRight = pre.slice(vinLeft.length, pre.length)
        result = {
            val: root,
            left: reConstructBinaryTree(preLeft, vinLeft),
            right: reConstructBinaryTree(preRight, vinRight)
        }
    }
    return result
}

// 遞歸
// 前序遍歷
function prevTraverse (node) {
  if (node === null) return;

  console.log(node.data);
  prevTraverse(node.left);
  prevTraverse(node.right);
}

// 中序遍歷
function middleTraverse (node) {
  if (node === null) return;

  middleTraverse(node.left);
  console.log(node.data);
  middleTraverse(node.right);
}

// 後序遍歷
function lastTraverse (node) {
  if (node === null) return;

  lastTraverse(node.left);
  lastTraverse(node.right);
  console.log(node.data);
}

// 非遞歸
// 前序遍歷
function preTraverse(tree) {
        var arr = [],
          node = null
        arr.unshift(tree)
        while (arr.length) {
          node = arr.shift()
          console.log(node.root)
          if (node.right) arr.unshift(node.right)
          if (node.left) arr.unshift(node.left)
        }
      }

// 中序遍歷
function middleTraverseUnRecursion (root) {
  let arr = [],
      node = root;

  while (arr.length !== 0 || node !== null) {
    if (node === null) {
      node = arr.shift();
      console.log(node.data);
      node = node.right;
    } else {
      arr.unshift(node);
      node = node.left;
    }
  }

}

// 廣度優先-層序遍歷
// 遞歸
var result = []
var stack = [tree]
var count = 0
var bfs = function () {
  var node = stack[count]
  if (node) {
    result.push(node.value)
    if (node.left) stack.push(node.left)
    if (node.right) stack.push(node.right)
    count++
    bfs()
  }
}
bfs()
console.log(result)
// 非遞歸
function bfs (node) {
  var result = []
  var queue = []
  queue.push(node)
  while (queue.length) {
    node = queue.shift()
    result.push(node.value)
    node.left && queue.push(node.left)
    node.right && queue.push(node.right)
  }
  return result
}

複製代碼

11. 各類排序

// 插入排序
function insertSort(arr) {
        var temp
        for (var i = 1; i < arr.length; i++) {
          temp = arr[i]
          for (var j = i; j > 0 && temp < arr[j - 1]; j--) {
            arr[j] = arr[j - 1]
          }
          arr[j] = temp
        }
        return arr
      }
      console.log(insertSort([3, 1, 8, 2, 5]))

// 歸併排序
function mergeSort(array) {
        var result = array.slice(0)
        function sort(array) {
          var length = array.length
          var mid = Math.floor(length * 0.5)
          var left = array.slice(0, mid)
          var right = array.slice(mid, length)
          if (length === 1) return array
          return merge(sort(left), sort(right))
        }
        function merge(left, right) {
          var result = []

          while (left.length || right.length) {
            if (left.length && right.length) {
              if (left[0] < right[0]) {
                result.push(left.shift())
              } else {
                result.push(right.shift())
              }
            } else if (left.length) {
              result.push(left.shift())
            } else {
              result.push(right.shift())
            }
          }
          return result
        }
        return sort(result)
      }
      console.log(mergeSort([5, 2, 8, 3, 6]))

// 二分插入排序
function twoSort(array) {
        var len = array.length,
          i,
          j,
          tmp,
          low,
          high,
          mid,
          result
        result = array.slice(0)
        for (i = 1; i < len; i++) {
          tmp = result[i]
          low = 0
          high = i - 1
          while (low <= high) {
            mid = parseInt((high + low) / 2, 10)
            if (tmp < result[mid]) {
              high = mid - 1
            } else {
              low = mid + 1
            }
          }
          for (j = i - 1; j >= high + 1; j--) {
            result[j + 1] = result[j]
          }
          result[j + 1] = tmp
        }
        return result
      }
      console.log(twoSort([4, 1, 7, 2, 5]))

複製代碼

12. 使用尾遞歸對斐波那契優化

遞歸很是耗費內存，由於須要同時保存成千上百個調用幀，很容易發生「棧溢出」錯誤（stack overflow）。但對於尾遞歸來講，因爲只存在一個調用幀，因此永遠不會發生「棧溢出」錯誤。

// 傳統遞歸斐波那契, 會形成超時或溢出
function Fibonacci (n) {
  if ( n <= 1 ) {return 1};

  return Fibonacci(n - 1) + Fibonacci(n - 2);
}

Fibonacci(10) // 89
Fibonacci(100) // 超時
Fibonacci(500) // 超時

// 使用尾遞歸優化, 可規避風險
function Fibonacci2 (n , ac1 = 1 , ac2 = 1) {
  if( n <= 1 ) {return ac2};

  return Fibonacci2 (n - 1, ac2, ac1 + ac2);
}

Fibonacci2(100) // 573147844013817200000
Fibonacci2(1000) // 7.0330367711422765e+208
Fibonacci2(10000) // Infinity

複製代碼

13. 兩個升序數組合併爲一個升序數組

function sort (A, B) {
  var i = 0, j = 0, p = 0, m = A.length, n = B.length, C = []
  while (i < m || j < n) {
    if (i < m && j < n) {
      C[p++] = A[i] < B[j] ? A[i++] : B[j++]
    } else if (i < m) {
      C[p++] = A[i++]
    } else {
      C[p++] = B[j++]
    }
  }
  return C
}

複製代碼

node相關

1. node的router是什麼

2. 數據庫索引是啥

• 狹義上: 索引是數據庫針對每條數據自動生成的內部惟一id標識, 用以快速搜索定位數據
• 廣義上: 是數據庫根據每條數據造成的關鍵字, 將劃分爲樹形結構, 便於sql語句對數據的查找, 使算法複雜度下降到O(logn)

3. 瀏覽器的事件循環和node事件循環有什麼區別？

結尾彩蛋：

歡迎關注前端之階公衆號，即時獲取更多前端技術，還可獲取前端大羣，裏面不少知名互聯網前端朋友，前端技術更新太快，不能被落伍淘汰，共同窗習，共同進步！