【相關推薦：前端面試題】
1.幾個基本數據類型?複雜資料型別?值型別與引用資料型別?堆疊資料結構?
基本資料型別：Undefined、Null、Boolean、Number、String
值型別：數值、布林值、null、undefined。
引用類型：物件、陣列、函數。
堆疊資料結構：是一種支援後進先出(LIFO)的集合,即後被插入的資料,先被取出!
js數組中提供了以下幾個方法可以讓我們很方便實現堆疊：
shift:從陣列中把第一個元素刪除，並傳回這個元素的值。
unshift: 在數組的開頭添加一個或更多元素，並返回新的長度
push:在數組的中末尾添加元素，並返回新的長度
pop:從數組中把最後一個元素刪除，並傳回這個元素的值。
2.宣告函數作用提升?宣告變數與宣告函數的提升有什麼差別?
(1) 變數宣告提升：變數申明在進入執行上下文就完成了。
只要變數在程式碼中進行了聲明，無論它在哪個位置上進行聲明， js引擎都會將它的聲明放在範圍作用域的頂部；
(2) 函數聲明提升：執行程式碼之前會先讀取函數聲明，意味著可以把函數申明放在呼叫它的語句後面。
只要函數在程式碼中進行了聲明，無論它在哪個位置上進行聲明， js引擎都會將它的聲明放在範圍作用域的頂部；
(3) 變數or函數宣告：函數聲明會覆寫變數聲明，但不會覆寫變數賦值。
同一個名稱標識a，即有變數宣告var a，又有函數宣告function a() {}，不管二者宣告的順序，函數宣告會覆寫變數聲明，也就是說，此時a的值是宣告的函數function a() {}。注意：如果在變數宣告的同時初始化a，或是之後對a進行賦值，此時a的值變數的值。 eg: var a; var c = 1; a = 1; function a() { return true; } console.log(a);
3.判斷資料型別?
typeof傳回的型別都是字串形式，可以判斷function的型別；在判斷除Object型別的物件時比較方便。
判斷已知物件類型的方法： instanceof，後面一定要是物件類型，且大小寫不能錯，該方法適合一些條件選擇或分支。
4.非同步程式設計？
方法1：回呼函數，優點是簡單、容易理解和部署，缺點是不利於程式碼的閱讀和維護，各個部分之間高度耦合（Coupling），流程會很混亂，而且每個任務只能指定一個回呼函數。
方法2：時間監聽，可以綁定多個事件，每個事件可以指定多個回呼函數，而且可以「去耦合」（Decoupling），有利於實現模組化。缺點是整個程式都要變成事件驅動型，運作流程會變得很不清晰。
方法3：發布/訂閱，性質與「事件監聽」類似，但明顯優於後者。
方法4：Promises對象，是CommonJS工作小組提出的一種規範，目的是為非同步程式設計提供統一介面。
簡單說，它的想法是，每一個非同步任務返回一個Promise對象，該物件有一個then方法，允許指定回調函數。
5.事件流?事件擷取？事件冒泡？
事件流：從頁面中接收事件的順序。也就是說當一個事件產生時，這個事件的傳播過程，就是事件流。
IE中的事件流叫事件冒泡；事件冒泡：事件開始時由最具體的元素接收，然後逐級向上傳播到較為不具體的節點（文檔）。對html來說，就是當一個元素產生了一個事件，它會把這個事件傳遞給它的父元素，父元素接收到了之後，還要繼續傳遞給它的上一級元素，就這樣一直傳播到document對象（親測現在的瀏覽器到window對象，只有IE8及下不這樣
事件捕獲是不太具體的元素應該更早接受到事件，而最具體的節點應該最後接收到事件。他們的用意是在事件到達目標之前就捕獲它；也就是跟冒泡的過程正好相反，以html的click事件為例，document對象（DOM級規範要求從document開始傳播，但是現在的瀏覽器是從window物件開始的）最先接收到click事件的然後事件沿著DOM樹依次向下傳播，一直傳播到事件的實際目標；
6.如何清除一個定時器?
window.clearInterval();
window.clearTimeout();
#7.如何新增一個dom物件到body中?innerHTML和innerText區別?
body.appendChild(dom元素);#8.資料持久化技術(ajax)?簡述ajax流程
innerHTML:從物件的起始位置到終止位置的全部內容,包括Html標籤。
innerText:從起始位置到終止位置的內容, 但它去除Html標籤
分別簡述五個window物件、屬性
成員物件
window.event window.document window .history
window.screen window.navigator window.external
Window物件的屬性如下：
window // 複製window.name //為窗戶命名
window.defaultStatus //設定窗戶狀態列資訊
window.location //URL位址,配備佈置這個屬性可以開啟新的頁面
1)客戶端產生js的事件
3)對XMLHttpRequest進行設定9.回呼函數?
4)透過AJAX引擎發送非同步請求
5)伺服器端接收請求並且處理請求，返回html或xml內容
6)XML呼叫一個callback()處理回應回來的內容
7)頁面局部刷新
#回呼函數就是一個透過函數指標呼叫的函數。如果你把函數的指標（位址）當作參數傳遞給另一個函數，當這個指標被用來呼叫所指向的函數時，我們就說這是回呼函數。回調函數不是由該函數的實現方直接調用，而是在特定的事件或條件發生時由另外的一方調用的，用於對該事件或條件進行響應。
閉包：就是能夠讀取其他函數內部變數的函數。
記憶體外洩是指：以動態儲存分配函數記憶體空間，在使用完畢後未釋放，導致一直佔據該記憶體單元。直到程式結束。指任何物件在您不再擁有或需要它之後仍然存在。11.平常工作中怎麼樣進行資料互動?如果後台沒有提供資料怎麼樣進行開發?mock資料與後台傳回的格式不同意怎麼辦?
造成記憶體洩漏：
setTimeout 的第一個參數使用字串而非函數的話，會引發記憶體洩漏。
閉包、控制台日誌、循環（在兩個物件彼此引用且彼此保留時，就會產生一個循環）
防止記憶體洩漏：
1、不要動態綁定事件；
2、不要在動態添加，或會被動態移除的dom上綁事件，用事件冒泡在父容器監聽事件；
3、如果要違反上面的原則，必須提供destroy方法，保證移除dom後事件也被移除，這點可以參考Backbone的原始碼，做的比較好；
4、單例化，少創建dom，少綁事件。
由後台編寫介面文件、提供資料介面實、前台透過ajax存取實現資料互動；
傳回資料不統一時編寫映射檔對資料進行映射。12 簡述ajax執行流程
基本步骤：var xhr =null;//创建对象 if(window.XMLHttpRequest){ xhr = new XMLHttpRequest();}else{ xhr = new ActiveXObject("Microsoft.XMLHTTP");}xhr.open(“方式”,”地址”,”标志位”);//初始化请求 xhr.setRequestHeader(“”,””);//设置http头信息 xhr.onreadystatechange =function(){}//指定回调函数 xhr.send();//发送请求
自執行函數:1、宣告一個匿名函數2、馬上呼叫這個匿名函數。
14.html和xhtml有什麼差別?
好處：防止變數彌散到全局，以免各種js函式庫衝突。隔離作用域避免污染，或截斷作用域鏈，避免閉包造成引用變數無法釋放。利用立即執行特性，傳回所需的業務函數或對象，避免每次透過條件判斷來處理
場景：一般用於框架、外掛程式等場景
HTML是一種基本的WEB網頁設計語言，XHTML是一個基於XML的標記語言。
2.XHTML 元素必須關閉。15. 什麼是建構子？與普通函數有什麼差別?
3.標籤名必須用小寫字母。
4.空標籤也必須關閉。
5.XHTML 文件必須擁有根元素。
#
构造函数：是一种特殊的方法、主要用来创建对象时初始化对象，总与new运算符一起使用，创建对象的语句中构造函数的函数名必须与类名完全相同。
与普通函数相比只能由new关键字调用，构造函数是类的标示
16. 通过new创建一个对象的时候，函数内部有哪些改变
function Person(){}Person.prototype.friend = [];Person.prototype.name = '';// var a = new Person();// a.friend[0] = '王琦';// a.name = '程娇';// var b = new Person();// b.friend？// b.name?
1、创建一个空对象，并且 this 变量引用该对象，同时还继承了该函数的原型。
2、属性和方法被加入到 this 引用的对象中。
3、新创建的对象由 this 所引用，并且最后隐式的返回 this 。
17.事件委托？有什么好处?
（1）利用冒泡的原理，把事件加到父级上，触发执行效果
（2）好处：新添加的元素还会有之前的事件；提高性能。
18.window.onload ==? DOMContentLoaded ?
一般情况下，DOMContentLoaded事件要在window.onload之前执行，当DOM树构建完成的时候就会执行DOMContentLoaded事件，而window.onload是在页面载入完成的时候，才执行，这其中包括图片等元素。大多数时候我们只是想在DOM树构建完成后，绑定事件到元素，我们并不需要图片元素，加上有时候加载外域图片的速度非常缓慢。
19.节点类型?判断当前节点类型?
1. 元素节点
2. 属性节点
3. 文本节点
8. 注释节点
9. 文档节点
通过nodeObject.nodeType判断节点类型：其中，nodeObject 为DOM节点（节点对象）。该属性返回以数字表示的节点类型，例如，元素节点返回 1，属性节点返回 2 。
20.如何合并两个数组？数组删除一个元素?
//三种方法。 （1）var arr1=[1,2,3]; var arr2=[4,5,6]; arr1 = arr1.concat(arr2); console.log(arr1); （2）var arr1=[1,2,3]; var arr2=[4,5,6]; Array.prototype.push.apply(arr1,arr2); console.log(arr1); （3）var arr1=[1,2,3]; var arr2=[4,5,6]; for (var i=0; i < arr2.length; i++) { arr1.push( arr2[i] ); } console.log(arr1);
21.强制转换 显式转换 隐式转换?
//强制类型转换： Boolean(0) // => false - 零 Boolean(new object()) // => true - 对象 Number(undefined) // => NaN Number(null) // => 0 String(null) // => "null" parseInt( ) parseFloat( ) JSON.parse( ) JSON.stringify ( )
隐式类型转换：
在使用算术运算符时，运算符两边的数据类型可以是任意的，比如，一个字符串可以和数字相加。之所以不同的数据类型之间可以做运算，是因为JavaScript引擎在运算之前会悄悄的把他们进行了隐式类型转换的
（例如：x+"" //等价于String(x)
+x //等价于Number(x)
x-0 //同上
!!x //等价于Boolean(x),是双叹号）
显式转换：
如果程序要求一定要将某一类型的数据转换为另一种类型，则可以利用强制类型转换运算符进行转换，这种强制转换过程称为显示转换。
显示转换是你定义让这个值类型转换成你要用的值类型，是底到高的转换。例 int 到float就可以直接转，int i=5,想把他转换成char类型，就用显式转换（char）i
22. Jq中如何实现多库并存?
Noconfict 多库共存就是“$ ”符号的冲突。
方法一： 利用jQuery的实用函数$.noConflict();这个函数归还$的名称控制权给另一个库，因此可以在页面上使用其他库。这时，我们可以用"jQuery "这个名称调用jQuery的功能。 $.noConflict();
jQuery('#id').hide();
.....
//或者给jQuery一个别名
var $j=jQuery
$j('#id').hide();
.....
方法二： (function($){})(jQuery)
方法三： jQuery(function($){})
通过传递一个函数作为jQuery的参数，因此把这个函数声明为就绪函数。 我们声明$为就绪函数的参数，因为jQuery总是吧jQuery对象的引用作为第一个参数传递，所以就保证了函数的执行。
23.Jq中get和eq有什么区别？
get() :取得其中一个匹配的元素。num表示取得第几个匹配的元素，get多针对集合元素，返回的是DOM对象组成的数组 eq():获取第N个元素，下标都是从0开始，返回的是一个JQuery对象
24.如何通过原生js 判断一个元素当前是显示还是隐藏状态?
if( document.getElementById("div").css("display")==='none') if( document.getElementById("div").css("display")==='block') $("#div").is(":hidden"); // 判断是否隐藏 $("#div").is(":visible")
25.Jq如何判断元素显示隐藏？
//第一种：使用CSS属性 var display =$('#id').css('display'); if(display == 'none'){ alert("我是隐藏的！"); } //第二种：使用jquery内置选择器 仅仅是测试所用
if($("#test").is(":hidden")){ $("#test").show(); //如果元素为隐藏,则将它显现 }else{ $("#test").hide(); //如果元素为显现,则将其隐藏 } //第三种：jQuery判断元素是否显示 是否隐藏 var node=$('#id'); if(node.is(':hidden')){ //如果node是隐藏的则显示node元素，否则隐藏 node.show(); }else{ node.hide(); }
26.移动端上什么是点击穿透?
点击穿透现象有3种：
点击穿透问题：点击蒙层（mask）上的关闭按钮，蒙层消失后发现触发了按钮下面元素的click事件跨页面点击穿透问题：如果按钮下面恰好是一个有href属性的a标签，那么页面就会发生跳转另一种跨页面点击穿透问题：这次没有mask了，直接点击页内按钮跳转至新页，然后发现新页面中对应位置元素的click事件被触发了
解决方案：
1、只用touch
最简单的解决方案，完美解决点击穿透问题
把页面内所有click全部换成touch事件（ touchstart 、’touchend’、’tap’）
2、只用click
下下策，因为会带来300ms延迟，页面内任何一个自定义交互都将增加300毫秒延迟
3、tap后延迟350ms再隐藏mask
改动最小，缺点是隐藏mask变慢了，350ms还是能感觉到慢的
4、pointer-events
比较麻烦且有缺陷， 不建议使用mask隐藏后，给按钮下面元素添上 pointer-events: none; 样式，让click穿过去，350ms后去掉这个样式，恢复响应缺陷是mask消失后的的350ms内，用户可以看到按钮下面的元素点着没反应，如果用户手速很快的话一定会发现
27.Jq绑定事件的几种方式？on bind ?
jQuery中提供了四种事件监听方式，分别是bind、live、delegate、on，对应的解除监听的函数分别是unbind、die、undelegate、off
Bind( )是使用频率较高的一种，作用就是在选择到的元素上绑定特定事件类型的监听函数;
Live( )可以对后生成的元素也可以绑定相应的事件,处理机制就是把事件绑定在DOM树的根节点上，而不是直接绑定在某个元素上;
Delegate( )采用了事件委托的概念，不是直接为子元素绑定事件，而是为其父元素（或祖先元素也可）绑定事件，当在p内任意元素上点击时，事件会一层层从event target向上冒泡，直至到达你为其绑定事件的元素；
on( )方法可以绑定动态添加到页面元素的事件，on()方法绑定事件可以提升效率；
28.Jq中如何将一个jq对象转化为dom对象？
方法一：
jQuery对象是一个数据对象，可以通过[index]的方法，来得到相应的DOM对象。
如：var $v =$("#v") ; //jQuery对象
var v=$v[0]; //DOM对象
alert(v.checked) //检测这个checkbox是否被选中
方法二：
jQuery本身提供，通过.get(index)方法，得到相应的DOM对象
如：var $v=$("#v"); //jQuery对象
var v=$v.get(0); //DOM对象
alert(v.checked) //检测这个checkbox是否被选中
29.Jq中有几种选择器?分别是什么?
层叠选择器、基本过滤选择器、内容过滤选择器、可视化过滤选择器、属性过滤选择器、子元素过滤选择器、表单元素选择器、表单元素过滤选择器
30.Jq中怎么样编写插件?
//第一种是类级别的插件开发：//1.1 添加一个新的全局函数 添加一个全局函数，我们只需如下定义： jQuery.foo = function() { alert('This is a test. This is only a test.'); }; //1.2 增加多个全局函数 添加多个全局函数，可采用如下定义： jQuery.foo = function() { alert('This is a test. This is only a test.'); }; jQuery.bar = function(param) { alert('This function takes a parameter, which is "' + param + '".'); }; 调用时和一个函数的一样的:jQuery.foo();jQuery.bar();或者$.foo();$.bar('bar');//1.3 使用jQuery.extend(object); jQuery.extend({ foo: function() { alert('This is a test. This is only a test.'); }, bar: function(param) { alert('This function takes a parameter, which is "' + param +'".'); } }); //1.4 使用命名空间// 虽然在jQuery命名空间中，我们禁止使用了大量的javaScript函数名和变量名。// 但是仍然不可避免某些函数或变量名将于其他jQuery插件冲突，因此我们习惯将一些方法// 封装到另一个自定义的命名空间。jQuery.myPlugin = { foo:function() { alert('This is a test. This is only a test.'); }, bar:function(param) { alert('This function takes a parameter, which is "' + param + '".'); } }; //采用命名空间的函数仍然是全局函数，调用时采用的方法： $.myPlugin.foo(); $.myPlugin.bar('baz');//通过这个技巧（使用独立的插件名），我们可以避免命名空间内函数的冲突。//第二种是对象级别的插件开发//形式1： (function($){ $.fn.extend({ pluginName:function(opt,callback){ // Our plugin implementation code goes here. } }) })(jQuery); //形式2：(function($) { $.fn.pluginName = function() { // Our plugin implementation code goes here. }; })(jQuery);//形参是$，函数定义完成之后,把jQuery这个实参传递进去.立即调用执行。//这样的好处是,我们在写jQuery插件时,也可以使用$这个别名,而不会与prototype引起冲突
31.$('p+.ab')和$('.ab+p') 哪个效率高？
$('p+.ab')效率高
32.$.map和$.each有什么区别
map()方法主要用来遍历操作数组和对象，会返回一个新的数组。$.map()方法适用于将数组或对象每个项目新阵列映射到一个新数组的函数；
each()主要用于遍历jquery对象，返回的是原来的数组，并不会新创建一个数组。
33.编写一个 getElementsByClassName 封装函数?
34.简述下工作流程
我在之前的公司工作流程大概是這樣的：公司定稿會結束以後，會進行簡單的技術研討，然後我們前端會進行先期的技術準備。前端切圖人員會進行psd設計稿切圖，並將css檔案整合。我們主要編寫JS部分，其中包括搭建前端框架（大專案），編寫js業務和資料持久化操作，我們也會編寫js插件並且進行封裝方便使用，還有就是編寫JS前端組建和JS測試單元，最後將完成的JS部分與切圖人員提供的HTML頁面整合。最後對完成的頁面進行功能測試、頁面相容、產品還原。然後對產品進行封存，並提交測試。如果出現BUG會回傳給我們開發人員進行修改，再提交測試，最後測試成功，進行版本封存。等到程式全部上線的時候再進行線上測試。
35.一般使用什麼版本控制工具?svn如何對檔案加鎖
svn加鎖目的：為了避免多個人在同一時間對同一個檔案改動的相互覆蓋，版本控制系統就必須有一套衝突處理機制。
svn加鎖兩種策略：樂觀加鎖：所有簽出的檔案都是可讀寫的，對檔案的修改不必取得檔案的鎖，當你修改完檔案簽入時，會先要求你更新本機文件，版本控制系統不會覆蓋你的本地修改，而是會讓你自己合併衝突後簽入。
嚴格加鎖：所有簽出的檔案都是唯讀的，任何對檔案的修改必須要取得檔案的鎖，如果其他人沒有擁有該檔案的鎖，那麼版本控制系統就會授權給你文件的鎖，並將文件設定為可編輯的。
svn兩種加鎖步驟：樂觀加鎖：選擇你想要取得鎖定的文件，然後右鍵選單點擊TortoiseSVN 選取以取得鎖定。
嚴格加鎖：在想要採取嚴格加鎖的檔案或目錄上點選右鍵，使用TortoiseSVN 屬性選單，點選新屬性，選擇需要鎖定。
36. git 和svn的區別?
SVN是集中式版本控制系統，版本庫是集中放在中央伺服器的，而乾活的時候，用的都是自己的電腦，所以首先要從中央伺服器哪裡得到最新的版本，然後再乾活，幹完後，需要把自己做完的活推送到中央伺服器。集中式版本控制系統是必須連網才能運作，如果在區域網路還可以，頻寬夠大，速度夠快，如果在網路下，如果網路速慢的話，就納悶了。
Git是分散式版本控制系統，那麼它就沒有中央伺服器的，每個人的電腦就是一個完整的版本庫，這樣，工作的時候就不需要連網了，因為版本都是在自己的電腦上。既然每個人的電腦都有完整的版本庫，那多個人該如何協作呢？比如說自己在電腦上改了檔案A，其他人也在電腦上改了檔案A，這時，你們兩之間只要把各自的修改推送給對方，就可以互相看到對方的修改了。
37. jquery和zepto有什麼區別?
#1.針對行動裝置程序，Zepto有一些基本的觸控事件可以用來做觸控螢幕互動（tap事件、swipe事件），Zepto是不支援IE瀏覽器的，這不是Zepto的開發者Thomas Fucks在跨瀏覽器問題上犯了迷糊，而是經過了認真考慮後為了降低文件尺寸而做出的決定，就像jQuery的團隊在2.0版中不再支援舊版的IE（6 7 8）一樣。因為Zepto使用jQuery句法，所以它在文件中建議把jQuery當作IE上的後備函式庫。那樣程式仍能在IE中，而其他瀏覽器則能享受到Zepto在檔案大小上的優勢，然而它們兩個的API不是完全相容的，所以使用這種方法時一定要小心，並要做充分的測試。
2.Dom操作的差異：新增id時jQuery不會生效而Zepto會生效。
3.zepto主要用在行動裝置上，只支援較新的瀏覽器，好處是程式碼量比較小，效能也較好。
jquery主要是相容性好，可以跑在各種pc，移動上，好處是相容各種瀏覽器，缺點是程式碼量大，同時考慮相容，效能也不夠好。
38. $(function(){})和window.onload 和 $(document).ready(function(){})
window.onload:用於當頁面的所有元素，包括外部引用文件，圖片等都加載完畢時運行函數內的函數。 load方法只能執行一次，如果在js檔案裡寫了多個，只能執行最後一個。
$(document).ready(function(){})和$(function(){})都是用來當頁面的標準DOM元素被解析成DOM樹後就執行內部函數。這個函數是可以在js檔案裡多次寫的，對於多人共同寫的js就有很大的優勢，因為所有行為函數都會執行到。而且$(document).ready()函數在HMTL結構載入完後就可以執行，不需要等大型檔案載入或不存在的連線等耗時工作完成才執行，效率高。
39. Jq中 attr 和 prop 有什麼區別
對於HTML元素本身就帶有的固有屬性，在處理時，使用prop方法。
對於HTML元素我們自己自訂的DOM屬性，在處理時，使用attr方法。
40. 簡述下 this 和定義屬性和方法的時候有什麼差別?Prototype？
this表示當前對象，如果在全域作用範圍內使用this，則指稱目前頁面物件window； 如果在函數中使用this，則this指涉什麼是根據執行時間此函數在什麼對像上被呼叫。我們也可以使用apply和call兩個全域方法來改變函數中this的具體指向。
prototype本質上還是一個JavaScript物件。並且每個函數都有一個預設的prototype屬性。
在prototype上定義的屬性方法為所有實例共享，所有實例皆引用到同一個對象，單一實例對原型上的屬性進行修改，也會影響到所有其他實例。
41. 什麼是預編譯語音|預編譯處理器?
#Sass是一種CSS預處理器語言，透過程式產生CSS程式碼。因為可編程，所以操控彈性自由度高，方便實作一些直接寫CSS程式碼較困難的程式碼。
同時，因為Sass是產生CSS的語言，所以寫出來的Sass檔是不能直接用的，必須經過編譯器編譯成CSS檔才能使用。
CSS 預處理器是一種語言用來為CSS 增加一些程式設計的特性，無需考慮瀏覽器的兼容性問題，例如你可以在CSS 中使用變數、簡單的程式邏輯、函數等等在程式語言中的一些基本技巧，可以讓你的CSS 更見簡潔，適應性更強，程式碼更直覺等諸多好處。最常用的css預處理器有sass、less css、 stylus。
42.ajax 和 jsonp ？
ajax和jsonp的區別：
相同點：都是請求一個url
不同點：ajax的核心是透過xmlHttpRequest取得內容
jsonp的核心則是動態添加熱門教學更多>
JavaScript設計模式完整影片教學100406
JavaScript基礎入門及設計模式影片教學40206
JavaScript基本語法及基本語句影片教學93012
Javascript趣味課堂87164
