常見js筆試面試題（持續更新）

時間 2019-11-07

標籤常見筆試面試持續更新欄目 JavaScript 简体版

原文原文鏈接

本文提供最簡便的解答方式，方便快速記憶，覆盤，詳細答案可本身再搜一下。

js基礎知識

1. javascript typeof返會的數據類型有哪些

object,string,undefined,number,function,booleanjavascript

基本數據類型：
string,number,boolean,undefined,null

2. 列舉三種強制類型轉換和兩種隱式類型轉換

parseInt(),parseFloat(),Number()
==,!!php

3. 數組相關集合

3.1. 建立數組方法

var array = new Array()
var array = []

Array.of(1,2) //[1,2]
這是es6新增的一個Array方法，建立一個具備可變數量參數的新數組實例，而不考慮參數的數量或類型。
（感謝 haru 的寶貴建議）html

4. 判斷是否爲數組的方法

console.log(arr instanceof Array)
console.log(arr.construct === Array)
console.log(Array.isArray(arr))

5. pop(),push(),unshift(),shift()

pop()尾部刪除
push()尾部插入
unshift()頭部插入
shift()頭部刪除

6. DOM0 DOM2

dom0級前端

不支持添加多個事件，後面的會覆蓋前面的
沒法取消

var btn = document.getElementById("button");
btn.onclick = function(){
    alert(1);
}
btn.onclick = function(){
    alert(2);
}       //只彈出2

dom2java

能夠添加多個事件
不兼容低版本IE
支持事件冒泡，事件捕獲

var btn = document.getElementById("button");
btn.addEventListener("click",function(){
    alert("1");
})
btn.addEventListener("click",function(){
    alert("2");
})              //先彈出1，再彈出2

7. IE和DOM事件流的區別

執行順序不同
參數不同低版本ie沒有回調函數，只能進行冒泡
第一個參數是否加"on",低版本IE不支持addEventListener(),支持attachEvent,第一個參數須要加"on"
this指向問題，IE指向windows,不指向觸發的函數

8. IE標準下有哪些兼容性寫法

var ev = ev||window.event

document.documentElement.clientWidth||document.body.clientWidth

var target = ev.srcElement||ev.target

9. call apply bind

改變this的指向，
其中call的寫法linux

function add(a,b)  
{  
    alert(a+b);  
}  
function sub(a,b)  
{  
    alert(a-b);  
}  
  
add.call(sub,3,1);

這個例子中的意思就是用 add 來替換 sub，add.call(sub,3,1) == add(3,1) ，因此運行結果爲：alert(4); // 注意：js 中的函數實際上是對象，函數名是對 Function 對象的引用。
apply寫法es6

function add(a,b)  
{  
    alert(a+b);  
}  
function sub(a,b)  
{  
    alert(a-b);  
}  
add.apply(sub,[4,2]);

不一樣就在於第二個參數，apply寫成數組web

bind寫法ajax

function add(a,b)  
{  
    alert(a+b);  
}  
function sub(a,b)  
{  
    alert(a-b);  
}  
add.bind(sub,4,2)();

bind是返回了一個改變上下文的一個函數，能夠稍後調用，而apply，call是當即執行函數數據庫

10. b繼承a的方法（js面向對象複習）

原型鏈繼承
構造函數繼承
實例繼承
組合繼承
拷貝繼承
寄生組合繼承

11. 如何阻止事件冒泡和默認事件

cancelBubble(IE),
return false,
event.preventDefault,
event.stopPropagation()

12. 添加刪除替換插入到某個DOM節點的方法

obj.appendChild()
obj.insertBefore()
obj.replace()
obj.remove()

13. window.onload和$(document).ready的區別

window.onload只能出現一次，$(document).ready能出現屢次
window.onload須要等全部文件都加載完纔開始加載，$(document).ready只需等文檔結構加載完了就開始加載

14. == 和 === 區別

前者會自動轉換類型
後者不會

15. javascript的同源策略（跨域問題）

