前端面試題以及常見問題與答案（JS部分持續更新ing......）

阿新 • • 發佈：2018-12-17

1.javascript的typeof返回哪些資料型別？例舉3種強制型別轉換和2種隱式型別轉換?（附加：””和“=”的不同）

object number function boolean underfind string symbol(ES6)

typeof null;  //object
typeof isNaN;//function
typeof isNaN(123);//boolean
typeof [];//object 
toString.call([]);//”[object Array]”

強制(String(),Boolean(),Number(),parseInt,parseFloat); 隱式

（== +和-）附加兩者的不同：前者會自動轉換型別，後者不會

1==”1”//true
null==undefined//true
===先判斷左右兩邊的資料型別，如果資料型別不一致，直接返回false
   之後才會進行兩邊值的判斷

undefined會在以下三種情況下產生： 1.一個變數定義了卻沒有被賦值 2.想要獲取一個物件上不存在的屬性或者方法: 3.一個數組中沒有被賦值的元素

2.split() join() 的區別

split()用於分割字串，返回一個數組，例如

var string=“Hello World?name=xiaoming”;
var splitString= string. 
split("?");
console.log(splitString);//["Hello World","name=xiaoming"]

join()用於連線多個字元或字串，返回值為一個字串；例如

var a=new Array();
    a[0]="Hello";
    a[1]="xiao";
    a[2]="ming";
    alert(a.join("#")); //Hello#xiao#ming

3.陣列方法pop() push() unshift() shift()

Push()尾部新增 pop()尾部刪除 Unshift()頭部新增 shift()頭部刪除這裡先不多說，這部分有時間我會另寫文章詳細去介紹改部分

4.普通事件和事件繫結有什麼區別

（1）普通新增事件的方法：

var btn = document.getElementById("hello");
btn.onclick = function(){
	alert(1);
}
btn.onclick = function(){
	alert(2);
}
執行上面的程式碼只會alert 2

(1).普通新增事件的方法不支援新增多個事件，最下面的事件會覆蓋上面的 (2).不支援DOM事件流事件捕獲階段目標元素階段=>事件冒泡階段

（2）事件繫結方式新增事件：

var btn = document.getElementById("hello");
btn.addEventListener("click",function(){
	alert(1);
},false);
btn.addEventListener("click",function(){
	alert(2);
},false);
執行上面的程式碼會先alert 1 再 alert 2

(1).事件繫結(addEventListener)方式新增事件可以新增多個,繫結將會依次觸發 (2).支援DOM事件流的

5.IE和DOM事件流的區別

1.執行順序不一樣 2.引數不一樣 3.事件加不加on 4.this指向問題 IE9以前：attachEvent(“onclick”)、detachEvent(“onclick”) IE9開始跟DOM事件流是一樣的，都是addEventListener

6.IE和標準下有哪些相容性的寫法

var ev = ev || window.event
document.documentElement.clientWidth || document.body.clientWidth
var target = ev.srcElement||ev.target

7.call和apply的區別

call和apply相同點：呼叫一個物件的一個方法，用另一個物件替換當前物件。 例如：

B.call(A, args1,args2);即A物件呼叫B物件的方法。
B.apply(A, arguments);即A物件應用B物件的方法。
--------------------------------------
toString.call([],1,2,3)
toString.apply([],[1,2,3])
Object.call(this,obj1,obj2,obj3)
Object.apply(this,arguments)

8.b繼承a的方法

考點：繼承的多種方式 1.原型繼承、2.建構函式繼承、3.call和apply實現繼承

function b(){}
b.protoototype=new a;

9.事件委託是什麼？JS的事件流模型都有什麼？

利用事件冒泡的原理，讓自己的所觸發的事件，讓他的父元素代替執行 “事件冒泡”：事件開始由最具體的元素接受，然後逐級向上傳播 “事件捕捉”：事件由最不具體的節點先接收，然後逐級向下，一直到最具體的 “DOM事件流”：三個階段：事件捕捉，目標階段，事件冒泡

