前端題目集錦

時間 2019-11-29

標籤前端題目集錦简体版

原文原文鏈接

20190614(gp)

vue 裏面computed watcher的區別？

vue 裏面中文輸入法時，只輸入一個字母沒有觸發雙向綁定，爲何？

vue 裏面 `nexttick` 是作什麼用的？

20190530(blw)

JavaScript數據類型轉換： juejin.im/post/5cee56…css

20190524(wyn)

箭頭函數和普通函數的區別?
- note.youdao.com/noteshare?i…
vue-router 有幾種路由模式？他們的實現原理？
- note.youdao.com/noteshare?i…
webpack 和 gulp 的區別？
- gulp 任務執行器html
  
  側重規範前端開發的流程，經過配置一系列的task，定義task處理的事務（例如：文件壓縮合並，啓動server），而後定義執行順序，來讓gulp執行task，從而構建其前端項目的流程。合併後仍然是你寫的代碼，只是局部變量名被替換，一些語法作了轉換而已，總體內容並無發生改變。前端
- webpack 模塊打包器vue
  
  側重模塊打包，把開發中的全部資源（圖片，js文件，css文件等）都開成模塊，經過loader（加載器）和plugins（插件）對資源進行處理，打包成符合生產環境部署的前端資源。打包後的代碼已經不僅是你寫的代碼，其中夾雜不少webpack自身的模塊處理代碼。webpack
- 區別es6
  
  Gulp是對整個過程進行控制，因此在其配置文件（gulpfile.js）中配置的每個task對項目中該task配置路徑下全部的資源均可以管理 Webpack則不是這樣管理資源的，它是根據模塊的依賴關係進行靜態分析，而後將這些模塊按照指定的規則生成對應的靜態資源，對資源文件的處理是經過入口文件產生的依賴造成的，不會像Gulp那樣，配置好路徑後，該路徑下全部規定的文件都會受影響web
在webpack中如何作長緩存優化？
- 用戶從訪問網頁開始，瀏覽器向服務器下載請求，服務器返回請求的時候，經過控制http協議的這些響應頭，告訴瀏覽器某些資源之內的是強緩存，不用更新它。
- 若是代碼有更新，版本號發生變化，則這段代碼須要更新的代碼。若是已經被瀏覽器緩存，用戶但願獲取緩存代碼。只更新改變的代碼。
- 優化方式一：在webpack中，能夠在output給出輸出的文件制定chunkhash，而且分離常常更新的代碼和框架代碼，通過NameModulesPlugin或者HashedModulesPlugin使再次打包文件名不變。 chunkhash：它根據不一樣的入口文件(Entry)進行依賴文件解析、構建對應的chunk，生成對應的哈希值。咱們在生產環境裏把一些公共庫和程序入口文件區分開，單獨打包構建，接着咱們採用chunkhash的方式生成哈希值，那麼只要咱們不改動公共庫的代碼，就能夠保證其哈希值不會受影響。 HashedModulesPlugin：因爲引入了一個新模塊，使得打包過程當中部分模塊的模塊ID發生了改變。而模塊ID的改變，直接致使了包含這些模塊的chunk內容改變，進而致使chunkHash的改變

20190517(swl)

https通訊雙方獲取加密密鑰的過程？https爲何須要證書?
圖解SSL/TLS協議 - 阮一峯
 漫畫：什麼是 HTTPS 協議？

實現一個chunk函數，chunk([1, 2, 3, 4, 5], 2) -> [[1, 2], [3, 4], [5]]

// 先計算出生成的數組長度，而後利用Array.from的第二個參數去映射
const chunk = (arr, size) =>
  Array.from({ length: Math.ceil(arr.length / size) }, (v, i) =>
    arr.slice(i * size, i * size + size)
  );
複製代碼

30 seconds of code 這個連接收集了不少短小但實用的代碼片斷，你能夠在30秒內理解它。裏面極可能就有你天天在用的lodash方法