跨域是什麼：實際上就是一個網站不能執行其餘網站上的網址，是由瀏覽器同源策略形成的，是瀏覽器對js施加的安全限制
所謂同源，其實是指域名，協議，端口都相同
也就是說當，域名或者協議，或者端口不一樣的時候，就是跨域，

15.1. 解決方法：

jsonp

json with padding,是一種json的一種使用模式
產生的緣由，ajax不支持跨域，因爲瀏覽器的同源策略，可是script的src支持跨域
主要的原理是動態建立一個script標籤的，經過src調用服務器提供的js腳本，該腳本的內容是一個函數調用，該函數在本地js文件中進行定義，其中的參數就是，本地函數請求的數據，也就是服務器所將返回的數據

與ajax的不一樣，ajax是經過xhr獲取非本頁面的數據內容，而jsonp獲取的是服務器提供js腳本

代理

例如www.123.com/index.html須要調用
www.456.com/server.php，能夠寫一個接口
www.123.com/server.php，由這個接口在後端去調用
www.456.com/server.php並拿到返回值，而後再返回給 index.html，這就是一個代理的模式。至關於繞過了瀏覽器端，天然就不存在跨域問題。

PHP端修改header（XHR2方式）
在php接口腳本中加入如下兩句便可：
header('Access-Control-Allow-Origin:*');//容許全部來源訪問
header('Access-Control-Allow-Method:POST,GET');//容許訪問的方式

16. javascript是一種什麼樣的語言

解釋性腳本語言，代碼不進行預編譯
主要用來向HTML頁面添加交互行爲
能夠直接嵌入HTML頁面，但單獨寫成js文件有利於結構和行爲的分離
跨平臺性，在絕大多數瀏覽器支持下，能夠在多種平臺下運行，linux,windows

17. javascript基本數據類型和引用數據類型

基本類型 undefind null number string boolean

基本類型的值是不能改變的
基本類型不能添加屬性和方法
基本類型的比較是值的比較
基本類型變量存放在棧區（棧內存）
也就是說基本類型在賦值操做後，兩個變量是相互不受影響的。

引用類型 object Function Array

引用類型能夠添加屬性和方法，屬性方法內又能夠添加基本類型
引用類型的值是可變的
引用類型的值時同時保存在棧內存和堆內存裏的對象，準確地說，引用類型的存儲須要內存的棧區和堆區（堆區是指內存裏的堆內存）共同完成，棧區內存保存變量標識符和指向堆內存中該對象的指針，
引用類型的比較是引用的比較引用類型時按引用訪問的，換句話說就是比較兩個對象的堆內存中的地址是否相同，那很明顯，person1和person2在堆內存中地址是不一樣的
引用類型的賦值實際上是對象保存在棧區地址指針的賦值，所以兩個變量指向同一個對象，任何的操做都會相互影響

18. js原生不要與jq搞混

document.getELementById("ID").value

獲取值的時候原生不是方法，不帶括號

獲取全部checkbox

var boxs =document.getELementsByTagName("input");
var boxArray = [];
var len = boxs.length;
while(len--){
    if(boxs[len].type == 'checkbox'){
        boxArray.push(boxs[len]);
    }
}

設置div html內容以及設置樣式

var dom = document.getElementById("ID");
dom.innerHTML = "xxxx"
dom.style.color="#000"

19. DOM,BOM

javascript由ECMAScript,DOM,BOM三部分組成，

ECMAScript也是一種語言，也就是對規定的語法，操做，關鍵字，語句等的一個描述，javascript實現了ECMAScript
DOM是文檔對象模型，包括了獲取元素，修改樣式，操做元素三方面內容，也是咱們進行最多的操做，有不少兼容性寫法
BOM是瀏覽器對象模型，包括瀏覽器的一些操做，window.onload,window.open等還有瀏覽器事件，監聽窗口的改變onresize,監聽滾動事件onscroll等

20. null和undefind的區別

null是表示一個空的對象，轉爲數值爲0，undefind表示一個空的原始值，轉爲數值爲NAN
undefind指本該有一個值，但卻並有定義，null表示沒有對象，不該該有值

