js面試題（下）

時間 2019-12-13

標籤面試欄目 JavaScript 简体版

原文原文鏈接

DOM元素e的e.getAttribute(propName)和e.propName有什麼區別和聯繫

e.getAttribute()，是標準DOM操做文檔元素屬性的方法，具備通用性可在任意文檔上使用，返回元素在源文件中設置的屬性
e.propName一般是在HTML文檔中訪問特定元素的特性，瀏覽器解析元素後生成對應對象（如a標籤生成HTMLAnchorElement），這些對象的特性會根據特定規則結合屬性設置獲得，對於沒有對應特性的屬性，只能使用getAttribute進行訪問
e.getAttribute()返回值是源文件中設置的值，類型是字符串或者null（有的實現返回""）
e.propName返回值多是字符串、布爾值、對象、undefined等
大部分attribute與property是一一對應關係，修改其中一個會影響另外一個，如id，title等屬性
一些布爾屬性<input hidden/>的檢測設置須要hasAttribute和removeAttribute來完成，或者設置對應property
像link中href屬性，轉換成property的時候須要經過轉換獲得完整URL
一些attribute和property不是一一對應如：form控件中<input value="hello"/>對應的是defaultValue，修改或設置value property修改的是控件當前值，setAttribute修改value屬性不會改變value property

offsetWidth/offsetHeight,clientWidth/clientHeight與scrollWidth/scrollHeight的區別

offsetWidth/offsetHeight返回值包含content + padding + border，效果與e.getBoundingClientRect()相同
clientWidth/clientHeight返回值只包含content + padding，若是有滾動條，也不包含滾動條
scrollWidth/scrollHeight返回值包含content + padding + 溢出內容的尺寸

1.引發內存泄漏的操做有哪些

1.全局變量引發
2.閉包引發
3.dom清空，事件未清除
4.子元素存在引用
5.被遺忘的計時器javascript

遞歸和迭代的區別是什麼，各有什麼優缺點？

程序調用自身稱爲遞歸，利用變量的原值推出新值稱爲迭代，遞歸的優勢大問題轉化爲小問題，能夠減小代碼量，同時應爲代碼精簡，可讀性好，缺點就是，遞歸調用浪費了空間，並且遞歸太深容易形成堆棧的溢出。迭代的好處就是代碼運行效率好，由於時間只因循環次數增長而增長，並且沒有額外的空間開銷，缺點就是代碼不如遞歸簡潔前端

參考：
深究遞歸和迭代的區別、聯繫、優缺點及實例對比
 「遞歸」和「迭代」有哪些區別？java

什麼是事件循環（EVENT LOOP）

咱們經常說js是單線程的，是指js執行引擎是單線程的，除了這個單線程，還有一個任務隊列，在執行js代碼的過程當中，執行引擎遇到註冊的延時方法，如定時器，DOM事件，會將這些方法交給相應的瀏覽器模塊處理，當這些延時方法有觸發條件去觸發的時候，這些延時方法會被添加至任務隊列，而這些任務隊列中的方法只有js的主線程空閒了纔會執行，這也就是說咱們經常用的定時器定的時間參數只是一個觸發條件，具體多少時間後執行其實還須要看 js主線程空閒與否
【轉向Javascript系列】從setTimeout說事件循環模型
 深刻淺出JavaScript事件循環機制(上)
深刻淺出JavaScript事件循環機制(下)
併發模型與事件循環git

JavaScript嚴格模式下有哪些不一樣？

不容許不使用var關鍵字去建立全局變量，拋出ReferenceError
不容許對變量使用delete操做符，拋ReferenceError
不可對對象的只讀屬性賦值，不可對對象的不可配置屬性使用delete操做符，不可爲不可拓展的對象添加屬性，均拋- - TypeError
對象屬性名必須惟一
函數中不可有重名參數
在函數內部對修改參數不會反映到arguments中
淘汰arguments.callee和arguments.caller
不可在if內部聲明函數
拋棄with語句

setTimeout和setInterval的區別，包含內存方面的分析？

setTimeout表示間隔一段時間以後執行一次調用，而setInterval則是每間隔一段時間循環調用，直至clearInterval結束。內存方面，setTimeout只須要進入一次隊列，不會形成內存溢出，setInterval由於不計算代碼執行時間，有可能同時執行屢次代碼，致使內存溢出。
JS 中settimeout和setinterval函數的區別
 setTimeout() 和 setInterval() 本質區別在哪裏？github

如何實現懶加載？

懶加載就是根據用戶的瀏覽須要記載內容，也就是在用戶即將瀏覽完當前的內容時進行繼續加載內容，這種技術經常用來加載圖片的時候使用。咱們判斷用戶是否即將瀏覽到底部以後進行在家內容這時候可能會須要加載大量的內容，可使用fragment來優化一下，由於大部分是使用滑動和滾輪來觸發的，所以頗有可能會不斷觸發，可使用函數節流作一個優化，防止用戶不斷觸發。面試

字符串截取

js字符串截取方法有substring、slice、substr三個方法，substring和slice都是指定截取的首尾索引值，不一樣的是傳遞負值的時候 substring會當作0來處理，而slice傳入負值的規則是-1指最後一個字符，substr方法則是第一個參數是開始截取的字符串，第二個是截取的字符數量，和slice相似，傳入負值也是從尾部算起的。算法

介紹一下ES6的暫時性死區和塊級做用域

js設計模式

請介紹一下裝飾者模式，並實現

在不改變元對象的基礎上，對這個對象進行包裝和拓展（包括添加屬性和方法），從而使這個對象能夠有更復雜的功能。編程

介紹一下職責鏈模式？

在不改變元對象的基礎上，對這個對象進行包裝和拓展（包括添加屬性和方法），從而使這個對象能夠有更復雜的功能。json