下面是MDN給出的bind方法的Polyfill(篇幅緣由略去了類型檢測)，思考標註的代碼解決了什麼問題，你以爲該實現還有哪些比較重要的缺陷？

Function.prototype.bind = function (oThis) {
  var aArgs = Array.prototype.slice.call(arguments, 1),
    fToBind = this,
    fNOP = function () { },
    fBound = function () {
      return fToBind.apply(this instanceof fBound
        ? this
        : oThis,
        aArgs.concat(Array.prototype.slice.call(arguments)));
    };

  // 如下兩行代碼解決了什麼問題，試舉例說明
  if (this.prototype) fNOP.prototype = this.prototype;
  fBound.prototype = new fNOP();

  return fBound;
};
複製代碼

若是沒有上面的簡單原型鏈繼承，這裏F的原型對象上的print方法就會丟失：

const F = function() {
  this.name = 'haha'
}

F.prototype.print = function() {
  return this.name
}

const FBound = F.myBind(null)

const f = new FBound()

console.log(f)
console.log(f.print()) // 不維護原型的話，這裏會找不到print，進而報錯
複製代碼

除此以外，這個bind實現沒有處理函數的length屬性，而原生的bind會進行處理。例如:

const add = (a, b) => a + b
const addOne = add.bind(null, 1)
addOne.length // 1
複製代碼

這可能會致使依賴length的後續操做失敗，例如柯里化等
這裏又涉及到另外一個問題，函數的length屬性是不可寫的，咱們只能經過Object.defineProperty去設置：

Function.prototype.myBind = function (ctx, ...fixed) {
  if (typeof this !== 'function') {
    throw new TypeError('What is trying to be bound is not callable');
  }

  const fToBind = this
  const fNOP = function () { }
  const fBound = function (...args) {
    return fToBind.call(
      this instanceof fBound ? this : ctx,
      ...fixed, ...args
    )
  }

  if (this.prototype) fNOP.prototype = this.prototype
  fBound.prototype = new fNOP()

  // 設置新函數的length，若是原本就是0，那咱們就也設置爲0
  Object.defineProperty(fBound, 'length', {
    value: Math.max(0, fToBind.length - fixed.length),
    writable: false,
    configurable: true
  })

  return fBound
}

const addThreeNum = (a, b, c) => a + b + c

console.log(addThreeNum.myBind(null, 1).length) // 2
複製代碼

MDN - Function.prototype.bind()

補全如下代碼，實現一個簡單的Observable

class Observable {
  constructor() {
    this.cbs = []
  }

  subscribe (cb) {
    this.cbs.push(cb)
  }

  emit (x) {
    this.cbs.forEach(cb => cb(x))
  }
}

const observable = new Observable()

observable.subscribe(console.log)
observable.subscribe(x => console.log(x * 2))

observable.emit(3) // output: 3 6
複製代碼

20190510(sjj)

[]==![]

咱們來分析一下:[]==![] 是true仍是false？
vue-router

首先，咱們須要知道 ! 優先級是高於 == (更多運算符優先級可查看:運算符優先級)

![]引用類型轉換成布爾值都是true,所以![]的是false

其中一方是 boolean，將 boolean 轉爲 number 再進行判斷，false轉換成 number，對應的值是 0.

有一方是number，那麼將object也轉換成Number,空數組轉換成數字，對應的值是0.(空數組轉換成數字，對應的值是0，若是數組中只有一個數字，那麼轉成number就是這個數字，其它狀況，均爲NaN)

0 == 0; 爲true

commonJS的es6模塊的區別

commonJS 淺拷貝，值能夠被修改，優先從緩存中取值，加載時執行，一旦出現某個模塊被「循環加載」，就只輸出已執行的部分，還未執行的部分不輸出

es6 動態（原始值發生變化，import加載的值也會發生變化）只讀引用，腳本執行時，去取值