21. XML和JSON的區別

JSON相對於XML來說傳遞速度更快，由於光看代碼量就能看出
JSON與js的交互更容易，解析更方便

22. 實現多個標籤之間的通訊

調用localStorage,cookies等本地存儲進行存儲相關信息
三者的共同點：都保存在瀏覽器。
三者的區別：

與服務器的交互

cookie數據始終在同源的http請求中攜帶（即便不須要），即cookie在瀏覽器和服務器間來回傳遞。
而sessionStorage和localStorage不會自動把數據發給服務器，僅在本地保存。cookie數據還有路徑（path）的概念，能夠限制cookie只屬於某個路徑下。

存儲大小限制也不一樣，

cookie數據不能超過4k，同時由於每次http請求都會攜帶cookie，因此cookie只適合保存很小的數據，如會話標識。
sessionStorage和localStorage 雖然也有存儲大小的限制，但比cookie大得多，能夠達到5M或更大。

數據有效期不一樣，

sessionStorage：僅在當前瀏覽器窗口關閉前有效，天然也就不可能持久保持；
localStorage：始終有效，窗口或瀏覽器關閉也一直保存，所以用做持久數據；
cookie只在設置的cookie過時時間以前一直有效，即便窗口或瀏覽器關閉。

做用域不一樣，

sessionStorage不在不一樣的瀏覽器窗口中共享，即便是同一個頁面；
localStorage 在全部同源窗口中都是共享的；
cookie也是在全部同源窗口中都是共享的。

23. 哪些操做會形成內存泄露

內存泄露指任何對象在再也不擁有或再也不須要它以後依然存在

setTimeout第一個參數是字符串而不是函數的時候就會形成內存泄露
閉包
控制檯日誌
循環（兩個對象彼此引用且彼此保留）

24. js垃圾回收方式

標記清除：這是js最經常使用的垃圾回收方法，當一個變量進入執行環境時，例如函數中聲明一個變量，將其標記爲進入環境，當變量離開環境時，（函數執行結束），標記爲離開環境
引用計數: 跟蹤記錄每一個值被引用的次數，聲明一個變量，並將引用類型賦值給這個變量，則這個值的引用次數+1，當變量的值變成了另外一個，則這個值的引用次數-1，當值的引用次數爲0的時候，就回收

25. 閉包

函數嵌套函數
子級函數調用父級函數的參數或變量

經典閉包

function outer(){
    var a = 1;
    function inner(){
        alert(a);
    }
    return inner
}
var inn = outer();
inn();

點擊li返回li下標

<ul id="test">
    <li>1</li>
    <li>2</li>
    <li>3</li>
</ul>

<script>
    var oUL = document.getElementById("test");
    var oLi = oUl.getElementByTagName("li");
    for(var i=0;i<oLi.length;i++){
        oLi[i].index = i;
        oLi[i].onclick = function(){
            alert(this.index);
        }
    }

</script>

<!-- 閉包 -->
<script>
    var oUL = document.getElementById("test");
    var oLi = oUl.getElementByTagName("li");
    for(var i=0;i<oLi.length;i++){
        oLi[i].index = i;
        oLi[i].onclick = (function(a){
            return function(){
                alert a;
            }
        })(i)
    }

</script>

26. this指向問題

普通函數調用，指向windows

window.value=1;
function getValue(){
 console.log(this.value);
}
getValue();//輸出1，此時的this指向window

對象的方法調用，指向對象

var Obj={
  value:2,
  getValue:function(){
       console.log(this.value);//輸出2,this指向Obj
  }   
}

構造器方法調用，指向構造函數實例出來的對象

function main(val){
  this.value=val;
}
main.prototype.getValue=function(){
  console.log(this.value);
}

var fun=new main(3);
fun.getValue();
fun.value;//輸出3，this指向main的實例對象fun

call,apply,bind能夠自定義this指向第一個參數

