JavaScript知識彙總
阿新 • • 發佈：2019-01-01
JavaScript 是屬於網路的指令碼語言；
這門語言可用於 HTML 和 web，更可廣泛用於伺服器、PC、膝上型電腦、平板電腦和智慧手機等裝置。
JavaScript 是一種輕量級的程式語言。
JavaScript 是可插入 HTML 頁面的程式設計程式碼。
JavaScript 插入 HTML 頁面後，可由所有的現代瀏覽器執行。
字串、數字、布林、陣列、物件、Null、Undefined
原始資料型別有5大類：Undefined,Null,Boolean,Number,String
JavaScript 擁有動態型別。這意味著相同的變數可用作不同的型別：
例項var x // x 為 undefinedvar x = 6; // x 為數字var x = "Bill"; // x 為字串
一、JS基礎 1. js裡的null和undefined的區別 undefined表示未定義，null表示物件為空。 null是undefined衍生出來的值，因此兩者用==比較是相等的。 2. undefined表示"缺少值"，就是此處應該有一個值，但是還沒有定義。典型用法是： （1）變數被聲明瞭，但沒有賦值時，就等於undefined。 （2) 呼叫函式時，應該提供的引數沒有提供，該引數等於undefined。 （3）物件沒有賦值的屬性，該屬性的值為undefined。 （4）函式沒有返回值時，預設返回undefined 3. setTimeout和setInterval方法的區別 相同點:都是非同步操作，都是計時器功能， 區別：setTimeout只執行一次 setInterval每隔固定時間執行一次 setTimeout可遞迴呼叫自身實現setInterval效果 4. js中eval函式的功能 eval() 函式可計算某個字串，並執行其中的的 JavaScript 程式碼 如： var str = '2 + 3' console.log(eval(str)); 5. 一個方法沒有傳參，呼叫的時候再傳參行不行，怎麼傳 函式其實是不需要形參的，函式內部要用的引數都儲存在arguments裡，所以只需要在arguments裡取 function add(){ var sum = 0; for(var i = 0 ; i < arguments.length ; i++){ sum += arguments[i]; } return sum } console.log(add(3,5,7,9)); 6. 分割字串方法 split(); 7. 帶字串的陣列如何排序 ary.sort(function(a,b){return a - b}); 8. 列出陣列物件方法，並描述功能，至少4個 push pull shift unshift splice join reverse 9. 說說 JS return 用於函式執行後返回結果。 10. ‘==’和‘===’ ==不判斷型別，===要判斷型別。 11. 什麼是偽陣列，如何將偽陣列轉換為真陣列 具備陣列的形式，已經length屬性，但是不具備陣列的其他方法 轉為陣列的方法： (1)定義一個空陣列，for迴圈偽陣列，依次push到空陣列 (2)Array.prototype.slice.call(偽陣列)，呼叫陣列的slice方法 12. URL標準格式，其中包括哪幾個部分 URL由三部分組成：協議型別，主機名和路徑及檔名 (1)協議：一般是http、https、file等 (2)主機名hostname：是指存放資源的伺服器的域名系統 (DNS) 主機名或 IP 地址 (3)port（埠號） (4)路徑 (5);parameters(引數) 這是用於指定特殊引數的可選項 (6)？Query查詢 可選，用於給動態網頁（如使用CGI、ISAPI、PHP/JSP/ASP/ASP.NET等技術製作的網頁）傳遞引數，可有多個引數，用“&”符號隔開，每個引數的名和值用“=”符號隔開。 (7)fragment 資訊片段，用於指定網路資源的片段 13. document.write和innerHTML有什麼區別 document.write是直接寫入到頁面的內容 innerHTML則是DOM頁面元素的一個屬性，代表該元素的html內容。你可以精確到某一個具體的元素來進行更改。 innerHTML很多情況下都優於document.write，其原因在於其允許更精確的控制要重新整理頁面的那一個部分。 14. 平時是怎麼除錯js的 (1)console.log(); (2)sources：斷點除錯； 15. 怎麼選擇相鄰兄弟元素 previousSibling與nextSibling 16. DOM和BOM區別 DOM:文件物件模型。用於獲取、操作節點物件。 BOM:操作瀏覽器的屬性和行為。 17. typeof 是什麼意思 檢測變數型別，將變數的型別資訊當做字串返回， 返回值可以有六種：number、string、boolean、object、function、undefined 18. window.location.href 與window.location.replace 的區別？ window.location.href切換以後可以回退到原頁面。 window.location.replace切換以後不能回退原頁面。 19. JS有哪些內建的物件 內建物件：指一種語言自帶的一些物件，供開發者使用，這些物件提供了一些常用或最基本必要的功能 Js內建物件有：Array，Number，String，Boolean，Date，Math，Functions，RegExp，Global，Events, Object 20. 如何判斷一個變數是屬於哪種型別，有幾種方式，區別是什麼，各自怎麼使用的。 (1)typeof (2)intanceof (3)Object.prototype.toString.call(), 呼叫頂層物件Object的toString方法，而不是每個物件自身的toString方法 console.log(Object.prototype.toString.call("")); console.log(Object.prototype.toString.call(1)); console.log(Object.prototype.toString.call(true)); console.log(Object.prototype.toString.call(new Date())); console.log(Object.prototype.toString.call([])); 21. 什麼是JSON？ (1)JSON 指的是 JavaScript 物件表示法（JavaScript Object Notation） (2)JSON 是輕量級的文字資料交換格式 (3)JSON 獨立於語言 (4)JSON 具有自我描述性，更易理解 (5)JSON 使用JavaScript語法來描述資料物件，但是JSON仍然獨立於語言和平臺。JSON解析器和JSON庫支援許多不同的程式語言。 22. js怎麼將一個object物件轉換成json字串？怎麼將字串轉化為物件？ 物件轉JSON字串：JSON.stringify()(要轉換的object物件); JSON字串轉物件：JSON.parse(); 23. arguments是什麼,怎樣理解？ (1)argument是js的一個內建物件 (2)每個函式都有arguments物件 (3)其表現是一個偽陣列，以偽陣列的形式儲存函式的實參 24. 簡述同步和非同步的區別？ JavaScript是單執行緒的。 同步：指程式的下一步執行依賴上一步執行的結果，等上一步執行完畢得到結果後，再往下執行，任務執行的順序與其排列順序是一致的，會阻塞程式的執行， 非同步：多個任務是同時執行的，當任意一個任務得到結果後，會呼叫預先設定好的回撥函式，回撥函式會依次進入任務佇列，當主執行緒執行完成後會執行任務佇列裡的任務。非同步操作不會影響主執行緒的執行，不會阻塞程式 非同步是非常重要的，在瀏覽器端，那些耗時很長的任務，比如ajax，應該用非同步操作，在伺服器端，一般都是非同步加回調的模式，處理同時的多個http請求，如果是同步請求，伺服器的效能就會非常低，經常卡死 25. 事件委託的原理 事件委託技術—利用事件冒泡機制，將監聽器新增到父節點上，來避免對每個節點新增監聽器，事件監聽器會分析從子元素冒泡上來的事件，找到對應的子元素 26. 事件繫結與普通事件的區別？ onclick=‘xxx’同一個事件只能繫結一個，後面覆蓋前面，可以相容瀏覽器。 addEventListener(‘click’,function(){},false) 同一時間可以繫結多次，依次執行，有相容性問題。 27. 什麼是事件流，事件流有哪些，Firefox和IE各自支援哪些事件流。 事件流：頁面產生事件時，事件傳播的方向。 分為：冒泡事件、捕獲事件。 DOM瀏覽器：使用冒泡+捕獲。 IE瀏覽器：使用冒泡。 28. 冒泡事件與捕獲事件 （1）冒泡型事件：事件按照從最特定的事件目標到最不特定的事件目標(document物件)的順序觸發。 IE 5.5: div -> body -> document IE 6.0: div -> body -> html -> document Mozilla 1.0: div -> body -> html -> document -> window （2）捕獲型事件(event capturing)：事件從最不精確的物件(document 物件)開始觸發，然後到最精確(也可以在視窗級別捕獲事件，不過必須由開發人員特別指定)。 （3）DOM事件流：同時支援兩種事件模型：捕獲型事件和冒泡型事件，先捕獲再冒泡。兩種事件流會觸及DOM中的所有物件，從document物件開始，也在document物件結束。 DOM事件模型最獨特的性質是，文字節點也觸發事件(在IE中不會)。 支援W3C標準的瀏覽器在新增事件時用addEventListener(event,fn,useCapture)方法，基中第3個引數useCapture是一個Boolean值，用來設定事件是在事件捕獲時執行，還是事件冒泡時執行。而不相容W3C的瀏覽器(IE)用attachEvent()方法，此方法沒有相關設定，不過IE的事件模型預設是在事件冒泡時執行的，也就是在useCapture等於false的時候執行，所以把在處理事件時把useCapture設定為false是比較安全，也實現相容瀏覽器的效果 29. 如何阻止事件冒泡的預設事件？ 事件冒泡：現代瀏覽器:e.stopPropagation() IE:e.cancleBubble = true 預設事件：現代瀏覽器:event.preventDefault() 和 return false IE:e.returnValue = false 30. “use strict”是什麼意思？使用它的好處和壞處？ 嚴格模式：是ES5新增的js執行模式，使js在更嚴格、更規範化的模式下執行 好處：(1)消除JS這門語言本身存在的不合理、不嚴謹之處，使程式碼更規範，減少一些怪異行為 (2)在該模式下一些糟糕的特效會被禁用，如with，函式必須宣告在頂層，arguments、callee不允許使用， (3)消除一些程式碼不安全之處，eval()執行與正常模式下不同等 (4)提高編譯器效率，增加執行速度，為未來新版本的js作鋪墊 所以："嚴格模式"體現了Javascript更合理、更安全、更嚴謹的發展方向. 為了達到更為普遍的相容性, 我們應該總是在嚴格模式下編寫程式碼. 壞處：(1)相容性問題，IE6789均不支援 (2)團隊合作問題，有些模組是正常模式，有些是嚴格模式，會出現問題，解決：統一規範模式，或將不同模組寫入不同的立即執行函式，每個函式加上嚴格和非嚴格 31. this物件的理解，this是怎麼工作的 this是JS的一個關鍵字，它的值是可變化的，它的取值是在函式呼叫的時候，產生的上下文環境裡取得，不是在宣告時候取得，根據函式的呼叫不同會產生不同的上下文環境，this的值也就隨之改變，歸根結底，誰呼叫它就指向誰 this的工作：object物件呼叫函式，就指向object物件，window呼叫函式就指向window，call和apply呼叫就指向括號裡的物件，bind將this固化到括號裡的物件 32. 什麼是閉包？為什麼使用它？ 閉包是一個訪問自由變數的函式。它的形成有兩個條件。1.函式內部必須訪問外部變數。2.該內部函式被外部引用。 閉包可以將區域性變數持續儲存。缺點，過多的使用會導致記憶體佔用過高。 33. 原生JS中怎麼建立，插入，刪除？（就是操作dom） 建立：var p1 = document.createElement('p'); 賦值：p1.innerHTML = 'nice to see you' 插入：document.getElementById('div1').appendChild(p1) 刪除：div1.removeChild(p1) 34. jQuery中怎麼建立，插入，刪除？（就是操作dom） 建立：$('<p id="p1">hello world1</p>') 內部：插入:append,appendTo後插入，prepend和prependTo前插入 外部：after、before、insertAfter、insertBefore 刪除：empty和remove 35. JS查詢DOM節點的方法？對應的Jq寫法？ document.getElementsByTagName('li') //JQ $(‘li’) document.getElementById('div1') //JQ $(‘#div1’) document.getElementsByClassName('aa') //JQ $(‘.aa’) document.getElementsByName('zhansan'); //JQ $('input[name="zhansan"]') document.querySelector('.abc a p>span') //直接用css複合選擇器 //JQ $(‘.abc a p>span’) document.querySelectorAll('.abc') //返回.abc的子元素陣列 //JQ $(‘.abc’) 36. 原生JS的window.onload 與 jquery的$(document).ready(function)有什麼不同？ (1)執行時機 window.onload：會在頁面所有元素載入完成後才會執行，如圖片，視訊等元素 jquery的ready: 會在DOM結構繪製完畢後生成DOMContentLoaded 事件時就執行 (2)可執行個數不同： window.onload只能有一個，多個的話會執行最後一個，document.ready可以執行多次 (3)window.onload不能簡寫，document.ready可以寫成 $(function(){}) (4)在JQuery中，推薦使用$(document).ready() ,如果需要在window.onload後執行，可以呼叫 $(window).load()方法 37. ajax的意義，常用的發起ajax的方法？ AJAX最根本原理就是在不重新整理頁面的情況下訪問伺服器處理資料，並根據資料的處理結果按你想要的方式對頁面作出即時更改 意義：區域性重新整理提供良好的使用者體驗，減輕伺服器的寬度和壓力 常用發起ajax的方法：(1)原生xhr。(2)JQuery的$.ajax。(3)ES6的 fetch。 38. 你提到了jquery，來你介紹一下 jquery jQuery是一個快速、簡潔的JavaScript框架，是繼Prototype之後又一個優秀的JavaScript程式碼庫。jQuery設計的宗旨是“write Less，Do More”，即倡導寫更少的程式碼，做更多的事情。它封裝JavaScript常用的功能程式碼，提供一種簡便的JavaScript設計模式，優化HTML文件操作、事件處理、動畫設計和Ajax互動。 jQuery的核心特性可以總結為：具有獨特的鏈式語法和短小清晰的多功能介面；具有高效靈活的css選擇器，並且可對CSS選擇器進行擴充套件；擁有便捷的外掛擴充套件機制和豐富的外掛。jQuery相容各種主流瀏覽器，如IE 6.0+、FF 1.5+、Safari 2.0+、Opera 9.0+等。 39. 列舉jquery中的提高效能的方案？ (1)對某個元素多次進行選擇，會大大消耗瀏覽器資源，因此可以定義一個變數儲存一次選擇，多次呼叫 (2)若要查詢頁面中指定類名的標籤，會極大消耗瀏覽器資源，可以給其父元素加個id，通過後代選擇器來查詢類名 (3)jquery提供大量的篩選方法，如eq().children()等，最好使用 find（）方法** 效能最高 (4)jquery 每次使用會有一些快取，所以推薦使用**鏈式寫法** 40. css3的animate和jq的animate的區別 (1)css3的3D動畫，JS模擬不了 (2)css3的2D轉換，如translate\scale\rotate（）\animation等，效率均高於js模擬 (3)其餘常規屬性，如width、height、opacity、color等,css3均低於js模擬，這裡推薦js模擬 (4)css3的動畫是利用C語言編寫，是系統提供的方法，一般情況下效率高於Jq 41. 任意寫20個Jquery的方法 each,get,data,map,trim,css,animate,addClass,removeClass,props,attr,appendTo,append,after,before,insertBefore,instanceofrtAfter,find(),eq(),ajax,load,remove,empty,show,hide,slideUp,slideDown,fadeIn,fadeOut,fadeTo 42. JQuery繫結事件的方式，請說明他們的優缺點 (1)on ,推薦，因為其他三個都是呼叫on實現的 (2)bind，只能給當前元素繫結事件 (3)live，1.9已移除，解決bind的缺陷，可以給未來元素繫結事件，效率低，繫結在document上 (4)delegate 支援事件委託，支援給未來元素繫結事件，最接近on 43. attr和prop的區別 (1)對於HTML元素本身就帶有的固有屬性，在處理時，使用prop方法。 (2)對於HTML元素我們自己自定義的DOM屬性，在處理時，使用attr方法。 (3)像checkbox，radio和select這樣的元素，選中屬性對應“checked”和“selected”，這些也屬於固有屬性，因此需要使用prop方法去操作才能獲得正確的結果。 44. $(this)和this關鍵字在jQuery中有何不同 $(this) 返回一個 jQuery 物件，你可以對它呼叫多個 jQuery 方法，比如用 text() 獲取文字，用val() 獲取值等等。 this 代表當前元素，它是 JavaScript 關鍵詞中的一個，表示上下文中的當前 DOM 元素。你不能對它呼叫 jQuery 方法，直到它被 $() 函式包裹，例如 $(this) 45. 請簡單描述一下JQuery中的選擇器 1.JQuery封裝了大量的選擇器，具備元素，標籤，類名等基本選擇器功能，還對類名選擇器進行擴充，支援css的語法選擇器 2.對css語法選擇器進行擴充，如eq,[type=’text’],has(),first.等 46. 移動端擊穿問題（網上都叫“點透”問題） 例：當在C區域進行點選罩層A的時候，會發現跳到百度頁面了，也就是，本來點選A，但是卻透過A，點選到了B裡的連結！這就是傳說中的 click點透 。 出現的場景： (1)A/B兩個層上下z軸重疊。 (2)上層的A點選後消失或移開。 (3)B元素本身有預設click事件（如a標籤） 或 B綁定了click事件 出現的原因：touch事件的300ms延遲 解決： (1)移動端統一使用touch相關事件， (2)B元素有click事件，A應及時取消預設點選，如 if(event=='touchend') e.preventDefault() 二、JS程式碼實現 47. 如果我要實現（一個按鈕，點選之後，出現一個div提示）你會怎麼做？ 48. 如何獲取一個物件的所有屬性值。 49. 已知ID的input輸入框，希望獲取這個輸入框的輸入值？怎麼做？不使用第三方框架 50. 希望獲取頁面中所有的checkbox怎麼做，不適用第三方框架 51. foo = foo || bar ，這行程式碼是什麼意思？為什麼這樣寫 52. 有哪些js方式對一個DOM設定它的css樣式？ 53. 刪除陣列最後一個數 54. 怎麼向陣列指定位置插入資料或者刪除一條資料？ 55. 用原生JS輸出1-999之間的素數（即質數，只能被1或者本身整除的整數) 56. 寫一個氣泡排序方法 57. 頁面上有一個表格，程式碼段為<table id=’userList’>,請設定其表格文字字型為18畫素，紅色，文字間距0.2em,行高150% 58. 對字串abcdef進行翻轉，原生 59. 實現點選li，alert出它的index (原生和jquery) <ul id="test"> <li>1</li> <li>2</li> <li>3</li> <li>4</li> </ul> 60. 隨機選取10-100之間的10個數字，存入一個數組，並排序 61. 一個div裡有個關閉按鈕，點選按鈕和div外面所有位置，都可以關閉div 62. 實現alert()函式中出現換行？ 63. 判斷字串格式是否符合要求，第一個是字母，往後可以是數字、字母、下劃線，字元總長度為5-20 64. 輸出頁面的節點個數，DOM節點原生 65. 手寫JQuery中的ajax獲取json簡單示例 66. 寫一個函式，檢測一個變數是否是String型別 67. 寫下面打印出來的值 "hello world".split("").reverse().join(); 68. var name = jack; function say(){ console.log(name); var name = 'rose'; } say(); console.log(name); 輸出什麼？為什麼？ 69. var foo = 'hello'; (function(){ var bar = 'World'; alert(foo + bar) })() alert(foo+bar) 分別彈出什麼 70. 打印出來的值 console.info("1"); setTimeout(function(){ console.info("2"); },0); console.info("3"); 71. 以下continue和break執行結果num分別是多少？ var num=1； for(var i=0; i<10;i++)( if(i%3==0){ continue/break; } num++; } 78. var i=0； i++； j=i++; y=++j; i,y的值分別是多少？ 79. var foo="11"+1-"1"; console.log(foo); console.log(typeof foo); 80. var k = 0; for(var m = 0,n = 0;m < 10 ,n < 7;m++,n++){ k = m+n } console.log(k); 81. <input type="text" id="search_input"> <input type="button" value="搜尋" id="search_btn"> <div id="people_list"> <div class="unit">張三——技術部</div> <div class="unit">李四——人事部</div> <div class="unit">王二——財務部</div> <div class="unit">小鄭——後勤部</div> </div> 以上程式碼是一組人員列表，以及一個搜尋框和一個搜尋按鈕 要求：用JQuery實現輸入關鍵字在文字框中，點搜尋按鈕能搜尋到含有關鍵字的人員，不相關人員不顯示 $('#search_btn').on('click',function(){ var arr = []; var reg = new RegExp($('#search_input').val()) $('.unit').each(function(){ $(this).css('display','none') if(reg.test($(this).html())){ $(this).css('display','block') } }) }) 82. 求值，為什麼？ var a= new Object(); a.value = 1; b = a; b.value = 2; alert(a.value) 83. 下面這個輸出什麼？ function test(){ var c = '600'; setTimeout(function(){ this.c = '700'; },1000) } c = '800'; var a = {c:'900'}; test.apply(a); console.log(a.c + c); setTimeout(function(){ console.log(a.c + c); },1100) 84. 實現節點的拖拽，原生 85. 實現省級二級聯動。 86. 實現圖片放大鏡效果。 87. 實現輪播效果。
一、JS基礎 1. js裡的null和undefined的區別 undefined表示未定義，null表示物件為空。 null是undefined衍生出來的值，因此兩者用==比較是相等的。 2. undefined表示"缺少值"，就是此處應該有一個值，但是還沒有定義。典型用法是： （1）變數被聲明瞭，但沒有賦值時，就等於undefined。 （2) 呼叫函式時，應該提供的引數沒有提供，該引數等於undefined。 （3）物件沒有賦值的屬性，該屬性的值為undefined。 （4）函式沒有返回值時，預設返回undefined 3. setTimeout和setInterval方法的區別 相同點:都是非同步操作，都是計時器功能， 區別：setTimeout只執行一次 setInterval每隔固定時間執行一次 setTimeout可遞迴呼叫自身實現setInterval效果 4. js中eval函式的功能 eval() 函式可計算某個字串，並執行其中的的 JavaScript 程式碼 如： var str = '2 + 3' console.log(eval(str)); 5. 一個方法沒有傳參，呼叫的時候再傳參行不行，怎麼傳 函式其實是不需要形參的，函式內部要用的引數都儲存在arguments裡，所以只需要在arguments裡取 function add(){ var sum = 0; for(var i = 0 ; i < arguments.length ; i++){ sum += arguments[i]; } return sum } console.log(add(3,5,7,9)); 6. 分割字串方法 split(); 7. 帶字串的陣列如何排序 ary.sort(function(a,b){return a - b}); 8. 列出陣列物件方法，並描述功能，至少4個 push pull shift unshift splice join reverse 9. 說說 JS return 用於函式執行後返回結果。 10. ‘==’和‘===’ ==不判斷型別，===要判斷型別。 11. 什麼是偽陣列，如何將偽陣列轉換為真陣列 具備陣列的形式，已經length屬性，但是不具備陣列的其他方法 轉為陣列的方法： (1)定義一個空陣列，for迴圈偽陣列，依次push到空陣列 (2)Array.prototype.slice.call(偽陣列)，呼叫陣列的slice方法 12. URL標準格式，其中包括哪幾個部分 URL由三部分組成：協議型別，主機名和路徑及檔名 (1)協議：一般是http、https、file等 (2)主機名hostname：是指存放資源的伺服器的域名系統 (DNS) 主機名或 IP 地址 (3)port（埠號） (4)路徑 (5);parameters(引數) 這是用於指定特殊引數的可選項 (6)？Query查詢 可選，用於給動態網頁（如使用CGI、ISAPI、PHP/JSP/ASP/ASP.NET等技術製作的網頁）傳遞引數，可有多個引數，用“&”符號隔開，每個引數的名和值用“=”符號隔開。 (7)fragment 資訊片段，用於指定網路資源的片段 13. document.write和innerHTML有什麼區別 document.write是直接寫入到頁面的內容 innerHTML則是DOM頁面元素的一個屬性，代表該元素的html內容。你可以精確到某一個具體的元素來進行更改。 innerHTML很多情況下都優於document.write，其原因在於其允許更精確的控制要重新整理頁面的那一個部分。 14. 平時是怎麼除錯js的 (1)console.log(); (2)sources：斷點除錯； 15. 怎麼選擇相鄰兄弟元素 previousSibling與nextSibling 16. DOM和BOM區別 DOM:文件物件模型。用於獲取、操作節點物件。 BOM:操作瀏覽器的屬性和行為。 17. typeof 是什麼意思 檢測變數型別，將變數的型別資訊當做字串返回， 返回值可以有六種：number、string、boolean、object、function、undefined 18. window.location.href 與window.location.replace 的區別？ window.location.href切換以後可以回退到原頁面。 window.location.replace切換以後不能回退原頁面。 19. JS有哪些內建的物件 內建物件：指一種語言自帶的一些物件，供開發者使用，這些物件提供了一些常用或最基本必要的功能 Js內建物件有：Array，Number，String，Boolean，Date，Math，Functions，RegExp，Global，Events, Object 20. 如何判斷一個變數是屬於哪種型別，有幾種方式，區別是什麼，各自怎麼使用的。 (1)typeof (2)intanceof (3)Object.prototype.toString.call(), 呼叫頂層物件Object的toString方法，而不是每個物件自身的toString方法 console.log(Object.prototype.toString.call("")); console.log(Object.prototype.toString.call(1)); console.log(Object.prototype.toString.call(true)); console.log(Object.prototype.toString.call(new Date())); console.log(Object.prototype.toString.call([])); 21. 什麼是JSON？ (1)JSON 指的是 JavaScript 物件表示法（JavaScript Object Notation） (2)JSON 是輕量級的文字資料交換格式 (3)JSON 獨立於語言 (4)JSON 具有自我描述性，更易理解 (5)JSON 使用JavaScript語法來描述資料物件，但是JSON仍然獨立於語言和平臺。JSON解析器和JSON庫支援許多不同的程式語言。 22. js怎麼將一個object物件轉換成json字串？怎麼將字串轉化為物件？ 物件轉JSON字串：JSON.stringify()(要轉換的object物件); JSON字串轉物件：JSON.parse(); 23. arguments是什麼,怎樣理解？ (1)argument是js的一個內建物件 (2)每個函式都有arguments物件 (3)其表現是一個偽陣列，以偽陣列的形式儲存函式的實參 24. 簡述同步和非同步的區別？ JavaScript是單執行緒的。 同步：指程式的下一步執行依賴上一步執行的結果，等上一步執行完畢得到結果後，再往下執行，任務執行的順序與其排列順序是一致的，會阻塞程式的執行， 非同步：多個任務是同時執行的，當任意一個任務得到結果後，會呼叫預先設定好的回撥函式，回撥函式會依次進入任務佇列，當主執行緒執行完成後會執行任務佇列裡的任務。非同步操作不會影響主執行緒的執行，不會阻塞程式 非同步是非常重要的，在瀏覽器端，那些耗時很長的任務，比如ajax，應該用非同步操作，在伺服器端，一般都是非同步加回調的模式，處理同時的多個http請求，如果是同步請求，伺服器的效能就會非常低，經常卡死 25. 事件委託的原理 事件委託技術—利用事件冒泡機制，將監聽器新增到父節點上，來避免對每個節點新增監聽器，事件監聽器會分析從子元素冒泡上來的事件，找到對應的子元素 26. 事件繫結與普通事件的區別？ onclick=‘xxx’同一個事件只能繫結一個，後面覆蓋前面，可以相容瀏覽器。 addEventListener(‘click’,function(){},false) 同一時間可以繫結多次，依次執行，有相容性問題。 27. 什麼是事件流，事件流有哪些，Firefox和IE各自支援哪些事件流。 事件流：頁面產生事件時，事件傳播的方向。 分為：冒泡事件、捕獲事件。 DOM瀏覽器：使用冒泡+捕獲。 IE瀏覽器：使用冒泡。 28. 冒泡事件與捕獲事件 （1）冒泡型事件：事件按照從最特定的事件目標到最不特定的事件目標(document物件)的順序觸發。 IE 5.5: div -> body -> document IE 6.0: div -> body -> html -> document Mozilla 1.0: div -> body -> html -> document -> window （2）捕獲型事件(event capturing)：事件從最不精確的物件(document 物件)開始觸發，然後到最精確(也可以在視窗級別捕獲事件，不過必須由開發人員特別指定)。 （3）DOM事件流：同時支援兩種事件模型：捕獲型事件和冒泡型事件，先捕獲再冒泡。兩種事件流會觸及DOM中的所有物件，從document物件開始，也在document物件結束。 DOM事件模型最獨特的性質是，文字節點也觸發事件(在IE中不會)。 支援W3C標準的瀏覽器在新增事件時用addEventListener(event,fn,useCapture)方法，基中第3個引數useCapture是一個Boolean值，用來設定事件是在事件捕獲時執行，還是事件冒泡時執行。而不相容W3C的瀏覽器(IE)用attachEvent()方法，此方法沒有相關設定，不過IE的事件模型預設是在事件冒泡時執行的，也就是在useCapture等於false的時候執行，所以把在處理事件時把useCapture設定為false是比較安全，也實現相容瀏覽器的效果 29. 如何阻止事件冒泡的預設事件？ 事件冒泡：現代瀏覽器:e.stopPropagation() IE:e.cancleBubble = true 預設事件：現代瀏覽器:event.preventDefault() 和 return false IE:e.returnValue = false 30. “use strict”是什麼意思？使用它的好處和壞處？ 嚴格模式：是ES5新增的js執行模式，使js在更嚴格、更規範化的模式下執行 好處：(1)消除JS這門語言本身存在的不合理、不嚴謹之處，使程式碼更規範，減少一些怪異行為 (2)在該模式下一些糟糕的特效會被禁用，如with，函式必須宣告在頂層，arguments、callee不允許使用， (3)消除一些程式碼不安全之處，eval()執行與正常模式下不同等 (4)提高編譯器效率，增加執行速度，為未來新版本的js作鋪墊 所以："嚴格模式"體現了Javascript更合理、更安全、更嚴謹的發展方向. 為了達到更為普遍的相容性, 我們應該總是在嚴格模式下編寫程式碼. 壞處：(1)相容性問題，IE6789均不支援 (2)團隊合作問題，有些模組是正常模式，有些是嚴格模式，會出現問題，解決：統一規範模式，或將不同模組寫入不同的立即執行函式，每個函式加上嚴格和非嚴格 31. this物件的理解，this是怎麼工作的 this是JS的一個關鍵字，它的值是可變化的，它的取值是在函式呼叫的時候，產生的上下文環境裡取得，不是在宣告時候取得，根據函式的呼叫不同會產生不同的上下文環境，this的值也就隨之改變，歸根結底，誰呼叫它就指向誰 this的工作：object物件呼叫函式，就指向object物件，window呼叫函式就指向window，call和apply呼叫就指向括號裡的物件，bind將this固化到括號裡的物件 32. 什麼是閉包？為什麼使用它？ 閉包是一個訪問自由變數的函式。它的形成有兩個條件。1.函式內部必須訪問外部變數。2.該內部函式被外部引用。 閉包可以將區域性變數持續儲存。缺點，過多的使用會導致記憶體佔用過高。 33. 原生JS中怎麼建立，插入，刪除？（就是操作dom） 建立：var p1 = document.createElement('p'); 賦值：p1.innerHTML = 'nice to see you' 插入：document.getElementById('div1').appendChild(p1) 刪除：div1.removeChild(p1) 34. jQuery中怎麼建立，插入，刪除？（就是操作dom） 建立：$('<p id="p1">hello world1</p>') 內部：插入:append,appendTo後插入，prepend和prependTo前插入 外部：after、before、insertAfter、insertBefore 刪除：empty和remove 35. JS查詢DOM節點的方法？對應的Jq寫法？ document.getElementsByTagName('li') //JQ $(‘li’) document.getElementById('div1') //JQ $(‘#div1’) document.getElementsByClassName('aa') //JQ $(‘.aa’) document.getElementsByName('zhansan'); //JQ $('input[name="zhansan"]') document.querySelector('.abc a p>span') //直接用css複合選擇器 //JQ $(‘.abc a p>span’) document.querySelectorAll('.abc') //返回.abc的子元素陣列 //JQ $(‘.abc’) 36. 原生JS的window.onload 與 jquery的$(document).ready(function)有什麼不同？ (1)執行時機 window.onload：會在頁面所有元素載入完成後才會執行，如圖片，視訊等元素 jquery的ready: 會在DOM結構繪製完畢後生成DOMContentLoaded 事件時就執行 (2)可執行個數不同： window.onload只能有一個，多個的話會執行最後一個，document.ready可以執行多次 (3)window.onload不能簡寫，document.ready可以寫成 $(function(){}) (4)在JQuery中，推薦使用$(document).ready() ,如果需要在window.onload後執行，可以呼叫 $(window).load()方法 37. ajax的意義，常用的發起ajax的方法？ AJAX最根本原理就是在不重新整理頁面的情況下訪問伺服器處理資料，並根據資料的處理結果按你想要的方式對頁面作出即時更改 意義：區域性重新整理提供良好的使用者體驗，減輕伺服器的寬度和壓力 常用發起ajax的方法：(1)原生xhr。(2)JQuery的$.ajax。(3)ES6的 fetch。 38. 你提到了jquery，來你介紹一下 jquery jQuery是一個快速、簡潔的JavaScript框架，是繼Prototype之後又一個優秀的JavaScript程式碼庫。jQuery設計的宗旨是“write Less，Do More”，即倡導寫更少的程式碼，做更多的事情。它封裝JavaScript常用的功能程式碼，提供一種簡便的JavaScript設計模式，優化HTML文件操作、事件處理、動畫設計和Ajax互動。 jQuery的核心特性可以總結為：具有獨特的鏈式語法和短小清晰的多功能介面；具有高效靈活的css選擇器，並且可對CSS選擇器進行擴充套件；擁有便捷的外掛擴充套件機制和豐富的外掛。jQuery相容各種主流瀏覽器，如IE 6.0+、FF 1.5+、Safari 2.0+、Opera 9.0+等。 39. 列舉jquery中的提高效能的方案？ (1)對某個元素多次進行選擇，會大大消耗瀏覽器資源，因此可以定義一個變數儲存一次選擇，多次呼叫 (2)若要查詢頁面中指定類名的標籤，會極大消耗瀏覽器資源，可以給其父元素加個id，通過後代選擇器來查詢類名 (3)jquery提供大量的篩選方法，如eq().children()等，最好使用 find（）方法** 效能最高 (4)jquery 每次使用會有一些快取，所以推薦使用**鏈式寫法** 40. css3的animate和jq的animate的區別 (1)css3的3D動畫，JS模擬不了 (2)css3的2D轉換，如translate\scale\rotate（）\animation等，效率均高於js模擬 (3)其餘常規屬性，如width、height、opacity、color等,css3均低於js模擬，這裡推薦js模擬 (4)css3的動畫是利用C語言編寫，是系統提供的方法，一般情況下效率高於Jq 41. 任意寫20個Jquery的方法 each,get,data,map,trim,css,animate,addClass,removeClass,props,attr,appendTo,append,after,before,insertBefore,instanceofrtAfter,find(),eq(),ajax,load,remove,empty,show,hide,slideUp,slideDown,fadeIn,fadeOut,fadeTo 42. JQuery繫結事件的方式，請說明他們的優缺點 (1)on ,推薦，因為其他三個都是呼叫on實現的 (2)bind，只能給當前元素繫結事件 (3)live，1.9已移除，解決bind的缺陷，可以給未來元素繫結事件，效率低，繫結在document上 (4)delegate 支援事件委託，支援給未來元素繫結事件，最接近on 43. attr和prop的區別 (1)對於HTML元素本身就帶有的固有屬性，在處理時，使用prop方法。 (2)對於HTML元素我們自己自定義的DOM屬性，在處理時，使用attr方法。 (3)像checkbox，radio和select這樣的元素，選中屬性對應“checked”和“selected”，這些也屬於固有屬性，因此需要使用prop方法去操作才能獲得正確的結果。 44. $(this)和this關鍵字在jQuery中有何不同 $(this) 返回一個 jQuery 物件，你可以對它呼叫多個 jQuery 方法，比如用 text() 獲取文字，用val() 獲取值等等。 this 代表當前元素，它是 JavaScript 關鍵詞中的一個，表示上下文中的當前 DOM 元素。你不能對它呼叫 jQuery 方法，直到它被 $() 函式包裹，例如 $(this) 45. 請簡單描述一下JQuery中的選擇器 1.JQuery封裝了大量的選擇器，具備元素，標籤，類名等基本選擇器功能，還對類名選擇器進行擴充，支援css的語法選擇器 2.對css語法選擇器進行擴充，如eq,[type=’text’],has(),first.等 46. 移動端擊穿問題（網上都叫“點透”問題） 例：當在C區域進行點選罩層A的時候，會發現跳到百度頁面了，也就是，本來點選A，但是卻透過A，點選到了B裡的連結！這就是傳說中的 click點透 。 出現的場景： (1)A/B兩個層上下z軸重疊。 (2)上層的A點選後消失或移開。 (3)B元素本身有預設click事件（如a標籤） 或 B綁定了click事件 出現的原因：touch事件的300ms延遲 解決： (1)移動端統一使用touch相關事件， (2)B元素有click事件，A應及時取消預設點選，如 if(event=='touchend') e.preventDefault() 二、JS程式碼實現 47. 如果我要實現（一個按鈕，點選之後，出現一個div提示）你會怎麼做？ 48. 如何獲取一個物件的所有屬性值。 49. 已知ID的input輸入框，希望獲取這個輸入框的輸入值？怎麼做？不使用第三方框架 50. 希望獲取頁面中所有的checkbox怎麼做，不適用第三方框架 51. foo = foo || bar ，這行程式碼是什麼意思？為什麼這樣寫 52. 有哪些js方式對一個DOM設定它的css樣式？ 53. 刪除陣列最後一個數 54. 怎麼向陣列指定位置插入資料或者刪除一條資料？ 55. 用原生JS輸出1-999之間的素數（即質數，只能被1或者本身整除的整數) 56. 寫一個氣泡排序方法 57. 頁面上有一個表格，程式碼段為<table id=’userList’>,請設定其表格文字字型為18畫素，紅色，文字間距0.2em,行高150% 58. 對字串abcdef進行翻轉，原生 59. 實現點選li，alert出它的index (原生和jquery) <ul id="test"> <li>1</li> <li>2</li> <li>3</li> <li>4</li> </ul> 60. 隨機選取10-100之間的10個數字，存入一個數組，並排序 61. 一個div裡有個關閉按鈕，點選按鈕和div外面所有位置，都可以關閉div 62. 實現alert()函式中出現換行？ 63. 判斷字串格式是否符合要求，第一個是字母，往後可以是數字、字母、下劃線，字元總長度為5-20 64. 輸出頁面的節點個數，DOM節點原生 65. 手寫JQuery中的ajax獲取json簡單示例 66. 寫一個函式，檢測一個變數是否是String型別 67. 寫下面打印出來的值 "hello world".split("").reverse().join(); 68. var name = jack; function say(){ console.log(name); var name = 'rose'; } say(); console.log(name); 輸出什麼？為什麼？ 69. var foo = 'hello'; (function(){ var bar = 'World'; alert(foo + bar) })() alert(foo+bar) 分別彈出什麼 70. 打印出來的值 console.info("1"); setTimeout(function(){ console.info("2"); },0); console.info("3"); 71. 以下continue和break執行結果num分別是多少？ var num=1； for(var i=0; i<10;i++)( if(i%3==0){ continue/break; } num++; } 78. var i=0； i++； j=i++; y=++j; i,y的值分別是多少？ 79. var foo="11"+1-"1"; console.log(foo); console.log(typeof foo); 80. var k = 0; for(var m = 0,n = 0;m < 10 ,n < 7;m++,n++){ k = m+n } console.log(k); 81. <input type="text" id="search_input"> <input type="button" value="搜尋" id="search_btn"> <div id="people_list"> <div class="unit">張三——技術部</div> <div class="unit">李四——人事部</div> <div class="unit">王二——財務部</div> <div class="unit">小鄭——後勤部</div> </div> 以上程式碼是一組人員列表，以及一個搜尋框和一個搜尋按鈕 要求：用JQuery實現輸入關鍵字在文字框中，點搜尋按鈕能搜尋到含有關鍵字的人員，不相關人員不顯示 $('#search_btn').on('click',function(){ var arr = []; var reg = new RegExp($('#search_input').val()) $('.unit').each(function(){ $(this).css('display','none') if(reg.test($(this).html())){ $(this).css('display','block') } }) }) 82. 求值，為什麼？ var a= new Object(); a.value = 1; b = a; b.value = 2; alert(a.value) 83. 下面這個輸出什麼？ function test(){ var c = '600'; setTimeout(function(){ this.c = '700'; },1000) } c = '800'; var a = {c:'900'}; test.apply(a); console.log(a.c + c); setTimeout(function(){ console.log(a.c + c); },1100) 84. 實現節點的拖拽，原生 85. 實現省級二級聯動。 86. 實現圖片放大鏡效果。 87. 實現輪播效果。