1、javascript的typeof返回哪些資料型別 object number function boolean underfind string typeof isNaN 檢測陣列的幾種方式： Array.isArray(); es5 toString.call([]);//”[object Array]” var arr=[]; arr.constructor;//Array instanceof Array 2、傳統事件繫結和符合W3C標準的事件繫結有什麼區別？

123

div1.onclick=function(){}; 1、如果說給同一個元素綁定了兩次或者多次相同型別的事件，那麼後面的繫結會覆蓋前面的繫結 2、不支援DOM事件流 事件捕獲階段è目標元素階段=>事件冒泡階段 符合W3C標準的事件繫結的方式 addEventListener/attachEvent A、非IE瀏覽器： addEventListener 1、 如果說給同一個元素綁定了兩次或者多次相同型別的事件，所以的繫結將會依次觸發 2、 支援DOM事件流的 3、 進行事件繫結傳參不需要on字首 addEventListener(“click”,function(){},true);//此時的事件就是在事件捕獲階段執行 第三個引數：代表是否在捕獲階段執行，預設值是false addEventListener(“click”,function(e){ }) addEventListener(“click”,function(){},false) 事件在冒泡階段執行 B、IE瀏覽器 ie9開始，ie11 edge：addEventListener ie9以前 ie8：attachEvent/detachEvent 1、 進行事件型別傳參需要帶上on字首 dom1.attachEvent(“onclick”,functioin(){}); 2、 這種方式只支援事件冒泡，不支援事件捕獲 3、IE和標準下有哪些相容性的寫法 ev = ev || window.event è獲取觸發事件的物件 var target = ev.srcElement||ev.target à獲取事件的源物件 document.documentElement.clientWidth || document.body.clientWidth 4、call和apply的區別 call和apply相同點： 都是為了用一個本不屬於一個物件的方法，讓這個物件去執行 toString.call([],1,2,3) toString.apply([],[1,2,3]) Object.call(this,obj1,obj2,obj3) Object.apply(this,arguments) 區別：call第二個引數開始接受一個引數列表 apply第二個引數開始接受一個引數陣列 5、Javascript如何實現繼承？ 原型鏈繼承，借用建構函式繼承，原型+建構函式組合繼承，寄生式繼承 6、Javascript建立物件的幾種方式？ 第一種：物件字面量、Object建構函式 第二種：建構函式 第三種：純建構函式 第四種：空建構函式+原型 第五種：混合建構函式+原型 第六種：動態原型 第七種：寄生建構函式 第八種：Object.create()——ES5 ie9+ 以下是寄生建構函式模式： ——其實是工廠模式的變種，只不過是放在其他建構函式中建立物件 程式碼如下： function SpecialArray(){ var values = []; values.push.apply(values, arguments); values.toPipedString = function(){ return this.join("|"); }; return values; } var colors = new SpecialArray("red", "blue", "green"); alert(colors.toPipedString()); //"red|blue|green" 7、JavaScript this指標、閉包、作用域 this：指向呼叫上下文 閉包：內層作用域可以訪問外層作用域的變數 作用域：定義一個函式就開闢了一個區域性作用域，整個js執行環境有一個全域性作用域 7、如何阻止事件冒泡和預設事件 e. stopPropagation();//標準瀏覽器阻止事件冒泡 event.canceBubble=true;//ie9之前 阻止預設事件： 為了不讓a點選之後跳轉，我們就要給他的點選事件進行阻止 return false e.preventDefault(); 8、javascript的同源策略 一段指令碼只能讀取來自於同一來源的視窗和文件的屬性，這裡的同一來源指的是主機名、協議和埠號的組合 協議：http,ftp https 主機名；localhost 127.0.0.1 埠名：80: 127.0.0.1:1011 http協議的預設埠：80 https:協議的預設埠是8083 同源策略帶來的麻煩：ajax在不同域名下的請求無法實現， 如果說想要請求其他來源的js檔案，或者json資料，那麼可以通過jsonp來解決 JSONP的實現原理：通過動態建立script標籤 9、編寫一個數組去重的方法 [1,3,1,5,2,3,7]=>[1,3,5,2,7] 方法1： 1、 先建立一個空陣列，用來儲存最終的結果 2、 迴圈原陣列中的每個元素 3、 再對每個元素進行二次迴圈，判斷是否有與之相同的元素，如果沒有，將把這個元素放到新陣列中 4、 返回這個新陣列 方法2： 陣列的indexOf()方法返回給定元素能找在陣列中找到的第一個索引值，否則返回-1。 Array.prototype.unique2 = function() { var n = []; //一個新的臨時陣列 for(var i = 0; i < this.length; i++) //遍歷當前陣列 { //如果當前陣列的第i已經儲存進了臨時陣列，那麼跳過， //否則把當前項push到臨時數組裡面 if (n.indexOf(this[i]) == -1) n.push(this[i]); } return n; } 10、JavaScript是一門什麼樣的語言，它有哪些特點？ 沒有標準答案。 執行環境：瀏覽器中的JS引擎（v8.。。 ff:splidemonkey） 執行在Node.js：v8引擎上 語言特性：面向物件（建立物件的多種方式，繼承的多種方式、原型鏈），動態語言 //動態語言的特性 var num=10;//num是一個數字型別 num="jim";//此時num又變成一個字串型別 //我們把一個變數用來儲存不同資料型別的語言稱之為一個動態語言，或者說是一個弱型別語言 //靜態語言：c# Java c c++ //靜態語言在宣告一個變數就已經確定了這個變數的資料型別， int c;//c就是整數型別//我們把這種宣告一個變數就確定了它的資料型別這樣的語言稱之為靜態語言，也稱之為強型別語言 // 而且在任何時候都不可以改變他的資料型別 11、如何檢測陣列的資料型別 方法一、判斷其是否具有“陣列性質”，如slice()方法。可自己給該變數定義slice方法，故有時會失效 方法二、obj instanceof Array 在某些IE版本中不正確 方法三、toString.call([]);//”[object Array]” 方法四、方法一二皆有漏洞，在ECMA Script5中定義了新方法Array.isArray(), 保證其相容性，最好的方法如下： if(typeof Array.isArray==="undefined"){ Array.isArray = function(arg){ return Object.prototype.toString.call(arg)==="[object Array]" }; } 12、希望獲取到頁面中所有的checkbox怎麼做 var domList = document.getElementsByTagName(‘input’) var checkBoxList = [];//返回的所有的checkbox var len = domList.length;　　//快取到區域性變數 while (len--) {　　 　　if (domList[len].type == ‘checkbox’) { 　　checkBoxList.push(domList[len]); 　　} } 13、Javascript的事件流模型都有什麼？ DOM事件流 “事件冒泡”：事件開始由最具體的元素接受，然後逐級向上傳播 “事件捕捉”：事件由最不具體的節點先接收，然後逐級向下，一直到最具體的 “DOM事件流”：三個階段：事件捕捉，目標階段，事件冒泡 14、看下列程式碼輸出為何？解釋原因。 var a; alert(typeof a); // “undefined” //alert(b); // 報錯 b=10; alert(typeof b);//”number” undefined會在以下三種情況下產生： a、一個變數定義了卻沒有被賦值 b、想要獲取一個物件上不存在的屬性或者方法: c、一個數組中沒有被賦值的元素 15、看程式碼給答案。 var a = new Object(); a.value = 1; b = a; b.value = 2; alert(a.value);//2 答案：2（考察引用資料型別細節） 16、var numberArray = [3,6,2,4,1,5]; （考察基礎API） 1) 實現對該陣列的倒排，反轉，輸出[5,1,4,2,6,3] reverse() 2) 實現對該陣列的降序排列，輸出[6,5,4,3,2,1] 氣泡排序 17、輸出今天的日期，以YYYY-MM-DD的方式，比如今天是2014年9月26日，則輸出2014-09-26 var d = new Date(); // 獲取年，getFullYear()返回4位的數字 //今年：2016 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); 18、將字串”{$id}{$name}”中的{$id}替換成10，{$name}替換成Tony （使用正則表示式） 答案：”{$id}{$id}_{$name}”.replace(/{\$id}/g, ’10′).replace(/{\$name}/g, ‘Tony’); 19、foo = foo||bar ，這行程式碼是什麼意思？為什麼要這樣寫？ 這種寫法稱之為短路表示式 答案：if(!foo) foo = bar; //如果foo存在，值不變，否則把bar的值賦給foo。 短路表示式：作為”&&”和”||”操作符的運算元表示式，這些表示式在進行求值時，只要最終的結果已經可以確定是真或假，求值過程便告終止，這稱之為短路求值。 注意if條件的真假判定，記住以下是false的情況： 空字串、false、undefined、null、0 20、看下列程式碼，將會輸出什麼?( 變數宣告提前 var foo = 1; function(){ var foo; console.log(foo); //undefined foo = 2; console.log(foo); // 2; } 函式宣告與變數宣告會被JavaScript引擎隱式地提升到當前作用域的頂部，但是隻提升名稱不會提升賦值部分。 21、有這樣一個URL：http://item.taobao.com/item.htm?a=1&b=2&c=&d=xxx&e，請寫一段JS程式提取URL中的各個GET引數(引數名和引數個數不確定)，將其按key-value形式返回到一個json結構中，如{a:’1′, b:’2′, c:”, d:’xxx’, e:undefined}。 22、 a、看下面程式碼，給出輸出結果。 for(var i=1;i<=3;i++){ setTimeout(function(){ console.log(i); },0); }; 答案：4 4 4。 原因：setTimeout會在js引擎空閒的時候再執行 Javascript事件處理器線上程空閒之前不會執行。追問， b、如果讓a中程式碼輸出1 2 3？ for(var i=1;i<=3;i++){ setTimeout((function(a){ //改成立即執行函式 console.log(a); })(i),0); }; 23、寫一個function，清除字串前後的空格。（相容所有瀏覽器） 使用自帶介面trim()，考慮相容性： if (!String.prototype.trim) { String.prototype.trim = function() { return this.replace(/^\s+/, "").replace(/\s+$/,""); //\s匹配空白字元：回車、換行、製表符tab 空格 } } // test the function var str = " \t\n test string ".trim(); alert(str == "test string"); // alerts "true" 24、Javascript中callee和caller的作用？ arguments.callee：獲得當前函式的引用 caller是返回一個對函式的引用，該函式呼叫了當前函式；如果不是由其他函式呼叫的，那麼返回值就是null callee是返回正在被執行的function函式，也就是所指定的function物件的正文。 那麼問題來了？ 如果一對兔子每月生一對兔子；一對新生兔，從第二個月起就開始生兔子；假定每對兔子都是一雌一雄，試問一對兔子，第n個月能繁殖成多少對兔子？（使用callee完成） 25、Javascript中, 以下哪條語句一定會產生執行錯誤？ 答案( BC ) A、var _變數=NaN;B、var 0bj = [];(這裡是一個數字0)C、var obj = //; D、var obj = {}; 26、以下兩個變數a和b，a+b的哪個結果是NaN？ 答案( C ) A、var a=undefind; b=NaN //拼寫 undefined B、var a=‘123’; b=NaN //字串 C、var a =undefined , b =NaN D、var a=NaN , b='undefined' //”NaNundefined” 27、var a=10; b=20; c=4; ++b+c+a++ 以下哪個結果是正確的？答案( B ) A、34 B、35 C、36 D、37 //21+4+10 28、typeof運算子返回值中有一個跟javascript資料型別不一致，它是________”function”_________。 29、定義了一個變數，但沒有為該變數賦值，如果alert該變數，javascript彈出的對話方塊中顯示___undefined______ 。 30、分析程式碼，得出正確的結果。 var a=10, b=20 , c=30; ++a; a++; e=++a+(++b)+(c++)+a++;//一開始：a=12 //程式執行時：13+21+30+13：細心 alert(e); 彈出提示對話方塊：77 var a=10, b=20 , c=30; ++a;//a=11 a++;//a=11 e=++a+(++b)+(c++)+a++; //a=12 13+21+30+13=77 alert(e); 31、寫出程式執行的結果？ for(i=0, j=0; i<10, j<6; i++, j++){ k = i + j;} 結果：10 for(i=0, j=0; i<10, j<6; i++, j++){ //終止條件：j=5 i=5 k = i + j;//k=10 } //結果：10 32、閱讀以下程式碼，請分析出結果 var arr = new Array(1 ,3 ,5); arr[4]='z';//[1,3,5,undefined,’z’] arr2 = arr.reverse(); //arr2=[’z’,undefined,5,3,1]; //arr=[’z’,undefined,5,3,1] arr3 = arr.concat(arr2); alert(arr3); 彈出提示對話方塊：z,,5,3,1,z,,5,3,1 考點：reverse 方法1、顛倒陣列中元素的位置， 2、並返回該陣列的引用。 33、給一個按鈕繫結點選事件的函式，確認使用者是否退出當前頁面，確認之後關閉視窗 confirm window.close() 34、定義一個foo()函式的內容，要求能夠彈出對話方塊提示當前選中的是第幾個單選框。