function showValue(){
  console.log(this.value);
}
var obj={
  value:4
}
showValue.call(obj)//輸出4，this指向了obj對象

function showValue(){
  console.log(this.value);
}
var obj={
  value:4
}
var showValue2=showValue.bind(obj);
showValue2()//輸出4，this指向了obj對象

27. 高階函數

函數做爲參數傳遞，
函數做爲返回值輸出

28. new操做符到底幹了什麼

建立一個新對象
將構造函數的做用域賦值給新對象（因此this指向了這個新對象）
執行構造函數的代碼（爲這個新對象添加屬性）
返會新對象

29. js嚴格模式

"use strict"
消除js一些不合理的用法
消除代碼運行的一些不安全之處
增長運行速度
爲將來新版本js作鋪墊

變量必須聲明
對象不能出現重複屬性名
arguments改變，不會影響函數參數
eval，arguments變爲關鍵字，不能做爲變量名
不容許使用with
不用call，apply，bind改變this指向，通常函數調用指向null

30. 事件代理事件委託

原理是使用dom的冒泡，將事件綁定到父元素上，讓父元素進行監聽，提升性能

31.什麼是版本控制，

版本控制是一種記錄一個或若干文件內容變化，以便未來查閱修改以及更新。

32.ajax請求

ajax請求四步

建立一個xhr對象 var xhr = new XmlHttpRequest()
判斷就緒狀態爲4時執行代碼

xhr.onreadystatechange = function(){
    if(xhr.readyState == 4){
        console.log(responseText);
    }
}

建立請求 xhr.open('get','url',true)
發送請求 xhr.send(null)

33.在瀏覽器中輸入URL到整個頁面顯示在用戶面前時這個過程當中到底發生了什麼

DNS解析
TCP鏈接
發送HTTP請求
服務器處理請求並返回HTTP報文
瀏覽器解析渲染頁面
鏈接結束

詳細：

首先根據url中的域名，在遠程服務器中查詢對應

34.ajax和json

ajax用於web頁面中實現異步數據交互，實現頁面局部內容刷新

優勢：可以進行內容局部加載刷新，減小帶寬，避免用戶不斷刷新以及頁面跳轉，提升用戶體驗
缺點：對搜索引擎不友好；瀏覽器不支持ajax的後退；

json是一種請求輕量級的數據交互格式

優勢：輕量級，便於人的閱讀理解，便於機器解析

35.http考點

經常使用的HTTP方法有哪些

GET:
POST:
PUT:
DELETE:

GET與POST方法的區別

get主要是從服務器獲取資源，post主要是像服務器發送數據
get傳輸數據經過url請求，利用k=v的形式放在url後面，用?鏈接，多個用&鏈接而post是存放在，ajax中的data中的，get傳輸的過程使用戶可見的，而post是對用戶不可見的。
get傳輸的數據量小，由於受url的長度限制，可是效率高，post能上傳的數據量大
post較get更安全一些
get方式傳遞的中文字符可能會亂碼，post支持標準字符集，能夠正確傳遞中文字符

http請求報文與響應報文格式

請求報文包含三部分：

請求行：包含請求方法、URI、http版本信息
請求首部字段
請求內容實體

響應報文包含三部分：

狀態行：包含HTTP版本、狀態碼、狀態碼的緣由短語
響應首部字段
響應內容實體

http狀態碼

100-199：成功接收請求，但須要進行下一步請求
200-299：成功接收請求，並完成整個處理過程
300-399：爲完成所有請求，客戶需近一步細化需求
400-499：客戶端請求有錯誤，包括語法錯誤或不能正常執行
500-599：服務器端出現錯誤

http缺點與https

通訊使用明文不加密，內容可能被竊聽
不驗證通訊方身份，可能遭到假裝
沒法驗證報文完整性，可能被篡改

https就是加上加密處理（通常是SSL安全通訊線路）+認證+完整性保護

經常使用：