console.log(fn); // function fn() {console.log('哈哈')}
fn = 'hello'
function fn() {console.log('哈哈')};
console.log(fn); // 'hello'

全部的聲明都會提高到當前做用域最頂上，
同一個變量只會聲明一次，其它會被忽略
函數聲明的優先級高於變量聲明的優先級，而且函數聲明和函數定義的部分一塊兒被提高
gulp

20190426（shj）

for..in 和 for...of 的區別

for...in 循環讀取鍵名，for...of 循環讀取鍵值

for...of 循環須要調用遍歷器接口，for...in不須要。對於普通的對象，由於沒有遍歷器接口，因此不能直接用for...of 遍歷對象

某些狀況下，for。。。in循環會以任意順序遍歷鍵名

（補充）for...of 與forEach 對比，for...of 可使用break，continue，return跳出循環

什麼是事件委託

通俗地來說，就是把一個元素響應事件（click、keydown......）的函數委託到另外一個元素；通常來說，會把一個或者一組元素的事件委託到它的父層或者更外層元素上，真正綁定事件的是外層元素，當事件響應到須要綁定的元素上時，會經過事件冒泡機制從而觸發它的外層元素的綁定事件上，而後在外層元素上去執行函數。

事件委託的實現是利用事件冒泡的機制

對於不支持冒泡機制的事件（如focus、blur等），想要使用事件委託，須要利用捕獲機制。經過document.addEventListener 將事件模型設置爲事件捕獲

如何判斷數組類型

使用 instanceof 操做符

使用Array.isArray()

使用Object的toString()方法 Object.prototype.toString.call([]); //"[object Array]"

new 一個對象會發生什麼

建立空對象

設置新對象的constructor屬性爲構造函數的名稱，設置新對象的__proto__屬性指向構造函數的prototype對象

使用新對象調用函數，函數中的this被指向新實例對象中

將初始化完畢的新對象地址保存到等號左邊的變量中

若構造函數中返回this或返回值是基本類型（number、string、boolean、null、undefined、symbol）的值，則返回新對象；若返回值是引用類型的值，則實際返回值爲這個引用類型。

JSONP的原理

原理：Web頁面上調用js文件時不受是否跨域的影響（不只如此，咱們還發現凡是擁有src這個屬性的標籤都擁有跨域的能力，好比script、img、iframe、link)

實現：容許用戶傳遞一個callback參數給服務端，而後服務端返回數據時會將這個callback參數做爲函數名來包裹住JSON數據，這樣客戶端就能夠隨意定製本身的函數來自動處理返回數據了

CORS

跨域請求在發送前，會判斷該請求是簡單請求仍是複雜請求。跨域

若是是簡單請求，瀏覽器會在請求頭增長Origin字段後發送跨域請求。請求發送過去後，服務端通常會在響應頭裏添加上Access-Control-Allow-Origin 字段，瀏覽器經過校驗該值是不是Origin的值或者是*，來判斷是否跨域

若是是複雜請求，跨域請求會先發送一個預檢請求（攜帶複雜請求部分信息）來詢問服務器是否贊成此次複雜請求。

預檢請求使用OPTIONS方法，發送Origin、Access-Control-Request-Method、Access-Control-Request-Headers（可選）頭部。

發送該請求後，服務器能夠經過在響應頭中攜帶如下頭部

Access-Control-Allow-Origin

Access-Control-Allow-Methods

Access-Control-Allow-Headers

Access-Control-Max-Age （預檢請求的有效期）

預檢請求結束後，結果將按照響應中指定的時間緩存起來，下次再發送這樣的複雜請求時，不會再發送預檢請求

vue父子組件中的生命週期與鉤子函數的調用順序

從外到內，再從內到外，mixins先於組件

父組件beforeCreated ->父組件created ->父組件beforeMounted ->子組件beforeCreated ->子組件created ->子組件beforeMounted ->子組件mounted -> 父組件mounted。

