【相關推薦:前端面試題】
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