200 正常，表示一切正常，返會的是正常請求結果
302/307 臨時重定向，表示請求的文檔，已被臨時移動到別處
304 未修改，調用緩存的數據
403 服務器拒絕客戶請求
404 服務器不存在客戶想要找的資源
500 服務器內部錯誤

36.數組去重的一種相對好理解的方法

利用indexOf方法的去重

indexOf() 方法可返回某個指定的字符串值在字符串中首次出現的位置。

var arr = [1,1,2,3,4,2,6,4,5,7];
var nArr = [];
function removeItem(arr){
    for(var i=0;i<arr.length;i++){
        if(nArr.indexOf(arr[i])==-1){
            nArr.push(arr[i]);
        }
    }
    return nArr;
}
console.log(removeItem(arr));

es6

let const

let至關於給js新增了塊級做用域，聲明的變量只在let命令所在的代碼塊內有效
const也是聲明變量，它聲明的變量，不能改變，能夠用來聲明第三方庫變量的應用

class extends super

class定義一個類，其中有一個construct方法，construct方法中的this表明實例對象，construct之外還有其餘的方法，construct內定義的方法屬性是實例對象本身的，construct外的方法屬性是全部實例對象共享的
class之間能夠經過extends實現繼承
super指代父類的實例，子類construct中必須先調用super()方法，由於子類沒有本身的this對象，是繼承父類的this對象

arrow function(箭頭函數)

除了書寫簡潔了不少，最大的優勢是this指向，使用箭頭函數，函數內部的this就是定義時所在的對象。箭頭函數根本沒有本身的this，this是繼承外面的，它內部的this就是外層代碼塊的this

template string(模板字符串)

ajax調用數據庫，須要向文檔中插入大段html的時候，傳統的字符串拼接太麻煩，引入模板工具庫會稍微好點，不過仍是沒有es6的template string簡單，能夠直接用反單引號包括代碼塊``,用${}來引用變量，全部的空格縮進都會保留到輸出中

destructuring(解構賦值)

es6按照必定模式，從數組和對象中提取值，對變量進行賦值，這就成爲解構，也就是說，運用es5的方法，數組和對象中的變量須要，一個個進行賦值，而es6能夠一步到位

default,rest(默認值，擴展語法)

當函數忘記傳參的時候，給它一個默認值，傳統方法是在函數中運用||，es6能夠直接在參數中寫上

function animal(type){
    type = type || 'cat'  
    console.log(type)
}
animal()

function animal(type = 'cat'){
    console.log(type)
}
animal()

function animals(...types){
    console.log(types)
}
animals('cat', 'dog', 'fish') //["cat", "dog", "fish"]

gulp

gulp是一種自動化構建工具，前端工程化開發的一種工具，加強開發流程
使用方便，npm安裝，新建gulpfile.js,導入gulp模塊，let gulp = require('gulp')
經過default任務去定義工做流
最後在終端執行gulp來進行自動化操做

api很簡單隻有四種

gulp.task 建立任務：參數任務名稱，前置任務數組，回調函數
gulp.src 尋找文件：經過路徑找到一個或多個文件
gulp.dest 輸出到指定目錄：若是沒有就新建一個
gulp.watch 監聽文件變化，執行任務
pipe具體不清楚，總之，除了gulp.src以外，其餘執行條件都要放在.pipe()中

Bootstrap

Bootstrap和Foundation的比較

UI元素的不一樣

Bootstrap給出了能想到的一切元素，也就是試圖提供全部定義好的UI，好比一個導航，給予一個默認導航的樣式
Foundation只給定了限定的幾種元素，能夠本身自定義，更適合創造

尺寸單位不同，

Bootstrap是px
Foundation是rem

網格佈局有所不一樣

Foundation 的網格能夠自動適配當前瀏覽器的寬度，Foundation 則會靈活適配當前的瀏覽器寬度, 這是一種新的技術手段, 自動適配的同時, 能夠表現的與 Transformer 同樣的效果.
Boostrap 則是預約義了幾種網格尺寸來適配主流的設備和屏幕.Bootstrap 會在你改變瀏覽器寬度的時候忽然改變它的網格.