20190418(rtj)

CSS有哪些繼承屬性？

CSS中關於文字排版的屬性如：font、word-break、letter-spacing、text-align、text-rendering、word-spacing、white-space 、text-indent、text-transform、text-shadow

其餘類型的如：line-height、color、visibility、cursor

描述一下offsetWidth/offsetHeight、clientWidth/clientHeight、scrollWidth/scrollHeight的區別？

offsetWidth/offsetHeight返回值包含content + padding + border，效果與e.getBoundingClientRect()相同

clientWidth/clientHeight返回值只包含content + padding，若是有滾動條，也不包含滾動條

scrollWidth/scrollHeight返回值包含content + padding + 溢出內容的尺寸

什麼狀況下會打印出1？

let a = ?
    if (a == 1 && a == 2 && a ==3 ) {
        console.log(1)
    }
複製代碼

在類型不一樣時，用==比較會進行隱式類型轉換,而在隱式類型轉換時會調用toString()或者valueOf()方法，因此咱們能夠利用這個特性，定義a爲一個對象類型，而且複寫這兩個方法其中之一就能夠達到題目中的效果。
let a = [1, 2, 3]
a.valueOf = a.shift
// a.toString = a.shift 這個方法也能夠
if (a == 1 && a == 2 && a == 3) {
  console.log(1)   
}
複製代碼

講一下什麼是防抖和節流以及他們的區別和用途？

防抖（debounce）

概念：指定時間內只執行一次回調函數，若是在指定的時間內又觸發了該事件，則回調函數的執行時間會基於此刻從新開始計算。

用途：好比用戶搜索時，當輸入中止後再去觸發搜索事件

節流（throttle）

概念：頻繁觸發事件時，只會在指定的時間段內執行事件回調，即觸發事件間隔大於等於指定的時間纔會執行回調函數

用途：好比處理瀏覽器滾動事件

20190412(blw)

document 中的load事件和DOMContentLoaded事件之間的區別是什麼?

當初始的 HTML 文檔被徹底加載和解析完成以後，DOMContentLoaded事件被觸發，而無需等待樣式表、圖像和子框架的完成加載。

window的load事件僅在 DOM 和全部相關資源所有完成加載後纔會觸發。

如此執行正確嗎？【function foo(){console.log(123) }()】

JavaScript 解析器將 function foo(){ }();解析成function foo(){ }和();。其中，前者是函數聲明；後者（一對括號）是試圖調用一個函數，卻沒有指定名稱，所以它會拋出Uncaught SyntaxError: Unexpected token )的錯誤。修改方法是：再添加一對括號，形式上有兩種：(function foo(){ })()和(function foo(){ }())。以上函數不會暴露到全局做用域，若是不須要在函數內部引用自身，能夠省略函數的名稱。

負責的主要業務內容是什麼？開放性問題。要求有條理，邏輯清晰。

20190404(wyn)

介紹一下CSS的盒子模型？種類、組成、區別

每一個元素被表示爲一個矩形的盒子，由四部分組成：內容content/內邊距padding/邊框/border/外邊距margin

盒模型有兩種：標準盒模型（W3C盒模型）、IE盒模型

區別：標準盒模型內容大小就是content大小，而IE盒模型內容大小則是content+padding+border總的大小

什麼是margin坍塌？怎麼解決

相鄰的兩個標準流中的塊元素，若是它們在垂直方向上設置了外邊距，那麼外邊距會發生重疊，最終的外邊距等於發生層疊的外邊距中絕對值較大者

解決：觸發BFC(Block Formatting Contexts 塊級格式化上下文) 一、 body根元素二、浮動元素：float：除none覺得的值三、絕對定位元素：position：absolute/fixed 四、display：inline-block/table-cells/flex 五、overflow：除了visible之外的值（hidden/auto/scroll)

display: none;與visibility: hidden的做用和區別

做用：都是讓元素不可見