10.如何阻止事件冒泡和預設事件？

e. stopPropagation();//標準瀏覽器
event.canceBubble=true;//ie9之前
阻止預設事件：
為了不讓a點選之後跳轉，我們就要給他的點選事件進行阻止
return false 
e.preventDefault();

11.閉包是什麼?閉包有什麼缺點？什麼是作用域？

閉包就是能夠讀取其他函式內部變數的函式。缺點：濫用閉包函式會造成記憶體洩露，因為閉包中引用到的包裹函式中定義的變數都永遠不會被釋放，所以我們應該在必要的時候，及時釋放這個閉包函式作用域：定義一個函式就開闢了一個區域性作用域，整個js執行環境有一個全域性作用域。例如：

var a = function(x){
    var b = 'bb';
    return b;
};

12.節點的操作新增刪除替換插入查詢建立

obj.appendChild()//新增
obj.insertBefore() //插入
obj.replaceChild()//替換
obj.removeChild()//刪除
getElementsByTagName()//通過標籤名稱
getElementsByName()//通過元素的Name屬性的值
getElementById()//通過元素Id，唯一性
document.createElement()//建立元素節點

13.javascript的本地物件，內建物件和宿主物件

本地物件為array obj regexp等可以new例項化內建物件為gload Math 等不可以例項化的宿主為瀏覽器自帶的document,window 等

14.document load 和document ready的區別

1.load是當頁面所有資源全部載入完成後（包括DOM文件樹，css檔案，js檔案，圖片資源等），執行一個函式;問題：如果圖片資源較多，載入時間較長，onload後等待執行的函式需要等待較長時間，所以一些效果可能受到影響 (1).Document.onload 是在結構和樣式載入完才執行js (2).window.onload：不僅僅要在結構和樣式載入完，還要執行完所有的樣式、圖片這些資原始檔，全部載入完才會觸發window.onload事件 2.$(document).ready()是當DOM文件樹載入完成後執行一個函式（不包含圖片，css等）所以會比load較快執行;在原生的jS中不包括ready()這個方法，只有load方法就是onload事件

15.javascript的同源策略

同源策略是對javascript程式碼能夠操作那些web內容的一條完整的安全限制。當web頁面使用多個

http,ftp:協議
主機名；localhost
埠名：80:http協議的預設埠
https:預設埠是8083
同源策略帶來的麻煩：ajax在不同域名下的請求無法實現，
如果說想要請求其他來源的js檔案，或者json資料，那麼可以通過jsonp來解決

16.希望獲取到頁面中所有的checkbox怎麼做？(不使用第三方框架)

var domList = document.getElementsByTagName(‘input’)
var checkBoxList = [];//返回的所有的checkbox
var len = domList.length;　　//快取到區域性變數
while (len--) {　　//使用while的效率會比for迴圈更高
　　if (domList[len].type == ‘checkbox’) {
    　　checkBoxList.push(domList[len]);
　　}
}

17.設定一個已知ID的DIV的html內容為xxxx，字型顏色設定為黑色(不使用第三方框架)

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

18.當一個DOM節點被點選時候，我們希望能夠執行一個函式，應該怎麼做？