35、列舉瀏覽器物件模型BOM裡常用的至少4個物件，並列舉window物件的常用方法至少5個 物件：window document location screen history navigator 方法：alert() confirm() prompt() open() close() 36、簡述列舉文件物件模型DOM裡document的常用的查詢訪問節點的方法 Document.getElementById 根據元素id查詢元素 Document.getElementByName 根據元素name查詢元素 Document.getElementTagName 根據指定的元素名查詢元素 37、希望獲取到頁面中所有的checkbox怎麼做？(不使用第三方框架) 38、簡述建立函式的幾種方式 第一種（函式宣告）： function sum1(num1,num2){ return num1+num2; } 第二種（函式表示式）： var sum2 = function(num1,num2){ return num1+num2; } 匿名函式： function(){}:只能自己執行自己 第三種（函式物件方式）：瞭解 var sum3 = new Function("num1","num2","return num1+num2"); 41、documen.write和 innerHTML 的區別？ document.write 只能重繪整個頁面 innerHTML 可以重繪頁面的一部分 42、記憶體洩露是什麼？ 記憶體洩漏指任何物件在您不再擁有或需要它之後仍然存在。 垃圾回收器定期掃描物件，並計算引用了每個物件的其他物件的數量。如果一個物件的引用數量為 0（沒有其他物件引用過該物件），或對該物件的惟一引用是迴圈的，那麼該物件的記憶體即可回收。 43、判斷一個字串中出現次數最多的字元，統計這個次數 答：var str = 'asdfssaaasasasasaa'; var json = {}; for (var i = 0; i < str.length; i++) { if(!json[str.charAt(i)]){ //str.charAt(i) =”a” json[str.charAt(i)] = 1; //json[“a”]=1 }else{ json[str.charAt(i)]++; //讓a鍵的值+1，也就是這個字元多出現了一次 } }; var iMax = 0; var iIndex = ''; for(var i in json){ if(json[i]>iMax){ iMax = json[i]; iIndex = i; } } alert('出現次數最多的是:'+iIndex+'出現'+iMax+'次'); 44、寫一個獲取非行間樣式的函式 //內嵌、外聯，行內 function getStyle(obj,attr,value) { if(!value) { if(obj.currentStyle)//ie { return obj.currentStyle(attr); } else{//標準瀏覽器 obj.getComputedStyle(attr,false); } } else { obj.style[attr] = value; } } 45、解釋jsonp的原理 動態建立script標籤，給請求的地址中新增一個get引數，這個引數代表回撥函式，也就是希望伺服器處理完我的請求之後，在前端執行這個對調函式 46、javascript的本地物件，內建物件和宿主物件 本地物件為array obj regexp等可以new例項化 Array RegExp String Boolean 。。。 內建物件為global、Math 等不可以例項化的 關於global物件我們無法在瀏覽器中發現她的存在，因為他的屬性和方法都被繫結在了window物件中 每一個宿主物件他的實現都是取決於不同的瀏覽器的，這樣就產生了瀏覽器相容性問題 宿主為瀏覽器自帶的document,window 等 47、字串反轉，如將 '12345678' 變成 '87654321' //大牛做法； //思路：先將字串轉換為陣列 split()，利用陣列的反序函式 reverse()顛倒陣列，再利用 jion() 轉換為字串 var str = '12345678'; str = str.split('').reverse().join(''); 48、window.location.search返回的是什麼？ 答：查詢(引數)部分。除了給動態語言賦值以外，我們同樣可以給靜態頁面,並使用javascript來獲得相信應的引數值 返回值：?ver=1.0&id=timlq 也就是問號後面的！ //url:http://www.sina.com/getage?number=1&year=2016 49、window.location.hash 返回的是什麼？ 答：錨點 ， 返回值：#love ； //url:http://www.sina.com/getage?#age 這時就返回”#age” 50、window.location.reload() 作用？ 答：重新整理當前頁面。 51、看題做答： function f1(){ var tmp = 1; this.x = 3;//window.x=3 console.log(tmp); //A console.log(this.x)； //B } var obj = new f1(); //1 3 console.log(obj.x) //3 console.log(f1()); //1 3 undefined 52、下面輸出多少？ var o1 = new Object(); var o2 = o1; o2.name = "CSSer"; console.log(o1.name); //”CSSer” 53、下面程式碼輸出什麼 function changeObjectProperty (o) { //var o; //o=CSSer; o.siteUrl = "http://www.csser.com/"; o = new Object(); o.siteUrl = "http://www.popcg.com/"; } var CSSer = new Object(); changeObjectProperty(CSSer); console.log(CSSer.siteUrl); //” http://www.csser.com/” 54、觀看程式碼，有什麼輸出 var a = 6; setTimeout(function () { var a = 666;//由於變數a是一個區域性變數 alert(a); // 輸出666， }, 0); a = 66; console.log(a); //先列印全域性變數a的值：66 再執行setTimeout裡面的區域性變數 因為var a = 666;定義了局部變數a，並且賦值為666，根據變數作用域鏈， 全域性變數處在作用域末端，優先訪問了區域性變數，從而覆蓋了全域性變數 。 55、看輸出結果 var a = 6; setTimeout(function(){ alert(a); var a = 66; }, 1000); a = 666; alert(a); //結果：666 undefined 56、輸出多少？ function setN(obj){ obj.name='屌絲'; obj = new Object(); obj.name = '腐女'; }; var per = new Object(); setN(per); alert(per.name); //屌絲 內部 57、觀察以下程式碼的輸出 window.color = 'red'; var o = {color: 'blue'}; function sayColor(){ alert(this.color); } 考點：1、this的指向 2、call的用法 sayColor(); //red sayColor.call(this); //red this指向的是window物件 sayColor.call(window); //red sayColor.call(o); //blue 58、結果是什麼？ function foo(){ foo.a = function(){alert(1)}; this.a = function(){alert(2)}; //obj.a a = function(){alert(3)}; var a = function(){alert(4)}; }; foo.prototype.a = function(){alert(5)}; foo.a = function(){alert(6)}; foo.a(); //6 var obj = new foo(); obj.a(); //2 foo.a(); //1 59、分析程式碼結果 var a = 5; function test(){ var a; a = 0; alert(a); alert(this.a); //沒有定義 a這個屬性 alert(a) } test(); // 0, 5, 0 var obj=new test(); // 0, undefined, 0 //由於類它自身沒有屬性a， 所以是undefined 60、結果是 var bool = !!2; alert(bool)；//true; 技巧：雙向非操作可以把字串和數字轉換為布林值。 61、匹配輸入的字元：第一個必須是字母或下劃線開頭，後面就是字母和數字或者下劃線構成，長度5-20 var reg = /^[a-zA-Z_][a-zA-Z0-9_]{4,19}/, 62、BOM物件有哪些，列舉window物件？ 1、window物件 ，是JS的最頂層物件，其他的BOM物件都是window物件的屬性； 2、document物件，文件物件； 3、location物件，瀏覽器當前URL資訊； 4、navigator物件，瀏覽器本身資訊； 5、screen物件，客戶端螢幕資訊； 6、history物件，瀏覽器訪問歷史資訊； 63、JS中的簡單繼承 ——>call方法！ //頂一個父母類，注意：類名都是首字母大寫的哦！ function Parent(name, money){ this.name = name; this.money = money; this.info = function(){ alert('姓名： '+this.name+' 錢： '+ this.money); } } //定義孩子類 function Children(name){ Parent.call(this, name); //繼承 姓名屬性，不要錢。 this.info = function(){ alert('姓名： '+this.name); } } //例項化類 var per = new Parent('parent', 800000000000); var chi = new Children('child'); per.info(); chi.info(); 64、bind(), live(), delegate()的區別 bind： 繫結事件，對新新增的事件不起作用，方法用於將一個處理程式附加到每個匹配元素的事件上並返回jQuery物件。 live： 方法將一個事件處理程式附加到與當前選擇器匹配的所有元素（包含現有的或將來新增的）的指定事件上並返回jQuery物件。 delegate： 方法基於一組特定的根元素將處理程式附加到匹配選擇器的所有元素（現有的或將來的）的一個或多個事件上。 最佳實現：jquery 1.7之後：就推薦使用on() off() 65、簡述link和import的區別？ 區別1：link是XHTML標籤，除了載入CSS外，還可以定義RSS等其他事務；@import屬於CSS範疇，只能載入CSS。 區別2：link引用CSS時，在頁面載入時同時載入；@import需要頁面網頁完全載入以後載入。 區別3：link是XHTML標籤，無相容問題；@import是在CSS2.1提出的，低版本的瀏覽器不支援。 區別4：link支援使用Javascript控制DOM去改變樣式；而@import不支援。 66、看下列程式碼輸出什麼？ var foo = "11"+2-"1"; console.log(foo); console.log(typeof foo); //“number” 執行完後foo的值為111，foo的型別為Number。 67、看下列程式碼,輸出什麼？ var a = new Object(); a.value = 1; b = a; b.value = 2; alert(a.value); 執行完後輸出結果為2 68、你如何優化自己的程式碼？ 程式碼重用：宣告函式把整個過程封裝起來；把他們弄成一些物件 避免全域性變數（名稱空間，封閉空間，模組化mvc..） AngularJS 拆分函式避免函式過於臃腫：單一職責原則：條理更加清晰，更好的維護 適當的註釋，尤其是一些複雜的業務邏輯或者是計算邏輯，都應該寫出這個業務邏輯的具體過程 記憶體管理，尤其是閉包中的變數釋放 變數的命名規範：尤其是在實際專案中 $div：代表一個jquery物件 dom：代表一個原生的dom物件 希望一個函式是建構函式：函式的首字母都要大寫 變數一定要語義化： 69、請描述出下列程式碼執行的結果 function d(){ console.log(this); } d();//window 70、請將一個URL的search部分引數與值轉換成一個json物件 //search部分的引數格式：a=1&b=2&c=3 function getJsonFromUrlSearch(search){ var item; var result={}; if(search.indexOf('&')<0){ item=search.split('='); result[item[0]]=item[1]; return result; } var splitArray=search.split('&'); for (var i = 0; i < splitArray.length; i++) { var obj = splitArray[i]; item=obj.split('='); result[item[0]]=item[1]; } return result; } var c=getJsonFromUrlSearch("a=1&b=2&c=3"); 71、請用原生js實現jquery的get\post功能，以及跨域情況下 ajax 先建立一個HttpRequest() 再設定他的請求頭：請求的資料型別：json/xml 再設定他的onreadstatechange 最後再提交這個請求 72、請簡要描述web前端效能需要考慮哪方面，你的優化思路是什麼？ //參見雅虎14web優化規則 //減少http請求： //1、小圖弄成大圖（雪碧圖、精靈圖）， //2、合理的設定快取 localStorage cookie //3、資源合併、壓縮 html程式碼的最小化，壓縮體積：就是減少頻寬 // 一些小的js檔案合併成大的js檔案 //將外部的js檔案置底 73、簡述readyonly與disabled的區別 readonly只針對input(text / password)和textarea有效， 而disabled對於所有的表單元素都有效，當表單元素在使用了disabled後，當我們將表單以POST或GET的方式提交的話，這個元素的值不會被傳遞出去，而readonly會將該值傳遞出去 74、請儘可能詳盡的解釋ajax的工作原理 思路：先解釋非同步，再解釋ajax如何使用 非同步是為了進行區域性重新整理，提升使用者體驗 2005 年誕生ajax Ajax的原理簡單來說通過XmlHttpRequest物件來向伺服器發非同步請求，從伺服器獲得資料，然後用javascript來操作DOM而更新頁面。這其中最關鍵的一步就是從伺服器獲得請求資料。要清楚這個過程和原理，我們必須對 XMLHttpRequest有所瞭解。 　XMLHttpRequest是ajax的核心機制，它是在IE5中首先引入的，是一種支援非同步請求的技術。簡單的說，也就是javascript可以及時向伺服器提出請求和處理響應，而不阻塞使用者。達到無重新整理的效果。 75、為什麼擴充套件javascript內建物件不是好的做法？ 因為擴充套件內建物件會影響整個程式中所使用到的該內建物件的原型屬性 //如果說是整個專案中都適用的功能，那麼可以進行擴充套件 76、什麼是三元表示式？“三元”表示什麼意思？ ? : 因為運算子會涉及3個表示式 var a=3>2?5:2; 77、module(12,5)//2 實現滿足這個結果的module函式 function module(a,b){ return a%b;//return a/b; } 78、HTTP協議中，GET和POST有什麼區別？分別適用什麼場景 ？ get傳送的資料長度有限制，post沒有 get通過url傳遞，在瀏覽器位址列可見，post是在報文中傳遞 適用場景： post一般用於表單提交 get一般用於簡單的資料查詢，嚴格要求不是那麼高的場景 79、HTTP狀態訊息200 302 304 403 404 500分別表示什麼 200：請求已成功，請求所希望的響應頭或資料體將隨此響應返回。 302：請求的資源臨時從不同的 URI響應請求。由於這樣的重定向是臨時的，客戶端應當繼續向原有地址傳送以後的請求。只有在Cache-Control或Expires中進行了指定的情況下，這個響應才是可快取的 304：如果客戶端傳送了一個帶條件的 GET 請求且該請求已被允許，而文件的內容（自上次訪問以來或者根據請求的條件）並沒有改變，則伺服器應當返回這個狀態碼。304響應禁止包含訊息體，因此始終以訊息頭後的第一個空行結尾。 403：伺服器已經理解請求，但是拒絕執行它。 404：請求失敗，請求所希望得到的資源未被在伺服器上發現。 500：伺服器遇到了一個未曾預料的狀況，導致了它無法完成對請求的處理。一般來說，這個問題都會在伺服器端的原始碼出現錯誤時出現。 80、HTTP協議中，header資訊裡面，怎麼控制頁面失效時間（last-modified,cache-control,Expires分別代表什麼） Last-Modified 文 檔的最後改動時間。客戶可以通過If-Modified-Since請求頭提供一個日期，該請求將被視為一個條件GET，只有改動時間遲於指定時間的文件 才會返回，否則返回一個304（Not Modified）狀態。Last-Modified也可用setDateHeader方法來設定。 Expires 應該在什麼時候認為文件已經過期，從而不再快取它？ 81、請列舉js陣列型別中的常用方法 方法 描述 concat() 連線兩個或更多的陣列，並返回結果。 join() 把陣列的所有元素放入一個字串。元素通過指定的分隔符進行分隔。 pop() 刪除並返回陣列的最後一個元素 push() 向陣列的末尾新增一個或更多元素，並返回新的長度。 reverse() 顛倒陣列中元素的順序。 shift() 刪除並返回陣列的第一個元素 slice() 從某個已有的陣列返回選定的元素 sort() 對陣列的元素進行排序 splice() 刪除元素，並向陣列新增新元素。 toSource() 返回該物件的原始碼。 toString() 把陣列轉換為字串，並返回結果。 toLocaleString() 把陣列轉換為本地陣列，並返回結果。 unshift() 向陣列的開頭新增一個或更多元素，並返回新的長度。 valueOf() 返回陣列物件的原始值 82、列舉常用的js框架以及分別適用的領域 jquery：簡化了js的一些操作，並且提供了一些非常好用的API jquery ui、jquery-easyui：在jqeury的基礎上提供了一些常用的元件 日期，下拉框，表格這些元件 require.js、sea.js（阿里的玉帛）+》模組化開發使用的 jquery mobile：是jquery自己出的支援移動端網頁開發，不過非常笨重，但是功能非常強大 zepto：精簡版的jquery，常用於手機web前端開發 提供了一些手機頁面實用功能,touch ext.js：跟jquery差不多，但是不開源，也沒有jquery輕量 angular、knockoutjs、avalon(去哪兒前端總監，作者：司徒正美)：MV*框架，適合用於單頁應用開發(SPA) 83、如何獲取物件a擁有的所有屬性（可列舉的、不可列舉的，不包括繼承來的屬性） Object.keys——IE9+ ES5 或者使用for…in並過濾出繼承的屬性 for(o in obj){ if(obj.hasOwnproperty(o)){//判斷o不是繼承來的屬性 //把o這個屬性放入到一個數組中 } } 84、下面這段程式碼想要迴圈昝輸出結果01234，請問輸出結果是否正確，如果不正確，請說明為什麼，並修改迴圈內的程式碼使其輸出正確結果 for(var i=0;i<5;++i){ setTimeout(function(){ console.log(i+’’); },100*i); } 85、解釋下這個css選擇器什麼發生什麼？ [role=nav]>ul a:not([href^-mailto]){} 86、描述錯誤的是 D A：Http狀態碼302表示暫時性轉移 對 B:domContentLoaded事件早於onload事件 //正確 當 onload 事件觸發時，頁面上所有的DOM，樣式表，指令碼，圖片，flash都已經載入完成了。 當 DOMContentLoaded 事件觸發時，僅當DOM載入完成，不包括樣式表，圖片，flash。 C: IE678不支援事件捕獲 D:localStorage 儲存的資料在電腦重啟後丟失 //錯誤，因為沒有時間限制 87、關於link和@import的區別正確的是 AB A: link屬於XHTML標籤，而@import是CSS提供的； B：頁面被載入時，link會同時被載入，而後者引用的CSS會等到頁面被載入完再載入 C：import只在IE5以上才能識別 而link是XHTML標籤，無相容問題 D: link方式的樣式的權重高於@import的權重 import誕生於CSS2.1規範，任何支援CSS2.1以上版本的瀏覽器都支援Import link方式的樣式跟import沒有權重高低這麼個說法，只有書寫順序的不同才會決定樣式 88、變數的命名規範以及命名推薦 89、三種彈窗的單詞以及三種彈窗的功能 alert confirm prompt 91、寫一個post請求並帶有傳送資料和返回資料的樣例 $.ajax({ url:"1.html", data:{name:"張三",age:18},//post資料 dataType:"json", type:"POST", success:function(data){ //data：返回的資料 }, error:function(){ //異常處理 } }); 90、jQuery框架中$.ajax()的常用引數有哪些？ type 型別：String 預設值: "GET")。請求方式 ("POST" 或 "GET")， 預設為 "GET"。注意：其它 HTTP 請求方法，如 PUT 和 DELETE 也可以使用，但僅部分瀏覽器支援。 url 型別：String 預設值: 當前頁地址。傳送請求的地址。 success 型別：Function 請求成功後的回撥函式。 引數：由伺服器返回，並根據 dataType 引數進行處理後的資料；描述狀態的字串。 這是一個 Ajax 事件。 options 型別：Object 可選。AJAX 請求設定。所有選項都是可選的。 async 型別：Boolean 預設值: true。預設設定下，所有請求均為非同步請求。如果需要傳送同步請求，請將此選項設定為 false。 注意，同步請求將鎖住瀏覽器，使用者其它操作必須等待請求完成才可以執行。 beforeSend(XHR) 型別：Function 傳送請求前可修改 XMLHttpRequest 物件的函式，如新增自定義 HTTP 頭。 XMLHttpRequest 物件是唯一的引數。 這是一個 Ajax 事件。如果返回 false 可以取消本次 ajax 請求。 cache 型別：Boolean 預設值: true，dataType 為 script 和 jsonp 時預設為 false。設定為 false 將不快取此頁面。 jQuery 1.2 新功能。 contentType 型別：String 預設值: "application/x-www-form-urlencoded"。傳送資訊至伺服器時內容編碼型別。 預設值適合大多數情況。如果你明確地傳遞了一個 content-type 給 $.ajax() 那麼它必定會發送給伺服器（即使沒有資料要傳送）。 data 型別：String 傳送到伺服器的資料。將自動轉換為請求字串格式。GET 請求中將附加在 URL 後。檢視 processData 選項說明以禁止此自動轉換。必須為Key/Value 格式。如果為陣列，jQuery 將自動為不同值對應同一個名稱。如 {foo:["bar1", "bar2"]} 轉換為 '&foo=bar1&foo=bar2'。 dataFilter 型別：Function 給 Ajax 返回的原始資料的進行預處理的函式。提供 data 和 type 兩個引數：data 是 Ajax 返回的原始資料，type 是呼叫 jQuery.ajax 時提供的dataType 引數。函式返回的值將由 jQuery 進一步處理。 dataType 型別：String 預期伺服器返回的資料型別。如果不指定，jQuery 將自動根據 HTTP 包 MIME 資訊來智慧判斷，比如 XML MIME 型別就被識別為 XML。在 1.4中，JSON 就會生成一個 JavaScript 物件，而 script 則會執行這個指令碼。隨後伺服器端返回的資料會根據這個值解析後，傳遞給回撥函式。可用值: · "xml": 返回 XML 文件，可用 jQuery 處理。 · "html": 返回純文字 HTML 資訊；包含的 script 標籤會在插入 dom 時執行。 · "script": 返回純文字 JavaScript 程式碼。不會自動快取結果。除非設定了 "cache" 引數。注意：在遠端請求時(不在同一個域下)，所有 POST 請求都將轉為 GET 請求。（因為將使用 DOM 的 script標籤來載入） · "json": 返回 JSON 資料 。 · "jsonp": JSONP 格式。使用 JSONP 形式呼叫函式時，如 "myurl?callback=?" jQuery 將自動替換 ? 為正確的函式名，以執行回撥函式。 · "text": 返回純文字字串 error 型別：Function 預設值: 自動判斷 (xml 或 html)。請求失敗時呼叫此函式。 有以下三個引數：XMLHttpRequest 物件、錯誤資訊、（可選）捕獲的異常物件。 如果發生了錯誤，錯誤資訊（第二個引數）除了得到 null 之外，還可能是 "timeout", "error", "notmodified" 和 "parsererror"。 這是一個 Ajax 事件。 92、閉包：下面這個ul，如何點選每一列的時候alert其index？

• 這是第一條
• 這是第二條
• 這是第三條

//非閉包實現 var lis=document.querySelectorAll('li'); document.querySelector('#test').onclick=function(e){ for (var i = 0; i < lis.length; i++) { var li = lis[i]; if(li==e.target){ alert(i); } } }; //閉包實現 var lis=document.querySelectorAll('li'); for (var i = 0; i < lis.length; i++) { var li = lis[i]; li.onclick=(function(index){ return function(e){ alert(index); }; })(i); } 93、Javascript中callee和caller的作用？ caller是返回一個對函式的引用，該函式呼叫了當前函式； 用法：fn.caller callee是返回正在被執行的function函式，也就是所指定的function物件的正文。 用法：arguments.callee 94、在Javascript中什麼是偽陣列？如何將偽陣列轉化為標準陣列？ 偽陣列（類陣列）：無法直接呼叫陣列方法或期望length屬性有什麼特殊的行為，但仍可以對真正陣列遍歷方法來遍歷它們。典型的是函式的argument引數，還有像呼叫getElementsByTagName,document.childNodes之類的,它們都返回NodeList物件都屬於偽陣列。 可以使用Array.prototype.slice.call(fakeArray)將陣列轉化為真正的Array物件。 95、《正則》寫出正確的正則表示式匹配固話號，區號3-4位，第一位為0，中橫線，7-8位數字，中橫線，3-4位分機號格式的固話號 常用正則表示式語法要熟悉 /0[0-9]{2,3}-\d{7,8}/ 010 021 020 025 028 0755：深圳 96、請寫出一個程式，在頁面載入完成後動態建立一個form表單，並在裡面新增一個input物件並給它任意賦值後義post方式提交到：http://127.0.0.1/save.php 97、下面程式碼會有什麼樣的輸出 var User = { 物件 count = 1，屬性 getCount：function（）{ 方法 return this.count; } } console.log(User.getCount()); var func = User.getCount; console.log(func()); 答案：1 undefined 98、下面程式碼的輸出： (function test(){ var a=b=5; //b是一個隱式的全域性變數 alert(typeof a); alert(typeof b); })(); alert(typeof a); alert(typeof b); //number number undefined number 99、下列JavaScript程式碼執行後，iNum的值是 var iNum = 0; for(var i = 1; i< 10; i++){ if(i % 5 == 0){ continue; } iNum++; } 分析： i=1 1 i=2 2 i=3 3 i=4 4 i=5 i=6 5 i=7 6 i=8 7 i=9 8 100、輸出結果是多少？ 1） var a; var b = a * 0; if (b == b) { console.log(b * 2 + "2" - 0 + 4); } else {//b=NaN console.log(!b * 2 + "2" - 0 + 4); //1*2+”2”-0+4 } 答案：26 考點：乘號運算子的運算規則： 1、 如果其中一個數是NaN，則結果就是NaN 2、如果乘積超過了ECMAScript設定的範圍，那麼就會返回Infinity、-Infinity 3、如果參與乘法運算的某個運算元不是數值，js引擎會先呼叫Number()將這個數變成一個數值型別， 比如：空字串就會變成0 布林值true就會變成1，空陣列[]也會變成0，undefined轉換結果則是變成了NaN 101、以下程式碼會有什麼輸出 答案：6 102、觀察輸出結果 var t = 10; function test(t){ var t = t++;//此時的t是一個區域性變數，全域性變數沒有任何變化 console.log(t);//此時的結果又是多少？ } test(t); console.log(t); 答案：10 103、輸出結果： var t = 10; function test(test){ var t = test++; }test(t); console.log(t); 答案：10 104、輸出結果： var t = 10; function test(test){ t = test++;//這一步全域性變數t的值等於改變前的test的值 }test(t); console.log(t); 答案：10 105、輸出結果： var t = 10; function test(test){ t = t + test;//undefined+10=NaN console.log(t); var t = 3; }test(t); console.log(t); 答案：NaN 10 106、輸出結果： var a; var b = a / 0; if (b == b) {//b=NaN console.log(!b * 2 + "2" - 0 + 4); } else { console.log(!b * 2 + "2" - 0 + 4); } 答案：26 107:、輸出結果： 答案：Infinity24 108、下列JavaScript程式碼執行後，執行的結果是點選我 var btn = document.getElementById('btn'); var handler = { id: '_eventHandler', exec: function(){ alert(this.id); } } btn.addEventListener('click', handler.exec); 答案：btn，因為handler.exec是由btn這個按鈕執行的 109、☆☆☆下列JavaScript程式碼執行後，依次alert的結果是 var obj = {proto: {a:1,b:2}}; function F(){}; F.prototype = obj.proto; var f = new F(); obj.proto.c = 3; obj.proto = {a:-1, b:-2}; alert(f.a);//1 alert(f.c);//3 delete F.prototype['a']; alert(f.a);//undefined alert(obj.proto.a);//-1 110、下列JavaScript程式碼執行後的效果是

• item
• item
• item
• item
• item

var items = document.querySelectorAll('#list>li'); for(var i = 0;i < items.length; i++){ setTimeout(function(){ items[i].style.backgroundColor = '#fee'; }, 5); } 答案：異常 111、程式中捕獲異常的方法？ window.error=function(){}; try{}catch(){}finally{} 112、給字串擴充套件一個相容所有瀏覽器的清除前後的空格的方法 if (!String.prototype.trim) { String.prototype.trim = function() { return this.replace(/^\s+/, "").replace(/\s+$/,""); } } 113、下列控制檯都輸出什麼 function setName(){ name="張三"; } setName(); console.log(name); 答案："張三" 114、 //考點：1、變數宣告提升 2、變數搜尋機制 var a=1; function test(){ console.log(a); var a=1; } test(); 答案：undefined 115、 var b=2; function test2(){ window.b=3; console.log(b); } test2(); 答案：3 116、 c=5;//宣告一個全域性變數c function test3(){ window.c=3; console.log(c); //答案：undefined，原因：由於此時的c是一個區域性變數c，並且沒有被賦值 var c; console.log(window.c);//答案：3，原因：這裡的c就是一個全域性變數c } test3(); 117： var arr = []; arr[0] = 'a'; arr[1] = 'b'; arr[10] = 'c'; alert(arr.length); //答案：11 console.log(arr[5]); //答案：undefined 118： var a=1; console.log(a++); //答案：1 console.log(++a); //答案：3 119： console.log(null==undefined); //答案：true console.log("1"==1); //答案：true，因為會將數字1先轉換為字串1 console.log("1"===1); //答案：false，因為資料型別不一致 120、 parseInt(3.14); //3 parseFloat("3asdf"); //3 parseInt("1.23abc456"); parseInt(true);// "true"=> NaN //對一個非數字或者一個非字串型別進行資料轉換的時候，會先把這個資料轉換為一個字串型別，然後再轉換為數值型別 考點：考察非數字轉換為整數的熟練度 121、 //考點：函式宣告提前 function bar() { return foo; foo = 10; function foo() {} //var foo = 11; } alert(typeof bar());//"function" 122、 考點：函式宣告提前 var foo = 1; function bar() { foo = 10; return; function foo() {} } bar(); alert(foo);//答案：1 123、 console.log(a);//是一個函式 var a = 3; function a(){} console.log(a);////3 124、 //考點：對arguments的操作 function foo(a) { arguments[0] = 2; alert(a);//答案：2，因為：a、arguments是對實參的訪問，b、通過arguments[i]可以修改指定實參的值 } foo(1); 125、 function foo(a) { alert(arguments.length);//答案：3，因為arguments是對實參的訪問 } foo(1, 2, 3); 126、 bar();//報錯 因為bar這個名稱只能在函式內部被訪問 var foo = function bar(name) { console.log("hello"+name); console.log(bar); }; //alert(typeof bar); foo("world");//"hello" console.log(bar);//undefined console.log(foo.toString()); bar();//報錯 127、 function test(){ console.log("test函式"); } setTimeout(function(){ console.log("定時器回撥函式"); }, 0) test(); function foo(){ var name="hello"; } 128、jQuery 的 slideUp動畫 ，如果目標元素是被外部事件驅動, 當滑鼠快速地連續觸發外部元素事件, 動畫會滯後的反覆執行，該如何處理呢? 先stop(true,true)後slideUp() 示例程式碼參考：J:\程式碼,PPT,筆記,電子書\面試題\面試題_jquery_slideup.html 關於stop()參考：J:\程式碼,PPT,筆記,電子書\面試題\面試題_jquery.png 129、Ajax 是什麼? 如何建立一個Ajax？ Ajax並不算是一種新的技術，全稱是asynchronous javascript and xml，可以說是已有技術的組合，主要用來實現客戶端與伺服器端的非同步通訊效果，實現頁面的區域性重新整理，早期的瀏覽器並不能原生支援ajax，可以使用隱藏幀（iframe）方式變相實現非同步效果，後來的瀏覽器提供了對ajax的原生支援 使用ajax原生方式傳送請求主要通過XMLHttpRequest(標準瀏覽器)、ActiveXObject(IE瀏覽器)物件實現非同步通訊效果 基本步驟： 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();//傳送請求 130、同步和非同步的區別? 同步：阻塞的 -張三叫李四去吃飯，李四一直忙得不停，張三一直等著，直到李四忙完兩個人一塊去吃飯 =瀏覽器向伺服器請求資料，伺服器比較忙，瀏覽器一直等著（頁面白屏），直到伺服器返回資料，瀏覽器才能顯示頁面 非同步：非阻塞的 -張三叫李四去吃飯，李四在忙，張三說了一聲然後自己就去吃飯了，李四忙完後自己去吃 =瀏覽器向伺服器請求資料，伺服器比較忙，瀏覽器可以自如的幹原來的事情（顯示頁面），伺服器返回資料的時候通知瀏覽器一聲，瀏覽器把返回的資料再渲染到頁面，區域性更新 131、GET和POST的區別，何時使用POST？ GET：一般用於資訊獲取，使用URL傳遞引數，對所傳送資訊的數量也有限制，一般在2000個字元，有的瀏覽器是8000個字元 POST：一般用於修改伺服器上的資源，對所傳送的資訊沒有限制 在以下情況中，請使用 POST 請求： 1. 無法使用快取檔案（更新伺服器上的檔案或資料庫） 2. 向伺服器傳送大量資料（POST 沒有資料量限制） 3. 傳送包含未知字元的使用者輸入時，POST 比 GET 更穩定也更可靠 132、ajax的缺點 1、ajax不支援瀏覽器back按鈕。 2、安全問題 AJAX暴露了與伺服器互動的細節。 3、對搜尋引擎的支援比較弱。//不會執行你的js指令碼，只會操作你的網頁原始碼 4、破壞了程式的異常機制。 5、無法跨域請求，解決方式：jsonp 133、http常見的狀態碼有那些？分別代表是什麼意思？ 200 OK //客戶端請求成功 400 Bad Request //客戶端請求有語法錯誤，不能被伺服器所理解 403 Forbidden //伺服器收到請求，但是拒絕提供服務 404 Not Found //請求資源不存在，輸入了錯誤的URL 500 Internal Server Error //伺服器發生不可預期的錯誤 503 Server Unavailable //伺服器當前不能處理客戶端的請求，一段時間後可能恢復正常 134、嚴格模式 連結：http://www.ruanyifeng.com/blog/2013/01/javascript_strict_mode.html 全域性變數顯式宣告 靜態繫結 禁止使用with語句 eval中定義的變數都是區域性變數 禁止this關鍵字指向全域性物件 禁止在函式內部遍歷呼叫棧 arguments.callee 嚴格模式下無法刪除變數。只有configurable設定為true的物件屬性，才能被刪除 正常模式下，對一個物件的只讀屬性進行賦值，不會報錯，只會默默地失敗。嚴格模式下，將報錯。 嚴格模式下，對一個使用getter方法讀取的屬性進行賦值，會報錯。 嚴格模式下，對禁止擴充套件的物件新增新屬性，會報錯。 嚴格模式下，刪除一個不可刪除的屬性，會報錯。 正常模式下，如果物件有多個重名屬性，最後賦值的那個屬性會覆蓋前面的值。嚴格模式下，這屬於語法錯誤。 正常模式下，如果函式有多個重名的引數，可以用arguments[i]讀取。嚴格模式下，這屬於語法錯誤。 正常模式下，整數的第一位如果是0，表示這是八進位制數，比如0100等於十進位制的64。嚴格模式禁止這種表示法，整數第一位為0，將報錯。 不允許對arguments賦值 arguments不再追蹤引數的變化 禁止使用arguments.callee 嚴格模式只允許在全域性作用域或函式作用域的頂層宣告函式。也就是說，不允許在非函式的程式碼塊內宣告函式 if else while for 無法宣告函式 嚴格模式新增了一些保留字：implements, interface, let, package, private, protected, public, static, yield。 135、new操作符具體幹了什麼呢? 1、建立一個空物件，並且 this 變數引用該物件，同時還繼承了該函式的原型。 2、屬性和方法被加入到 this 引用的物件中。 3、新建立的物件由 this 所引用，並且最後隱式的返回 this 。 136、模組化開發怎麼做？ 理解模組化開發模式：瀏覽器端requirejs，seajs；伺服器端nodejs；ES6模組化；fis、webpack等前端整體模組化解決方案；grunt、gulp等前端工作流的使用 137、AMD（Modules/Asynchronous-Definition）、CMD（Common Module Definition）規範區別？ 理解這兩種規範的差異，主要通過requirejs與seajs的對比，理解模組的定義與引用方式 的差異以及這兩種規範的設計原則 參考連結1：https://www.zhihu.com/question/20351507/answer/14859415 參考連結2：https://github.com/seajs/seajs/issues/277 1、對於依賴的模組，AMD 是提前執行，CMD 是延遲執行。不過 RequireJS 從 2.0 開始，也改成可以延遲執行（根據寫法不同，處理方式不同）。CMD 推崇 as lazy as possible. 2、CMD 推崇依賴就近，AMD 推崇依賴前置。 3. AMD 的 API 預設是一個當多個用，CMD 的 API 嚴格區分，推崇職責單一。比如 AMD 裡，require 分全域性 require 和區域性 require，都叫 require。CMD 裡，沒有全域性 require，而是根據模組系統的完備性，提供 seajs.use 來實現模組系統的載入啟動。CMD 裡，每個 API 都簡單純粹。 138、requireJS的核心原理是什麼？（如何動態載入的？如何避免多次載入的？如何 快取的？） 核心是js的載入模組，通過正則匹配模組以及模組的依賴關係，保證檔案載入的先後順序，根據檔案的路徑對載入過的檔案做了快取 139、談一談你對ECMAScript6的瞭解？ ES6新的語法糖，類，模組化等新特性 關於ES6參考連結：http://es6.ruanyifeng.com/ 1. ECMAScript 6簡介 2. let和const命令 3. 變數的解構賦值 4. 字串的擴充套件 5. 正則的擴充套件 6. 數值的擴充套件 7. 陣列的擴充套件 8. 函式的擴充套件 9. 物件的擴充套件 10. Symbol 11. Proxy和Reflect 12. 二進位制陣列 13. Set和Map資料結構 14. Iterator和for...of迴圈 15. Generator函式 16. Promise物件 17. 非同步操作和Async函式 18. Class 19. Decorator 20. Module 140、javascript物件的幾種建立方式？ 1. 工廠模式 2. 建構函式模式 3. 原型模式 4. 混合建構函式和原型模式 5. 動態原型模式 6. 寄生建構函式模式 7. 穩妥建構函式模式 141、javascript繼承的 6 種方法？ 1. 原型鏈繼承 2. 借用建構函式繼承 3. 組合繼承(原型+借用構造) 4. 原型式繼承 5. 寄生式繼承 6. 寄生組合式繼承 142、JavaScript 原型，原型鏈 ? 有什麼特點？ 1. 原型物件也是普通的物件，是物件一個自帶隱式的 __proto__ 屬性，原型也有可能有自己的原型，如果一個原型物件的原型不為 null 的話，我們就稱之為原型鏈 2. 原型鏈是由一些用來繼承和共享屬性的物件組成的（有限的）物件鏈 143、簡述一下你對web效能優化的方案？ 1、儘量減少 HTTP 請求 2、使用瀏覽器快取 3、使用壓縮元件 4、圖片、JS的預載入 5、將指令碼放在底部 6、將樣式檔案放在頁面頂部 7、使用外部的JS和CSS 8、精簡程式碼 144、模組化怎麼做？ 1、 使用字面量實現名稱空間(YUI)： Itcast.common.dom={}; Itcast.common.css={}; Itcast.common.event={}; 2、使用閉包 立即執行函式,不暴露私有成員 var module1 = (function(){ 　　　　var _count = 0; 　　　　var m1 = function(){ 　　　　　　//... 　　　　}; 　　　　var m2 = function(){ 　　　　　　//... 　　　　}; 　　　　return { 　　　　　　m1 : m1, 　　　　　　m2 : m2 　　　　}; 　　})(); --------------------- 本文來自 秋水不寒 的CSDN 部落格 ，全文地址請點選：https://blog.csdn.net/q121516340/article/details/51332454?utm_source=copy1、javascript的typeof返回哪些資料型別 object number function boolean underfind string typeof isNaN 檢測陣列的幾種方式： Array.isArray(); es5 toString.call([]);//”[object Array]” var arr=[]; arr.constructor;//Array instanceof Array 2、傳統事件繫結和符合W3C標準的事件繫結有什麼區別？

123

div1.onclick=function(){}; 1、如果說給同一個元素綁定了兩次或者多次相同型別的事件，那麼後面的繫結會覆蓋前面的繫結 2、不支援DOM事件流 事件捕獲階段è目標元素階段=>事件冒泡階段 符合W3C標準的事件繫結的方式 addEventListener/attachEvent A、非IE瀏覽器： addEventListener 1、 如果說給同一個元素綁定了兩次或者多次相同型別的事件，所以的繫結將會依次觸發 2、 支援DOM事件流的 3、 進行事件繫結傳參不需要on字首 addEventListener(“click”,function(){},true);//此時的事件就是在事件捕獲階段執行 第三個引數：代表是否在捕獲階段執行，預設值是false addEventListener(“click”,function(e){ }) addEventListener(“click”,function(){},false) 事件在冒泡階段執行 B、IE瀏覽器 ie9開始，ie11 edge：addEventListener ie9以前 ie8：attachEvent/detachEvent 1、 進行事件型別傳參需要帶上on字首 dom1.attachEvent(“onclick”,functioin(){}); 2、 這種方式只支援事件冒泡，不支援事件捕獲 3、IE和標準下有哪些相容性的寫法 ev = ev || window.event è獲取觸發事件的物件 var target = ev.srcElement||ev.target à獲取事件的源物件 document.documentElement.clientWidth || document.body.clientWidth 4、call和apply的區別 call和apply相同點： 都是為了用一個本不屬於一個物件的方法，讓這個物件去執行 toString.call([],1,2,3) toString.apply([],[1,2,3]) Object.call(this,obj1,obj2,obj3) Object.apply(this,arguments) 區別：call第二個引數開始接受一個引數列表 apply第二個引數開始接受一個引數陣列 5、Javascript如何實現繼承？ 原型鏈繼承，借用建構函式繼承，原型+建構函式組合繼承，寄生式繼承 6、Javascript建立物件的幾種方式？ 第一種：物件字面量、Object建構函式 第二種：建構函式 第三種：純建構函式 第四種：空建構函式+原型 第五種：混合建構函式+原型 第六種：動態原型 第七種：寄生建構函式 第八種：Object.create()——ES5 ie9+ 以下是寄生建構函式模式： ——其實是工廠模式的變種，只不過是放在其他建構函式中建立物件 程式碼如下： function SpecialArray(){ var values = []; values.push.apply(values, arguments); values.toPipedString = function(){ return this.join("|"); }; return values; } var colors = new SpecialArray("red", "blue", "green"); alert(colors.toPipedString()); //"red|blue|green" 7、JavaScript this指標、閉包、作用域 this：指向呼叫上下文 閉包：內層作用域可以訪問外層作用域的變數 作用域：定義一個函式就開闢了一個區域性作用域，整個js執行環境有一個全域性作用域 7、如何阻止事件冒泡和預設事件 e. stopPropagation();//標準瀏覽器阻止事件冒泡 event.canceBubble=true;//ie9之前 阻止預設事件： 為了不讓a點選之後跳轉，我們就要給他的點選事件進行阻止 return false e.preventDefault(); 8、javascript的同源策略 一段指令碼只能讀取來自於同一來源的視窗和文件的屬性，這裡的同一來源指的是主機名、協議和埠號的組合 協議：http,ftp https 主機名；localhost 127.0.0.1 埠名：80: 127.0.0.1:1011 http協議的預設埠：80 https:協議的預設埠是8083 同源策略帶來的麻煩：ajax在不同域名下的請求無法實現， 如果說想要請求其他來源的js檔案，或者json資料，那麼可以通過jsonp來解決 JSONP的實現原理：通過動態建立script標籤 9、編寫一個數組去重的方法 [1,3,1,5,2,3,7]=>[1,3,5,2,7] 方法1： 1、 先建立一個空陣列，用來儲存最終的結果 2、 迴圈原陣列中的每個元素 3、 再對每個元素進行二次迴圈，判斷是否有與之相同的元素，如果沒有，將把這個元素放到新陣列中 4、 返回這個新陣列 方法2： 陣列的indexOf()方法返回給定元素能找在陣列中找到的第一個索引值，否則返回-1。 Array.prototype.unique2 = function() { var n = []; //一個新的臨時陣列 for(var i = 0; i < this.length; i++) //遍歷當前陣列 { //如果當前陣列的第i已經儲存進了臨時陣列，那麼跳過， //否則把當前項push到臨時數組裡面 if (n.indexOf(this[i]) == -1) n.push(this[i]); } return n; } 10、JavaScript是一門什麼樣的語言，它有哪些特點？ 沒有標準答案。 執行環境：瀏覽器中的JS引擎（v8.。。 ff:splidemonkey） 執行在Node.js：v8引擎上 語言特性：面向物件（建立物件的多種方式，繼承的多種方式、原型鏈），動態語言 //動態語言的特性 var num=10;//num是一個數字型別 num="jim";//此時num又變成一個字串型別 //我們把一個變數用來儲存不同資料型別的語言稱之為一個動態語言，或者說是一個弱型別語言 //靜態語言：c# Java c c++ //靜態語言在宣告一個變數就已經確定了這個變數的資料型別， int c;//c就是整數型別//我們把這種宣告一個變數就確定了它的資料型別這樣的語言稱之為靜態語言，也稱之為強型別語言 // 而且在任何時候都不可以改變他的資料型別 11、如何檢測陣列的資料型別 方法一、判斷其是否具有“陣列性質”，如slice()方法。可自己給該變數定義slice方法，故有時會失效 方法二、obj instanceof Array 在某些IE版本中不正確 方法三、toString.call([]);//”[object Array]” 方法四、方法一二皆有漏洞，在ECMA Script5中定義了新方法Array.isArray(), 保證其相容性，最好的方法如下： if(typeof Array.isArray==="undefined"){ Array.isArray = function(arg){ return Object.prototype.toString.call(arg)==="[object Array]" }; } 12、希望獲取到頁面中所有的checkbox怎麼做 var domList = document.getElementsByTagName(‘input’) var checkBoxList = [];//返回的所有的checkbox var len = domList.length;　　//快取到區域性變數 while (len--) {　　 　　if (domList[len].type == ‘checkbox’) { 　　checkBoxList.push(domList[len]); 　　} } 13、Javascript的事件流模型都有什麼？ DOM事件流 “事件冒泡”：事件開始由最具體的元素接受，然後逐級向上傳播 “事件捕捉”：事件由最不具體的節點先接收，然後逐級向下，一直到最具體的 “DOM事件流”：三個階段：事件捕捉，目標階段，事件冒泡 14、看下列程式碼輸出為何？解釋原因。 var a; alert(typeof a); // “undefined” //alert(b); // 報錯 b=10; alert(typeof b);//”number” undefined會在以下三種情況下產生： a、一個變數定義了卻沒有被賦值 b、想要獲取一個物件上不存在的屬性或者方法: c、一個數組中沒有被賦值的元素 15、看程式碼給答案。 var a = new Object(); a.value = 1; b = a; b.value = 2; alert(a.value);//2 答案：2（考察引用資料型別細節） 16、var numberArray = [3,6,2,4,1,5]; （考察基礎API） 1) 實現對該陣列的倒排，反轉，輸出[5,1,4,2,6,3] reverse() 2) 實現對該陣列的降序排列，輸出[6,5,4,3,2,1] 氣泡排序 17、輸出今天的日期，以YYYY-MM-DD的方式，比如今天是2014年9月26日，則輸出2014-09-26 var d = new Date(); // 獲取年，getFullYear()返回4位的數字 //今年：2016 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); 18、將字串”{$id}{$name}”中的{$id}替換成10，{$name}替換成Tony （使用正則表示式） 答案：”{$id}{$id}_{$name}”.replace(/{\$id}/g, ’10′).replace(/{\$name}/g, ‘Tony’); 19、foo = foo||bar ，這行程式碼是什麼意思？為什麼要這樣寫？ 這種寫法稱之為短路表示式 答案：if(!foo) foo = bar; //如果foo存在，值不變，否則把bar的值賦給foo。 短路表示式：作為”&&”和”||”操作符的運算元表示式，這些表示式在進行求值時，只要最終的結果已經可以確定是真或假，求值過程便告終止，這稱之為短路求值。 注意if條件的真假判定，記住以下是false的情況： 空字串、false、undefined、null、0 20、看下列程式碼，將會輸出什麼?( 變數宣告提前 var foo = 1; function(){ var foo; console.log(foo); //undefined foo = 2; console.log(foo); // 2; } 函式宣告與變數宣告會被JavaScript引擎隱式地提升到當前作用域的頂部，但是隻提升名稱不會提升賦值部分。 21、有這樣一個URL：http://item.taobao.com/item.htm?a=1&b=2&c=&d=xxx&e，請寫一段JS程式提取URL中的各個GET引數(引數名和引數個數不確定)，將其按key-value形式返回到一個json結構中，如{a:’1′, b:’2′, c:”, d:’xxx’, e:undefined}。 22、 a、看下面程式碼，給出輸出結果。 for(var i=1;i<=3;i++){ setTimeout(function(){ console.log(i); },0); }; 答案：4 4 4。 原因：setTimeout會在js引擎空閒的時候再執行 Javascript事件處理器線上程空閒之前不會執行。追問， b、如果讓a中程式碼輸出1 2 3？ for(var i=1;i<=3;i++){ setTimeout((function(a){ //改成立即執行函式 console.log(a); })(i),0); }; 23、寫一個function，清除字串前後的空格。（相容所有瀏覽器） 使用自帶介面trim()，考慮相容性： if (!String.prototype.trim) { String.prototype.trim = function() { return this.replace(/^\s+/, "").replace(/\s+$/,""); //\s匹配空白字元：回車、換行、製表符tab 空格 } } // test the function var str = " \t\n test string ".trim(); alert(str == "test string"); // alerts "true" 24、Javascript中callee和caller的作用？ arguments.callee：獲得當前函式的引用 caller是返回一個對函式的引用，該函式呼叫了當前函式；如果不是由其他函式呼叫的，那麼返回值就是null callee是返回正在被執行的function函式，也就是所指定的function物件的正文。 那麼問題來了？ 如果一對兔子每月生一對兔子；一對新生兔，從第二個月起就開始生兔子；假定每對兔子都是一雌一雄，試問一對兔子，第n個月能繁殖成多少對兔子？（使用callee完成） 25、Javascript中, 以下哪條語句一定會產生執行錯誤？ 答案( BC ) A、var _變數=NaN;B、var 0bj = [];(這裡是一個數字0)C、var obj = //; D、var obj = {}; 26、以下兩個變數a和b，a+b的哪個結果是NaN？ 答案( C ) A、var a=undefind; b=NaN //拼寫 undefined B、var a=‘123’; b=NaN //字串 C、var a =undefined , b =NaN D、var a=NaN , b='undefined' //”NaNundefined” 27、var a=10; b=20; c=4; ++b+c+a++ 以下哪個結果是正確的？答案( B ) A、34 B、35 C、36 D、37 //21+4+10 28、typeof運算子返回值中有一個跟javascript資料型別不一致，它是________”function”_________。 29、定義了一個變數，但沒有為該變數賦值，如果alert該變數，javascript彈出的對話方塊中顯示___undefined______ 。 30、分析程式碼，得出正確的結果。 var a=10, b=20 , c=30; ++a; a++; e=++a+(++b)+(c++)+a++;//一開始：a=12 //程式執行時：13+21+30+13：細心 alert(e); 彈出提示對話方塊：77 var a=10, b=20 , c=30; ++a;//a=11 a++;//a=11 e=++a+(++b)+(c++)+a++; //a=12 13+21+30+13=77 alert(e); 31、寫出程式執行的結果？ for(i=0, j=0; i<10, j<6; i++, j++){ k = i + j;} 結果：10 for(i=0, j=0; i<10, j<6; i++, j++){ //終止條件：j=5 i=5 k = i + j;//k=10 } //結果：10 32、閱讀以下程式碼，請分析出結果 var arr = new Array(1 ,3 ,5); arr[4]='z';//[1,3,5,undefined,’z’] arr2 = arr.reverse(); //arr2=[’z’,undefined,5,3,1]; //arr=[’z’,undefined,5,3,1] arr3 = arr.concat(arr2); alert(arr3); 彈出提示對話方塊：z,,5,3,1,z,,5,3,1 考點：reverse 方法1、顛倒陣列中元素的位置， 2、並返回該陣列的引用。 33、給一個按鈕繫結點選事件的函式，確認使用者是否退出當前頁面，確認之後關閉視窗 confirm window.close() 34、定義一個foo()函式的內容，要求能夠彈出對話方塊提示當前選中的是第幾個單選框。

35、列舉瀏覽器物件模型BOM裡常用的至少4個物件，並列舉window物件的常用方法至少5個 物件：window document location screen history navigator 方法：alert() confirm() prompt() open() close() 36、簡述列舉文件物件模型DOM裡document的常用的查詢訪問節點的方法 Document.getElementById 根據元素id查詢元素 Document.getElementByName 根據元素name查詢元素 Document.getElementTagName 根據指定的元素名查詢元素 37、希望獲取到頁面中所有的checkbox怎麼做？(不使用第三方框架) 38、簡述建立函式的幾種方式 第一種（函式宣告）： function sum1(num1,num2){ return num1+num2; } 第二種（函式表示式）： var sum2 = function(num1,num2){ return num1+num2; } 匿名函式： function(){}:只能自己執行自己 第三種（函式物件方式）：瞭解 var sum3 = new Function("num1","num2","return num1+num2"); 41、documen.write和 innerHTML 的區別？ document.write 只能重繪整個頁面 innerHTML 可以重繪頁面的一部分 42、記憶體洩露是什麼？ 記憶體洩漏指任何物件在您不再擁有或需要它之後仍然存在。 垃圾回收器定期掃描物件，並計算引用了每個物件的其他物件的數量。如果一個物件的引用數量為 0（沒有其他物件引用過該物件），或對該物件的惟一引用是迴圈的，那麼該物件的記憶體即可回收。 43、判斷一個字串中出現次數最多的字元，統計這個次數 答：var str = 'asdfssaaasasasasaa'; var json = {}; for (var i = 0; i < str.length; i++) { if(!json[str.charAt(i)]){ //str.charAt(i) =”a” json[str.charAt(i)] = 1; //json[“a”]=1 }else{ json[str.charAt(i)]++; //讓a鍵的值+1，也就是這個字元多出現了