詳解 Javascript十大經常使用設計模式segmentfault

請說一下實現jsonp的實現思路？

jsonp的原理是使用script標籤來實現跨域，由於script標籤的的src屬性是不受同源策略的影響的，所以可使用其來跨域。一個最簡單的jsonp就是建立一個script標籤，設置src爲相應的url，在url以後添加相應的callback，格式相似於 url?callback=xxx，服務端根據咱們的callback來返回相應的數據，相似於res.send(req.query.callback + '('+ data + ')')，這樣就實現了一個最簡單的jsonp
jsonp的原理與實現
 fetch-jsonp源碼

如何實現一個雙向數據綁定？

如何實現一個前端模板引擎？

請簡要介紹一下PWA？

請介紹一下你所瞭解的函數式編程？

將靜態資源放在其餘域名的目的是什麼？

這樣作的主要目的是在請求這些靜態資源的時候不會發送cookie，節省了流量，須要注意的是cookie是會發送給子域名的（二級域名），因此這些靜態資源是不會放在子域名下的，而是單獨放在一個單獨的主域名下。同時還有一個緣由就是瀏覽器對於一個域名會有請求數的限制，這種方法能夠方便作CDN。
爲何淘寶、騰訊等會把靜態資源放在另一個主域名下？
爲何不少網站的靜態資源會使用獨立的域名？

前端如何實現PV和UV的統計？

簡要介紹一下RSA

介紹一下KMP算法？

如何實現對一個DOM元素的深拷貝，包括元素的綁定事件？

SPA的路由是若是實現的，若是你來作一個前端路由，你會怎麼作？

百度的構建工具FIS你瞭解嗎？

sessionStorage,localStorage,cookie區別

javascript有哪幾種方法定義函數

函數聲明表達式
function操做符
Function 構造函數
ES6:arrow function

js運算符

===運算符判斷相等的流程是怎樣的

1.若是兩個值不是相同類型，它們不相等
2.若是兩個值都是null或者都是undefined，它們相等
3.若是兩個值都是布爾類型true或者都是false，它們相等
4.若是其中有一個是NaN，它們不相等
5.若是都是數值型而且數值相等，他們相等， -0等於0
6.若是他們都是字符串而且在相同位置包含相同的16位值，他它們相等；若是在長度或者內容上不等，它們不相等；兩個字符串顯示結果相同可是編碼不一樣==和===都認爲他們不相等
7.若是他們指向相同對象、數組、函數，它們相等；若是指向不一樣對象，他們不相等

==運算符判斷相等的流程是怎樣的

1.若是兩個值類型相同，按照===比較方法進行比較
2.若是類型不一樣，使用以下規則進行比較
3.若是其中一個值是null，另外一個是undefined，它們相等
4.若是一個值是數字另外一個是字符串，將字符串轉換爲數字進行比較
5.若是有布爾類型，將true轉換爲1，false轉換爲0，而後用==規則繼續比較
6.若是一個值是對象，另外一個是數字或字符串，將對象轉換爲原始值而後用==規則繼續比較
7.其餘全部狀況都認爲不相等

<,>,<=,>=的比較規則

全部比較運算符都支持任意類型，可是比較只支持數字和字符串，因此須要執行必要的轉換而後進行比較，轉換規則以下:
1.若是操做數是對象，轉換爲原始值：若是valueOf方法返回原始值，則使用這個值，不然使用toString方法的結果，若是轉換失敗則報錯
2.通過必要的對象到原始值的轉換後，若是兩個操做數都是字符串，按照字母順序進行比較（他們的16位unicode值的大小）
3.不然，若是有一個操做數不是字符串，將兩個操做數轉換爲數字進行比較

+運算符工做流程

若是有操做數是對象，轉換爲原始值
此時若是有一個操做數是字符串，其餘的操做數都轉換爲字符串並執行鏈接
不然：全部操做數都轉換爲數字並執行加法

"==" 和 "===" 有什麼不一樣

相同：
== 和 === 都是比較等值比較運算符，返回的布爾類型的比較結果。
不一樣：

1) == 是等值比較運算符，使用的是 抽象等值 比較算法。
   === 是嚴格等值比較運算符，使用的 嚴格等值 比較算法。
2) == 運算符在比較值的時候，會根據二者類型是否相同而作不一樣的處理，
在二者不一樣類型的時候，會轉換類型後進行比較：
基本類型會轉成數字，引用類型會轉成對象原始值，而後再進行比較。
而 === 首先也會判斷類型是否一致，不一樣的是若是類型不一致則直接返回 false。

短路運算

window.foo || (window.foo = "bar"); 返回值是什麼？

又稱爲短路或，短路：若是左側爲真，則再也不進行右側運算，同時返回左側表達式運算結果。
若是左側爲假則執行右側表達式運算，並返回右側計算結果。
上面window.foo是不存在的，全部結果爲undefined，轉成boolean就是false，
那麼就會運算 window.foo = "bar"，
把 "bar" 賦值給 window.foo 的同時，
返回值也是 "foo"，因此打印返回結果是 "bar"

函數內部arguments變量有哪些特性,有哪些屬性,如何將它轉換爲數組

arguments全部函數中都包含的一個局部變量，是一個類數組對象，對應函數調用時的實參。若是函數定義同名參數會在調用時覆蓋默認對象
arguments[index]分別對應函數調用時的實參，而且經過arguments修改實參時會同時修改實參
arguments.length爲實參的個數（Function.length表示形參長度）
arguments.callee爲當前正在執行的函數自己，使用這個屬性進行遞歸調用時需注意this的變化
arguments.caller爲調用當前函數的函數（已被遺棄）
轉換爲數組：var args = Array.prototype.slice.call(arguments, 0);