直接在DOM裡繫結事件：`<div onclick=”test()”></div>
在JS裡通過onclick繫結：xxx.onclick = test
通過事件新增進行繫結：addEventListener(xxx, ‘click’, test)

19.已知有字串foo=”get-element-by-id”,寫一個function將其轉化成駝峰表示法”getElementById”。

function combo(msg){
    var arr=msg.split("-");//[get,element,by,id]
    for(var i=1;i<arr.length;i++){
        arr[i]=arr[i].charAt(0).toUpperCase()+arr[i].substr(1,arr[i].length-1);//Element
    }
    msg=arr.join("");//msg=” getElementById”
    return msg;
}

20.輸出今天的日期，以YYYY-MM-DD的方式，比如今天是2018年10月24日，則輸出2018-10-24

var d = new Date();
// 獲取年，getFullYear()返回4位的數字
var year = d.getFullYear();
// 獲取月，月份比較特殊，0是1月，11是12月
var month = d.getMonth() + 1;
// 變成兩位
month = month < 10 ? ‘0‘ + month : month;
// 獲取日
var day = d.getDate();
day = day < 10 ? ‘0‘ + day : day;
alert(year + ‘-‘ + month + ‘-‘ + day);

21.將字串”{ $KaTeX parse error: Expected 'EOF', got '}' at position 3: id}̲</td><td>{$ name}”中的{ $KaTeX parse error: Expected 'EOF', got '}' at position 3: id}̲替換成10，{$ name}Sum （使用正則表示式）

var map={"id":"10","name":"Sum"};
var input="<tr><td>{$id}</td><td>{$name}</td></tr>";
/**
**根據傳入的資料來源欄位值，去替換字串
**/
function setData(dataObj,template){
    return template.replace(/{\$([^{}]+)}/ig,function(match,group1){
        return dataObj[group1];
    });
}
setData(map,input);

22.為了保證頁面輸出安全，我們經常需要對一些特殊的字元進行轉義，請寫一個函式escapeHtml，將<, >, &, “進行轉義

function escapeHtml(str) {
//[<>”&]:中括號中字元只要其中的一個出現就代表滿足條件
//給replace第二個引數傳遞一個回撥函式，回撥函式中引數就是匹配結果，如果匹配不到就是null
return str.replace(/[<>”&]/g, function(match) {
    switch (match) {
      case “<”:
         return “&lt;”;
      case “>”:
          return “&gt;”;
      case “&”:
          return “&amp;”;
      case “\””:
         return “&quot;”;
     }
  });
}

23.foo = foo||bar ，這行程式碼是什麼意思？為什麼要這樣寫？

該方式也稱短路表示式：作為”&&”和”||”操作符的運算元表示式，這些表示式在進行求值時，只要最終的結果已經可以確定是真或假，求值過程便告終止，這稱之為短路求值。注意if條件的真假判定，記住以下是false的情況：空字串、false、undefined、null、0

24.用js實現隨機選取10–100之間的10個數字，存入一個數組，並排序。

/*function sortNumber(a,b){
   return a-b;//升序
   //return b-a;//降序
  }*/
  //下列為程式碼
   var iArray =[];
  function getRandom(iStart,iEnd){
   var iChoice = iStart-iEnd+1;
   return Math.abs(Math.floor(Math.random()*iChoice))+iStart;
  }
  for(var i=0;i<10;i++){
   iArray.push(getRandom(10,100))
  }
  iArray.sort(sortNumber);
  console.log(iArray)

25.正則表示式建構函式var reg=new RegExp(“xxx”)與正則表達字面量var reg=//有什麼不同？匹配郵箱的正則表示式？

當使用RegExp()建構函式的時候，不僅需要轉義引號（即\”表示”），並且還需要雙反斜槓（即\表示一個\）。使用正則表達字面量的效率更高。 郵箱的正則匹配：

var regMail = /^([a-zA-Z0-9_-])[email protected]([a-zA-Z0-9_-])+((.[a-zA-Z0-9_-]{2,3}){1,2})$/;

26.JS中caller和callee的作用？

arguments.callee：獲得當前函式的引用 caller是返回一個對函式的引用，該函式呼叫了當前函式； callee是返回正在被執行的function函式，也就是所指定的function物件的正文。

27.完成函式showImg()，要求能夠動態根據下拉列表的選項變化，更新圖片的顯示（相當於下拉列表）

<body>
<script type=”text/javascript” >
function showImg (oSel) {
//在此處新增程式碼 
var str = oSel.value;
document.getElementById(“pic”).src= str+”.jpg”;
}
</script>
<img id=”pic”src=”img1.jpg”width=”200″ height=”200″ />
<br />
<select id=”sel”>
<option value=”img1“>城市生活</option>
<option value=”img2“>都市早報</option>
<option value=”img3“>青山綠水</option>
</select></body>