簡單整理了一下最近遇到的一些面試題-面試進行中

啊Peng發表於2019-03-23

整理了一下最近面試遇到的題

CSS

1、div 水平垂直居中
  /* 定位 */
  position: absolute;
  top: 50%;
  left: 50;
  transform: translate(-50%, 50%);
  /* flex 佈局 */
  display: flex;
  justify-content: center;
  align-items: center;
複製程式碼
2、css 盒模型
  • box-sizing: content-box; (標準模型)

width = content

  • box-sizing: border-box; (IE盒模型)

width = content + padding + border

3、inline 和 inline-block 的區別
  • inline 只能設定左右 margin、padding, 不能設定 width 和 height
  • inline-block 生成一個塊級別框,但是框的行為跟內聯元素一樣
4、css 中使用過哪些圖片替換方法,如何選擇使用
5、link 跟 @import 的區別
  • link 是 HTML 提供的標籤
  • link 引用的 css 會同時被載入,而 import 引用的 css 會等到頁面全部被下載完後再載入
  • import 老版本瀏覽器不支援
  • DOM可控性區別:無法使用 dom 方法插入樣式
6、css 樣式優先順序

內聯樣式 > ID 選擇器 > 類選擇器 = 屬性選擇器 = 偽類選擇器 > 標籤選擇器 = 偽元素選擇器

JS

1、async/await 跟 promise 的區別
  • Promise 程式碼完全都是 Promise 的 API (then、catch 等)
  • async/await 是 Generator 函式的語法糖
2、閉包的特性合優缺點
  • 什麼是閉包?

閉包就是能夠讀取其他函式內部變數的函式 (來源: blog.csdn.net/yingziziziz…)

  • 優點

讀取函式內部的變數 讓區域性變數儲存在記憶體中,實現變數資料共享

  • 缺點
  • 由於閉包會使得函式中的變數都被儲存在記憶體中,記憶體消耗很大,所以不能濫用閉包,否則會造成網頁的效能問題,在IE中可能導致記憶體洩露。解決方法是,在退出函式之前,將不使用的區域性變數全部刪除
  • 閉包會在父函式外部,改變父函式內部變數的值。所以,如果你把父函式當作物件(object)使用,把閉包當作它的公用方法(Public Method),把內部變數當作它的私有屬性(private value),這時一定要小心,不要隨便改變父函式內部變數的值。
  • 來源: www.jianshu.com/p/8376170fb…
3、原型、原型鏈,有什麼特點

關於原型其實文章還是蠻多的,看著也有點迷糊 segmentfault.com/a/119000000…

4、如何判斷物件型別

typeof、 instanceof 看 www.jianshu.com/p/5be700ee6…

5、宿主物件和原生物件的區別
  • 原生物件: Object、Function、Array、String、Boolean、Number、Date、RegExp、Error、EvalError、RangeError、ReferenceError、SyntaxError、TypeError、URIError、Global
  • 宿主物件: 有宿主提供的物件,在瀏覽器中window物件以及其下邊所有的子物件(如bom、dom等等),在node中是globla及其子物件,也包含自定義的類物件。【何為“宿主物件”? 在web中,ECMAScript中的“宿主”當然就是我們網頁的執行環境,即“作業系統”和“瀏覽器”。所有非本地物件都是宿主物件(host object),即由 ECMAScript 實現的宿主環境提供的物件。】
6、call 和 apply 的區別
  • .call(this, arg1, arg2, arg3)
  • .apply(this, arguments)
7、什麼是閉包
8、解釋 js 的 同源策略, 如何實現跨域訪問
  • 同源:

如果兩個頁面擁有 相同 的 協議(protocol),埠(如果指定),和 主機,那麼這兩個頁面就屬於同一個源(origin)。 (協議、域名、埠)

  • 跨域
  • jsonp
  • iframe
  • 跨域資源共享(CORS)
  • nginx 代理跨域
9、== 和 === 的區別

看: blog.csdn.net/chenchunlin…

10、陣列方法 pop, push, unshift, shift
  • pop: 刪除陣列最後一個元素,返回刪除的那個元素
  • push: 往陣列結尾新增元素
  • shift: 刪除陣列第一個元素,返回該元素
  • unshift: 往陣列前新增元素
11、事件委託是什麼

事件委託就是利用冒泡的原理,把事件加到父元素或祖先元素上,觸發執行效果。

優點: 提高效能,顯著提高事件處理速度,減少記憶體佔用

var btn6 = document.getElementById("btn6");
document.onclick = function(event){
  event = event || window.event;
  var target = event.target || event.srcElement;
  if(target == btn6){
    alert(btn5.value);
  }
}
複製程式碼
12、split()、join() 的區別
13、例舉 3 種強制型別轉換和 2 種隱式型別轉換
14、js 的原始型別和引用型別有哪些

Undefined、Null、Boolean、String、Number、Symbol、Object

15、1.toString() 會輸出什麼
  • 1.toString() => 報錯
  • 1..toString() => "1"
  • 1.0.toString() => "1"
16、什麼是回撥函式?有哪些缺點?如何解決回撥地獄?
  • 在JavaScript中,回撥函式具體的定義為:函式A作為引數(函式引用)傳遞到另一個函式B中,並且這個函式B執行函式A。我們就說函式A叫做回撥函式。如果沒有名稱(函式表示式),就叫做匿名回撥函式。因此callback 不一定用於非同步,一般同步(阻塞)的場景下也經常用到回撥,比如要求執行某些操作後執行回撥函式。
  • 如何解決回撥地獄
    • 保持程式碼簡短
    • 模組化
    • 處理每一個錯誤
17、如何實現一個可設定過期時間的 localStorage

VUE

1、vue 常見報錯
2、父元件通過 props 給子元件傳值,子元件能否修改該值,會有什麼影響

做了個小測試,看: note.youdao.com/noteshare?i…

3、vue 雙向資料繫結原理

juejin.im/entry/59239…

4、v-if 和 v-show 指令有什麼相同和不同

v-if 直接從 dom 樹上刪除或重建元素節點, v-show 只是修改 display 的值 v-if 高消耗,不適合做頻繁切換

5、 有什麼作用

keep-alive 是 Vue 內建的一個元件,可以使被包含的元件保留狀態,或避免重新渲染

6、簡述 vue 裡面的虛擬 dom

演算法

假設你正在爬樓梯,需要 n 步你才能到達頂部,但每次你只能爬一步或者兩步,你能有多少種不同的方法爬到樓頂?

其它

專案部署流程
伺服器部署專案常見錯誤,一般根據什麼來判斷
git 不常用的命令
什麼情況下會遇到跨域,怎麼解決
webpack 的作用

看這篇吧 (什麼是WebPack,為什麼要使用它) www.jianshu.com/p/d745b94ae…


後面陸續補充

感謝預覽,歡迎提意見、建議,謝謝!

  • 2019-03-27: 更新 css 6、 js 14-17、vue 6

相關文章