區別： display：none會讓元素徹底從 render 樹中消失，渲染的時候不佔據任何空間，子元素不容許覆蓋值。 visibility：hidden不會讓元素從渲染樹 dom 中消失，並且仍是會佔據空間，只是內容不可見而已，子元素容許覆蓋值（設置visibility:visible;元素可見）。

vue-router 中組件內的導航鉤子beforeRouteEnter、beforeRouteUpdate、beforeRouteLeave的用法

直接在路由組件內部直接進行定義的

接收參數(to,from,next) 一、 to:router即將進入的路由對象二、 from:當前導航即將離開的路由三、 next:,進行管道中的一個鉤子，若是執行完了，調用next(）；不然爲false，終止導航。 beforeRouteEnter：進入路由以前執行的函數 beforeRouteUpdate：當前路由改變 beforeRouteLeave：離開路由以前執行的函數

position的absolute與fixed共同點與不一樣點

共同點： 1.改變行內元素的呈現方式，display被置爲block；2.讓元素脫離普通流，不佔據空間；3.默認會覆蓋到非定位元素上

不一樣點： absolute：生成絕對定位的元素，相對於static定位之外的第一個父元素進行定位。 fixed：生成絕對定位的元素，相對於瀏覽器窗口進行定位。滾動網頁，fixed元素與瀏覽器窗口之間的距離不變。

20190328(blw)

cookie、sessionStorage和localStorage的區別。

script、script async和script defer的區別

script - HTML 解析中斷，腳本被提取並當即執行。執行結束後，HTML 解析繼續。

script async - 腳本的提取、執行的過程與 HTML 解析過程並行，腳本執行完畢可能在 HTML 解析完畢以前。當腳本與頁面上其餘腳本獨立時，可使用async，好比用做頁面統計分析。

script defer - 腳本僅提取過程與 HTML 解析過程並行，腳本的執行將在 HTML 解析完畢後進行。若是有多個含defer的腳本，腳本的執行順序將按照在 document 中出現的位置，從上到下順序執行。注意：沒有src屬性的腳本，async和defer屬性會被忽略。

CSS和script的標籤通常放在什麼地方爲何？

把link標籤放在head之間是規範要求的內容。此外，這種作法可讓頁面逐步呈現，提升了用戶體驗。將樣式表放在文檔底部附近，會使許多瀏覽器（包括 Internet Explorer）不能逐步呈現頁面。一些瀏覽器會阻止渲染，以免在頁面樣式發生變化時，從新繪製頁面中的元素。這種作法能夠防止呈現給用戶空白的頁面或沒有樣式的內容。把script標籤剛好放在body以前腳本在下載和執行期間會阻止 HTML 解析。把script標籤放在底部，保證 HTML 首先完成解析，將頁面儘早呈現給用戶。例外狀況是當你的腳本里包含document.write()時。可是如今，document.write()不推薦使用。同時，將script標籤放在底部，意味着瀏覽器不能開始下載腳本，直到整個文檔（document）被解析。也許，對此比較好的作法是，script使用defer屬性，放在head中。

CSS 選擇器的優先級是如何計算的

瀏覽器經過優先級規則，判斷元素展現哪些樣式。優先級經過 4 個維度指標肯定，咱們假定以a、b、c、d命名，分別表明如下含義： a表示是否使用內聯樣式（inline style）。若是使用，a爲 1，不然爲 0。 b表示 ID 選擇器的數量。 c表示類選擇器、屬性選擇器和僞類選擇器數量之和。 d表示標籤（類型）選擇器和僞元素選擇器之和。優先級的結果並不是經過以上四個值生成一個得分，而是每一個值分開比較。a、b、c、d權重從左到右，依次減少。判斷優先級時，從左到右，一一比較，直到比較出最大值，便可中止。因此，若是b的值不一樣，那麼c和d無論多大，都不會對結果產生影響。好比0，1，0，0的優先級高於0，0，10，10。