文章目錄

• 1.面試題: 請描述一下 location.go(-1) 和 history.go(-1) 有什么區別
• 2.面試題：什么是 cookie? 如何回答！
• 3.面試題： 描述一下 cookie / sessionStorage / localStraoge 區別？
• 4.面試題： 面向對象 call apply bind 輔助函數 三個的區別？
• 5.面試題： 請簡要描述原生 JavaScript 中有幾種實現繼承的方式？分別有什么優缺點？ 重點 難點
• 6. 面試題： 字符串內存分析： 請簡單描述，下面的代碼在內存中 創建了幾個對象 | 分配了幾個空間？
• 7.面試題：關于事件面試題：簡單描述一下 JavaScript 中事件綁定時如何處理兼容性問題？
• 8.面試題：簡述 GET 請求和 POST 請求區別？
• 9.面試題：請完成數組的深淺拷貝
• 10.面試題. (筆試) ? 數組中的重復數據剔重
• 11.面試題. (筆試) ?觀察下面的字符串，統計每個字符出現的次數
• 11.面試題.選擇題 set 和 map 正確語法
• 12.面試題. 簡單說明箭頭函數和普通函數的區別？
• 13.Javascript基本數據類型
• 14.var關鍵字 和 let關鍵字有什么區別？
• 15.什么是變量預解析
• 16.說幾個數組中的操作函數
• 17.正則表達式中 （）和 【】 和 {} 分別有什么意義
• 18.什么是構造函數
• 19.原生JS中幾種繼承方式
• 20.GET請求和POST請求區別；超鏈接標簽實現網頁跳轉發送了什么請求。
• 21.JavaScript類型轉換方式？兩種轉換方式的區別？
• 22.隱式類型轉換的場景，至少說三個
• 23.字符串操作的常見函數
• 24.Math中的操作函數
• 25.apply() 函數和call函數的區別
• 26.什么是函數遞歸
• 27.Array.of()函數、Array.from()函數都是做什么的？
• 28.原生JS Ajax操作步驟
• 29.null和undefined區別？
• 30.函數形式參數和實際參數有什么區別？
• 31.函數里面arguments參數 和 ···args參數區別？
• 32.什么是函數閉包？閉包用在哪里？
• 33.正則表達式里面+、*、？符號的意義？
• 34.原生JS中原型和原型鏈是做什么的？
• 35.ES6中兩個類型之間如何實現繼承？
• 36.數組和Set集合的區別
• 37.BOM模型的作品、DOM模型的作用
• 38.描述一些常見的網頁事件
• 39.事件執行的三個階段，什么是事件冒泡
• 40.什么是默認行為？怎么阻止默認行為
• 41.DOM操作樣式，有什么需要考慮的問題？
• 42.全局污染？如何規避全局污染？
• 43.怎么查看一個數據的類型？NaN是什么數據類型？
• 44.BOM模型常見內置對象 （重復）
• 45.DOM模型獲取標簽對象的函數？
• 46.給標簽綁定事件的方式有幾種？
• 47.什么是事件冒泡？怎么阻止冒泡？
• 48.原生Ajax操作步驟？
• 49.Javascript和JQuery的區別？
• 50.什么是JavaScript？工作在瀏覽器一側能做什么？
• 51.怎么查看一個數據的類型？
• 52.自增運算符，符號放在變量前面和后面有什么區別？
• 53.for.in循環和for.of循環有什么區別？
• 54.函數的默認值參數怎么設置？有什么作用？
• 55.什么是自執行函數？有什么用途？
• 56.Ajax的實現步驟？
• 57.JQuery中如何發送get請求?發送post請求?
• 58.函數形式參數和實際參數區別?
• 59.arguments參數 args剩余參數
• 60.什么是構造函數?
• 61.什么是原型?什么是原型鏈?JS中原型和原型鏈做什么的?
• 62.怎么判斷兩個數據是否相等?怎么判斷類型和數據是否相等?
• 63.NaN == NaN結果是什么? 為什么?
• 65.數組中常見操作函數 怎么截取一部分數組
• 66.字符串數據轉換成布爾類型有什么結果?數值類型轉換成布爾有什么結果?
• 67.怎么查看一個變量的數據類型?
• 68.parseint("10abc")轉換結果是什么?parseint("abc10")轉換結果是什么?parseint(111,2)轉換結果是什么?
• 69.DOM操作中怎么獲取一個節點的父節點?
• 70.Math中常見操作函數
• 71NaN是什么意思?
• 72.原生JS繼承的方式有幾種?ES6繼承方式如何實現?
• 73.if([0][1]){---}這里if中的條件是true還是false?為什么?
• 74.如何獲取鼠標在窗口的位置?
• 75.原生JS獲取文本輸入框的內容?
• 76.JS代碼中如何跳轉頁面?如何刷新當前頁面?
• 77.什么是事件委托？
• 78.面試題：項目訪問過程 用戶輸入了 https://www.baidu.com ，具體發生了哪些操作？

1.面試題: 請描述一下 location.go(-1) 和 history.go(-1) 有什么區別

首先熟悉 location 地址信息：

• href 屬性：用于控制瀏覽器地址欄，一般用于代碼中完成網頁跳轉或者刷新頁面
• <script>// location對象// 實現頁面的點擊跳轉，類似超鏈接功能，比超鏈接功能強大（可以在跳轉頁面時 編寫邏輯代碼實現一些功能）var _baidu = document.getElementById("baidu")_baidu.onclick = function(){// 跳轉網頁location.href = "http://www.baidu.com/s?wd=明日戰記"}// 實現當前網頁刷新var _refresh = document.getElementById("refresh")_refresh.onclick = function() {location.href = "#" // 一般這里寫的都是當前網頁網址}</script>

  and history 歷史訪問記錄:

• back() / forward()
• go()
• <script>// history對象var _b = document.getElementById("b")var _f = document.getElementById("f")var _back = document.getElementById("back")_b.onclick = function() {// 訪問上一條記錄history.back()}_f.onclick = function() {// 訪問下一條記錄history.foeward()}_back.onclick = function() {// 訪問上一條記錄history.go(-1)}</script>

  面試題: 請描述一下 location.go(-1) 和 history.go(-1) 有什么區別？

  • 兩個函數都可以用于頁面回到上一頁， location.go() 需要插件支持*
  • location.go(-1)回到上一頁并且刷新頁面
  • history.go(-1) ，回到上一頁

  2.面試題：什么是 cookie? 如何回答！

  cookie 是網站應用開發中，服務器給瀏覽器客戶端記錄文本數據的一個對象；記錄數據的時候有如下特點：

  • 數據格式： key=value ，保存的數據只能是文本數據
  • 有過期時間： expires=xxxx ? ? ? ?
  • 不設置過期時間，稱為臨時 cookie ，會話結束數據刪除
  • 設置過期時間，稱為永久 cookie ，過期時間一到立即刪除
  • 可以包含路徑，給不同的路徑保存不同的 cookie
  • 一個網站，大部分瀏覽器限制最多保存50個 key=value 鍵值對
  • 一個網站，大部分瀏覽器限制最多保存 4K 數據
  • 缺點 存儲量太小，只有4KB
  • 缺點 每次HTTP請求都會發送到服務端，影響獲取資源的效率
  • 缺點 需要自己封裝獲取、設置、刪除cookie的方法
  • 缺點 當超過單個域名限制之后，再設置cookie，瀏覽器就會清除以前設置的cookie。IE和Opera 會清理近期最少使用的cookie，FF會隨機清理cookie

  回答：

  1. cookie是以小的文本文件形式（即純文本），完全存在于客戶端；cookie保存了登錄的憑證，有了它，只需要在下次請求時帶著cookie發送，就不必再重新輸入用戶名、密碼等重新登錄了。

  2. 是設計用來在 **服務端** 和 **客戶端 **進行 **信息傳遞** 的；

  3.面試題： 描述一下 cookie / sessionStorage / localStraoge 區別？

  cookie / sessionStorage / localStorage 都屬于瀏覽器緩存數據的操作對象

  cookie 是服務器存儲在瀏覽器客戶端的一段 key=value 格式的文本內容，包含過期時間、每個網站最多存儲 4k 數據或者 50 個鍵值對數據；操作時如果需要刪除數據可以選擇清除瀏覽器緩存或者設置過期時間

  sessionStorage 屬于 H5 提供的會話緩存數據，在用戶訪問網站網頁時建
  立會話就可以存儲數據，存儲的數據在本次會話中可以訪問，一旦會話結束存
  儲的數據就立即銷毀；一般用于存儲會話狀態數據，如用戶登錄狀態

  localStorage 屬于 H5 提供的本地緩存數據，可以在任意訪問情況下進行
  數據存儲，不受到會話限制，除非用戶主動刪除否則永久保存在用戶本地；一
  般用于存儲一些提高用戶體驗的、沒有保密性的數據，如用戶視頻播放進度等

  sessionStorage 和 localStorage 也受到瀏覽器的限制，最多存儲 5M 的數據

  4.面試題： 面向對象 call apply bind 輔助函數 三個的區別？

  回答思路：先說聯系/共同點，然后說區別，最后說項目中的應用場景

  call / apply / bind 都是輔助函數，可以用來修改正在執行的函數內部 this 指向

  call 修改 this 指向，通過 數據序列 傳遞給函數實際參數，如tom.eat.call(jerry, ‘數據a’, ‘數據b’)

  apply 修改 this 指向，通過 數組方式 傳遞個函數實際參數，如tom.eat.apply(jerry, [‘數據a’, ‘數據b’])

  bind 修改 this 指向，通過 數據序列方式 傳遞給函數實際參數，同時返回函數的聲明，讓開發人員可以延遲或者立即調用，擴展了使用范圍，如：tom.eat.bind(jerry, ‘數據a’, ‘數據b’)()

  項目開發中這三個函數的作用一致，根據實際傳遞數據的情況確定使用哪種方式，

  • 如項目中傳遞給函數的數據都是零散數據，就可以使用 call 進行函數的調用；
  • 如果傳遞給函數的數據包含在一個數組中，就可以使用 apply 完成函數的調用；
  • 如果將參數數據交給函數之后，需要做一些其他工作才能執行目標函數，可以使用 bind 交付參數，并且延遲執行函數

  5.面試題： 請簡要描述原生 JavaScript 中有幾種實現繼承的方式？分別有什么優缺點？ 重點 難點

  原生 JavaScript 中通過函數的方式模擬面向對象語法，主要的繼承的實現方式有4種，分別是 原型繼承、 冒充繼承、組合繼承、寄生組合繼承

  原型繼承，基于原型對象的繼承，子類和父類在原型鏈上就存在繼承關系；存在的問題是子類在創建對象時無法直接修改父類的屬性數據，必須在創建的對象上通過訪問屬性的方式進行修改，讓編碼變得復雜；開發中一般很少獨立使用

  <script>function Person() {}function Student() {}//原型繼承Student.prototype = new Person()</script> ``

  冒充繼承，基于 call() 輔助函數修改 this 指向的功能，在子類中通過調用父類構造函數的 call() 方法，完成子類可以使用父類構造函數內部屬性和方法的使用；存在的問題是首先在原型鏈上沒有真實繼承關系，所以子類無法繼承父類在原型對象上的數據和函數

  <script>function Person(name) {}function Student(name, age) {// 冒充繼承，可以直接修改父類屬性Person.call(this, name)this.age = age}</script>

  組合繼承，結合了原型繼承和冒充繼承，通過原型繼承讓子類可以使用父類原型對象上的屬性和函數，通過冒充繼承可以讓子類直接訪問父類屬性，優化操作語法；存在的問題是兩種繼承方式都訪問了父類的構造函數，繼承過程中造成父類構造函數的多次調用存在一定的性能問題；如果性能沒有太高要求的情況下，可以通過組合繼承的方式進行實現

  <script>function Person(name) {}function Student(name, age) {//冒充繼承Person.call(this, name)this.age = age}//原型繼承Student.prototype = new Person('')</script>

  寄生組合繼承，對組合繼承的一種升級，將父類原型對象進行了復制得到一個空對象，子類在冒充繼承的繼承上，實現原型繼承時繼承這個空對象，就不需要讓父類的構造函數再次調用，這個空對象的創建和調用性能消耗較低，對性能上有一定的優化提升；項目中如果出現了對繼承關系的頻繁使用，建議可以將寄生組合繼承進行封裝使用，優化項目性能

  <script>function Person(name) {}function Student(name, age) {// 冒充繼承Person.call(this, name)this.age = age}// 寄生函數function inherit(Parent, Child){//寄生構造函數|空函數var Temp = function() {}// 復制 原型對象Temp.prototype = Parent.prototype// 原型繼承(空構造函數，性能 優化)Child.prototype = new Temp()// 指定自己構造函數Child.prototype.constructor = Child}// 寄生繼承：讓Student繼承自Parent類型inherit(Person, Student)</script>

  ``

  6. 面試題： 字符串內存分析： 請簡單描述，下面的代碼在內存中 創建了幾個對象 | 分配了幾個空間？

  問題:

  var str = new String("hello")
  • new 創建的對象，都是需要在堆內存中創建的
  • 字符串作為一個項目中最常用的數據類型，編程語言為了提高字符串使用效率會將字符串存儲到常量區，創建字符串對象時檢查常量區中是否存在這個字符串（存在的話直接復制對象到堆內存；如果不存在的話創建對象并復制到堆內存）

  答： 最終在內存中創建了3個對象 | 分配了3個空間

  圖解：
  

  7.面試題：關于事件面試題：簡單描述一下 JavaScript 中事件綁定時如何處理兼容性問題？

  分析：這個問題歸結于歷史原因！

  軟件行業發展過程中，有一家公司 微軟 開發了自己特立獨行的瀏覽器：探險家/ IE ，內核中使用了大量和其他瀏覽器不同的程序，所以導致后續開發的很多應用都需要兼容 IE

  JavaScript 中綁定事件的標準語法，為了兼容 IE6~IE11 ，事件綁定語法：

• 非 IE 瀏覽器：綁定事件 addEventListener(事件名稱, 處理函數)
• IE 瀏覽器：綁定事件 attachEvent(事件名稱，處理函數)

• 引申 ? 事件可以綁定，那么事件可以取消嗎？

• 綁定到標簽上的事件，是可以取消的！

• 1.對象屬性綁定的事件，取消

  <script>// 綁定事件_btn.onclick = function() {}// 取消事件_btn.onclick = null</script>

  2.標準語法綁定事件，取消

  <script>function handler(){// 事件處理函數}// 綁定事件_btn.addEventListener("click", handler)// 取消指定事件_btn.removeEventListener("click", handler)</script>

  8.面試題：簡述 GET 請求和 POST 請求區別？

  總- GET 請求和 POST 請求都是 HTTP 規范中定義的請求方式，描述了客戶端向服務器發送請求完成后續操作的過程

  分- GET 請求在規范中主要用于向服務器請求獲取數據，也可以附帶字符串參數，參數會拼接在 url 地址的后面，參數的長度收到服務器限制；請求效率非常高，瀏覽器地址欄、超鏈接、 Ajax 都可以發送 GET 請求

  分- POST 請求在規范中主要用于向服務器新增數據，但是項目開發中我們一般對于給服務器提交比較敏感的數據時，會使用 POST 請求將參數包裝在請求中進行傳遞，既可以傳送字符串數據，也可以傳送二進制數據，如實現文件上傳等操作；傳遞參數的大小受到服務器的限制；請求效率相對 GET 沒有那么優秀，但是數據安全性得到了一定的保障；一般網頁中我們通過表單、 Ajax 發 送 POST 請求

  總- 網頁中實現頁面跳轉、請求一些不敏感的數據如搜索，這些都可以通過效率較高的 GET 完成數據的請求操作；網頁中一些包含敏感數據的操作如登錄、注冊、轉賬等建議使用 POST 請求完成數據操作

  詳解 上一篇文章 ? get/post 詳解

  9.面試題：請完成數組的深淺拷貝

  什么是拷貝？

  拷貝：就是復制的意思，將數據再復制一份

  什么是深淺拷貝？

  深拷貝：將對象以及對象中包含的所有屬性，全部獨立的復制一份；兩個對象之
  間完全沒有任何關系，都是獨立的數據

  淺拷貝：將對象以及對象的屬性賦值一份，但是對象的屬性中如果包含內存地址
  ~只賦值地址數據，不復制內存地址中具體的數據

  備注：關于數據的復用，引用賦值、淺拷貝、深拷貝

  圖解:
  

  3.如何實現

  代碼操作如下:

  <script>// 聲明一個原數組let arr = ['tom', 'jerry']// 淺拷貝：屬性獨立的兩個數組，兩個數組的屬性中保存的地址相同// 直接修改屬性數據，互相沒有影響// 修改屬性/地址數據，互相產生影響let arr2 = [...arr]// 深拷貝：完全獨立的兩個數組// 直接修改屬性數據，互相沒有影響// 修改屬性/地址數據，互相沒有影響let arr3 = JSON.parse(JSON.stringify(arr))</script>

  .
  .

  10.面試題. (筆試) ? 數組中的重復數據剔重

  數組中的重復數據剔重

  var arr = [1,2,2,2,3,4,5,5,5,6,7,8,8]

  請將數組中的重復數據刪除，所有的數據都保留唯一的一份？

  代碼如下 （筆試）：

  <script>// 數組var arr = [1, 2, 2, 2, 3, 4, 5, 5, 5, 6, 7, 8, 8];// 1、原始編碼var newArr = [];for (var i = 0; i < arr.length; i++) {// 每次循環的數據var item = arr[i];if (!newArr.includes(item)) {// 如果沒有包含，將數據添加進來newArr.push(item);}}console.log(newArr, "新數組");// 2、Set集合，完成數組剔重// 將數組轉換成集合類型：集合中不能存放重復數據var s = new Set(arr);// 將集合轉換回數組：數組的剔重，最終得到數組類型的數據var arr2 = Array.from(s);console.log(arr2);</script>

  11.面試題. (筆試) ?觀察下面的字符串，統計每個字符出現的次數

  考察ES6進階 ? Map

  Map是ES6中提供的一種映射、字典類型，可以包含多個key:value鍵值對數據，其中key可以是任意類型的、不能重復的數據；是對原生JSON對象的擴展

  觀察下面的字符串，統計每個字符出現的次數

  <script>var str = "sadasdsawffdsafsdfgp[d[]sds./dfskdfjsdasdajsfhuhkic/;x/c;ljfioqadpfsaodckljspdsadpiogvkjdsifepofasklxifep9opieio90"</script>

  分析:

  • 既然統計每個字符出現的次數，統計時的字符不能重復，可以作為 key 值
  • 統計字符出現的次數，是一個整數數據，出現多次時數據累加，可以作 為 value 值

  代碼實現： 需手寫

  <script>// 原始數據var str ="sadasdsawffdsafsdfgp[d[]sds./dfskdfjsdasdajsfhuhkic/;x/c;ljfioqadpfsaodckljspdsadpiogvkjdsifepofasklxifep9opieio90";// 統計數據// 記錄每個字符出現次數的統計數據const map = new Map();for (var i = 0; i < str.length; i++) {// 獲取當前字符const _c = str.charAt(i);// 判斷map中是否包含這個keyif (map.has(_c)) {// 如果包含let cnt = map.get(_c);map.set(_c, ++cnt);} else {// 如果沒有包含，包含進來 {_c: 1}map.set(_c, 1);}}console.log(map, "字符統計");</script>

  11.面試題.選擇題 set 和 map 正確語法

  觀察下面創建 Set 的代碼，正確的是？( AB )
  A: new Set()

  B: new Set([])

  C: new set()

  D: newset([])

  觀察下面創建 Map 的代碼，正確的是？( A )
  A: new Map()
  B: new Map({})
  C: new map()
  D: newmap({})

  12.面試題. 簡單說明箭頭函數和普通函數的區別？

  回答思路：

  總：箭頭函數和普通函數，都是封裝了多行代碼實現了一定功能的代碼
  塊，都可以提高代碼的復用性

  分：和普通函數相比較，箭頭函數內部的 this 指向 window 或者指向外
  部函數的 this ，所以函數內部如果要使用 this 的情況下不建議使用箭頭函
  數替代普通函數，如對象內部的方法、事件處理函數等；另外箭頭函數不能和普通函數一樣作為構造函數使用

  總：箭頭函數本質上就是 ES6 提供的在語法上和語義上對功能簡單的普通
  函數的優化方案，針對功能性函數進行編碼效率和代碼可讀性提升，如數組的函數 filter(fn)/map(fn)/… 回調函數都可以使用箭頭函數進行優化

  <script>const a = [1, 2, 3, 4, 5];const a2 = a.map(function (item) {return item * item;});// a2: [1,4,9,16,25]const a3 = a.map((item) => item * item);// a3: [1,4,9,16,25]</script>

  注意：關于箭頭函數內的 this ，某些資料會提到箭頭函數沒有 this 指
  向（如果真的沒有 this 指向，內部無法訪問 this 引用）；但是如果箭頭函
  數包含在其他有 this 指向的函數內部，箭頭函數內的 this 就是外部函數的
  this

  小小練習題：

  <script>function fn() {console.log(this); //window}const fn = function () {console.log(this); //當前函數};const tom = {name: "tom",fn() {console.log(); //當前對象tom},};_btn.onclick = function () {console.log(this); //當前對象_btn};_btn.onclick = () => {console.log(this); //window};_btn.onclick = function () {//this:_btnconst fx = () => {// 箭頭函數內部有this引用，和函數所在上下文環境this相同console.log(this); //_btn};fx();};</script>

  13.Javascript基本數據類型

  1.String 字符串類型
  2.Number 數值類型
  3.Boolean 布爾類型
  4.Null 空值類型
  5.Undefined 未定義類型
  6.Object 對象類型

  14.var關鍵字 和 let關鍵字有什么區別？

  -var關鍵字存在變量的預解析,可以重復聲明變量,存在全局作用域和局部作用域
  -let關鍵字不存在變量的預解析,不可以重復聲明變量,只存在塊級作用域

  15.什么是變量預解析

  在原生JavaScript中,用var聲明的變量,再解釋執行時,解釋器會將變量的聲明提升到代碼的最前面,.賦值在原來的位置,保障了代碼在運行的過程中程序不會出現錯誤導致程序崩潰退出的問題,解釋器執行變量提升的過程就是變量的預解析

  16.說幾個數組中的操作函數

  創建的操作函數
  push() 末尾追加一個
  pop() 末尾刪除一個
  ushift() 開頭添加一個
  shift()開頭刪除一個
  forEach() 遍歷數組
  filter() 遍歷條件過濾
  map() 遍歷數據轉換
  every() 遍歷全部判斷
  some() 遍歷部分判斷
  reduce() 遍歷迭代輸出

  17.正則表達式中 （）和 【】 和 {} 分別有什么意義

  小括號：分組，包含的字符數據會被當成一個整體進行匹配
  如：(abc)表示匹配整個abc一串整體數據
  中括號：或者關系，包含的字符數據呈現或者條件；也可以包含范圍內容
  如：[abc]表示匹配一個a或者b或者c；[a-z]表示小寫字母
  大括號：量詞，表示匹配前面的字符出現的次數
  如：x{m,n}表示前面的x出現至少m次最多n次的匹配情況

  18.什么是構造函數

  構造函數指通過new函數名來實例化對象的函數叫構造函數，首字母一般大寫

  19.原生JS中幾種繼承方式

  原生JS中有四種繼承方式,分別為:原型繼承,冒充繼承,組合繼承,寄生組合繼承

  20.GET請求和POST請求區別；超鏈接標簽實現網頁跳轉發送了什么請求。

  -Get請求中的參數可見,通過拼接的方式拼接在url地址中.安全性較弱
  -Post請求參數不可見,參數通過請求體傳輸,安全性較高

  21.JavaScript類型轉換方式？兩種轉換方式的區別？

  JavaScript中類型轉換分為顯式類型轉換和隱式類型轉換
  -顯式類型轉換:指的是在編程過程中,開發人員通過指定的語法如parseInt(),parseFloat(),boolean()等將目標數據轉換為指定類型的方式稱為顯示類型轉換
  -隱式類型轉換:指的是在程序運行過程中,解釋器自動匹配數據對應的數據類型,如乘除減法運算,toFixed()函數調用

  22.隱式類型轉換的場景，至少說三個

  *-某些算數運算符,如-, , /
  -If()選擇結構
  -toFiex()函數

  23.字符串操作的常見函數

  indexOf()
  lastIndexOf()
  includes()
  trim()
  trimLeft()
  trimStart()
  trimRight()
  trimEnd()
  toLowerCase()
  toUpperCase()
  split()
  slice()
  substr()
  substring()

  24.Math中的操作函數

  Min()
  max()
  ceil()
  floor()
  random()
  pow()
  log()
  sin()
  round()
  trunc()

  25.apply() 函數和call函數的區別

  -apply():修改this指向,通過數據序列傳遞給函數實際參數
  -call():修改this指向,通過數組方式傳遞個函數實際參數

  26.什么是函數遞歸

  函數遞歸指的是在函數內部調用自身的過程

  遞歸 recursion ，函數的遞歸，描述了函數自己調用自己的一種執行方式

  27.Array.of()函數、Array.from()函數都是做什么的？

  -Array.of()創建數組對象
  -Array.from()將類數組轉換為數組

  28.原生JS Ajax操作步驟

  -創建對象
  -連接服務器
  -發送請求
  -處理響應數據

  29.null和undefined區別？

  -Null一般用于表示空值,轉換為數值類型為0
  -Undefined一般用于表示無效數據,轉換為數值類型為NaN

  30.函數形式參數和實際參數有什么區別？

  -形式參數:不表示具體數據,聲明位置在函數聲明的括號內,描述了內部代碼執行需要的數據
  -實際參數:傳遞給函數的具體數據,位置在函數調用執行時的函數括號內

  31.函數里面arguments參數 和 ···args參數區別？

  -剩余參數只包含那些沒有對應形參的實參，而 arguments 對象包含了傳給函數的所有實參
  -arguments對象不是一個真正的數組，而剩余參數是真正的 Array實例，也就是說你能夠在它上面直接使用所有的數組方法，比如 sort，map，forEach或pop

  32.什么是函數閉包？閉包用在哪里？

  1.函數閉包:描述了在函數內部聲明函數的語法

  2.使用場景

• return 回一個函數
  1.2 函數作為參數
  1.3 IIFE（自執行函數）
  1.4 循環賦值
  1.5 使用回調函數就是在使用閉包

3.使用閉包需要注意什么

容易導致內存泄漏。閉包會攜帶包含其它的函數作用域，因此會比其他函數占用更多的內存。過度使用閉包會導致內存占用過多，所以要謹慎使用閉包。

33.正則表達式里面+、*、？符號的意義？

-X+:表示字符x出現了1次或者多次
-X:表示字符x出現了0次或者多次
-X?:表示字符x出現了0次或者1次*

34.原生JS中原型和原型鏈是做什么的？

-原型prototype:描述的是構造函數和原型對象之間的關聯關系,描述了創建對象的構造函數的真實對象類型
-原型鏈__proto__:描述的是創建的對象和對應的原型對象之間的關聯關系,描述了當前對象屬于哪個真實類型對象

35.ES6中兩個類型之間如何實現繼承？

ES6中兩個類型可以通過extends關鍵字實現繼承關系

36.數組和Set集合的區別

-數組中可以存儲重復的數據,數組中的數據有順序
-Set集合不可以存儲重復數據,存儲的數據是無順序的

37.BOM模型的作品、DOM模型的作用

-BOM:瀏覽器對象模型,提供操作瀏覽器的相關方法
?Window窗口對象
?Location地址對象
?History歷史對象
?Navigator版本信息對象
?Screen屏幕獨享
?Document文檔對象
-DOM:文檔對象模型, 提供操作文檔的相關方法

38.描述一些常見的網頁事件

-Onclick:單擊事件(鼠標左鍵)
-Onload:加載事件
-Onchange:內容改變事件
-Onscroll:滾動事件
-Onmouseenter / onmouseover:鼠標進入事件
-Onmouseleave / onmouseout:鼠標離開事件

39.事件執行的三個階段，什么是事件冒泡

-捕獲階段
-目標階段
-冒泡階段
-事件冒泡指的是目標階段事件執行后,對應的標簽向上級傳遞的過程

40.什么是默認行為？怎么阻止默認行為

默認行為是網頁標簽自帶的功能行為,如超鏈接跳轉行為,阻止默認行為可以通過兼容語法阻止:e.preventDefault ? e.preventDefault : e.returnValue=false

41.DOM操作樣式，有什么需要考慮的問題？

-DOM讀取寬度等數值時,在操作樣式時后面需要加單位
-DOM操作未來標簽的樣式時,要將事件委托到當前標簽的父標簽上

42.全局污染？如何規避全局污染？

程序運行過程中出現數據的相互影響,稱為全局污染,可以使用函數的閉包解決全局污染

43.怎么查看一個數據的類型？NaN是什么數據類型？

1、typeof 檢測一些基本的數據類型

語法：typeof 后面加不加括號都是可以用的
注意：正則、{}、[]、null輸出結果為object

console.log(typeof /\d/);//objectconsole.log(typeof {});//objectconsole.log(typeof []);//objectconsole.log(typeof (null));//objectconsole.log(typeof 123);//numberconsole.log(typeof true);//booleanconsole.log(typeof function () {});//functionconsole.log(typeof (undefined));//undefined

1.2

NaN是數字類型的，但是它又可以用isNaN()檢測，isNaN() 函數用于檢查其參數是否是非數字值

isNaN() 函數通常用于檢測 parseFloat() 和 parseInt() 的結果，以判斷它們表示的是否是合法的數字

44.BOM模型常見內置對象 （重復）

?Window窗口對象
?Location地址對象
?History歷史對象
?Navigator版本信息對象
?Screen屏幕獨享
?Document文檔對象

45.DOM模型獲取標簽對象的函數？

一、通過id屬性值獲取標簽對象

document.getElementById(‘id屬性值’)

//獲取標簽頁中id為div1的標簽對象 var oDiv1 = document.getElementById('div1'); //輸出為id為id為div1的標簽內容 console.log(oDiv1);

二、通過class屬性值獲取標簽對象

document.getElementsByClassName(‘class屬性值’)

elements后面有個s表示復數，可以選中所有的class，在js中class一律定義為classname，不能被forEach()循環

var oDiv2 = document.getElementsByClassName('div2'); //輸出所有class是div2的數據 console.log(oDiv2); //輸出第一個div2的數據 console.log(oDiv2[0]); //輸出第二個div2的數據 console.log(oDiv2[1]);

三、通過標簽名字獲取標簽對象

document.grtElementsByTagName('標簽名字)
獲取到的也是一個偽數組，不能被forEach()循環

var oDiv3 = document.getElementsByTagName('div'); //輸出所有標簽是div2的數據 console.log(oDiv3); //輸出第二個div的數據 console.log(oDiv3[1]);

四、通過neme標簽獲取標簽對象

document.getElementByname
獲取到的也是一個偽數組，不能被forEach()循環

var oDiv4 = document.getElementByname('s'); 輸出所有name標簽是s的數據 console.log(oDiv4); 輸出name標簽是s的第二個數據 console.log(oDiv4[1]);

五、通過語法規范，獲取標簽對象
document.querySelector() //獲取符合條件的第一個標簽
document.querySelectorAll() //獲取符合條件的所有標簽
獲取到的也是一個數組，可以被forEach()循環，但是低版本ie不兼容以上兩種方式

//獲取id為div1的標簽內容 var oQuery1 = document.querySelector('#div1'); //輸出為id為div1的標簽內容console.log(oQuery1); //獲取class為div2的標簽內容 var oQuery2 = document.querySelector('.div2'); //輸出為class為div1的標簽內容 console.log(oQuery2);//通過標簽的標簽名稱來獲取,只獲取第一個div標簽 var oQuery3 = document.querySelector('div'); //輸出為標簽為div的標簽內容 console.log(oQuery3);//獲取所有標簽為div的標簽 var oQuery4 = document.querySelectorAll('div'); //輸出所有標簽為div的數組， console.log(oQuery4);//獲取所有name屬性值為s的標簽 var oQuery5 = document.querySelectorAll('[name="s"]'); //輸出name屬性值的數組 console.log(oQuery5);// 獲取type屬性值是text的標簽 var oQuery6 = document.querySelectorAll('[type="text"]'); //輸出type屬性為text的數組 console.log(oQuery6);//還可以通過標簽結構獲取ul下的li標簽， var oQuery7 = document.querySelectorAll('ul>li'); console.log(oQuery7);

46.給標簽綁定事件的方式有幾種？

三種

1.使用HTML標簽的事件屬性綁定處理程序

2.使用事件源的事件屬性綁定處理程序

3.使用addEventListener()綁定處理程序

47.什么是事件冒泡？怎么阻止冒泡？

1.事件冒泡就是指父元素和子元素有相同的事件，當觸發子元素事件時，會向上冒泡，同時也會觸發父元素事件

解答什么是事件冒泡

1.2
阻止事件冒泡的幾種方法
第一種：event.stopPropagation();
第二種：return false;
第三種：event.preventDefault();

48.原生Ajax操作步驟？

第一步 創建對象
第二步 初始化
第三步 設置請求頭
第四步 發送請求
第五步 監聽狀態碼

第一步創建對象var ajax = null;try{ // 寫一些調試代碼，或者可能出現錯誤的代碼，一旦發生錯誤，就會從這里面出去，進入到catch里面并把錯誤信息，當成參數傳入到catch中ajax=new XMLHttpRequest()}catch{ajax = new ActiveXobject('Microsoft.XMLHttp')}第二步初始化ajax.open('post/get','1.txt');第三步設置請求頭ajax.setRequestHeader('Content-type','application/x-www-form-urlencoded')第四步發送請求ajax.send('name=張三');第五步監聽狀態碼ajax.onreadystatechange=funciton(e){if(ajax.readystate==4 && ajax.status == 200){console.log(ajax.response)}}

49.Javascript和JQuery的區別？

區別：
1、JavaScript是一種腳本語言，而jQuery是一個js庫。
2、JS中查找元素的過程中方法太少且復雜；jQ中查找元素的方法有多種多樣，非常靈活。
3、JS主要通過設置style來改變樣式；jQ使用css()來改變樣式。
4.JavaScript在遍歷數組時重復使用大量for循環，而jQuery中擁有隱式迭代特性因此不再需要手寫for循環了。
5.JavaScript有各種瀏覽器兼容問題，代碼復雜冗余，而jQuery中完全沒有兼容性問題
6.JavaScript實現簡單的動畫效果很復雜，代碼量大，而jQuery中實現動畫非常簡單，而且功能更加的強大
7.入口函數的區別在JavaScript的入口函數要等到頁面中所有資源（包括圖片、文件）加載完成才開始執行。而在.jQuery的入口函數只會等待文檔樹加載完成就開始執行，并不會等待圖片、文件的加載。

50.什么是JavaScript？工作在瀏覽器一側能做什么？

1. 是一種具有函數優先的輕量級，解釋型或即時編譯型的編程語言。雖然它是作為開發Web頁面的腳本語言而出名，但是它也被用到了很多非瀏覽器環境中，JavaScript 基于原型編程、多范式的動態腳本語言，并且支持面向對象、命令式、聲明式、函數式編程范式

javascript是一種具有函數優先的輕量級，解釋型或即時編譯型的編程語言；JavaScript基于原型編程、多范式的動態腳本語言，并且支持面向對象、命令式和聲明式風格。

1.2
　1、處理表單，檢驗用戶輸入，并提供反饋。比如一個表單需要輸入電子郵箱而用戶卻輸入手機號碼，javascript就會提示輸入錯誤的提醒。
　　2、與頁面交互性，相應用戶的點擊，給用戶提供更好的體驗
　　3、根據用戶操作，動態創建頁面。比如用戶發郵箱，店家附件操作
　　4、cookie設置，cookies是用來存儲瀏覽器上的臨時信息，比如網站地址，用戶名等。
　　5、數據通訊，瀏覽器與服務器的數據通訊，比如ajax的異步傳輸；
　　6、豐富界面，使用JavaScript來放組件、滑塊之類的項目，給網站提供更豐富的界面。
　　7、javascript可以有規律的重復html文段簡化，減少下載的時間。

51.怎么查看一個數據的類型？

1、typeof 檢測一些基本的數據類型
語法：typeof 后面加不加括號都是可以用的
注意：正則、{}、[]、null輸出結果為object

console.log(typeof /\d/);//objectconsole.log(typeof {});//objectconsole.log(typeof []);//objectconsole.log(typeof (null));//objectconsole.log(typeof 123);//numberconsole.log(typeof true);//booleanconsole.log(typeof function () {});//functionconsole.log(typeof (undefined));//undefined

1.2.Object.portotype.toString （最好的）
語法：Object.prototype.toString.call([value])
獲取Object.portotype上的toString方法，讓方法的this變為需要檢測的數據類型值，并且讓這個方法執行

在Number、String、Boolean、Array、Function、RegExp…這些類的原型上都有一個toString方法：這個方法就是把本身的值轉化為字符串

例子：(123).toString()//'123'(true).toString()//'true'[12,23].toString()//'12.23'

Object.prototype.toString執行的時候返回當前方法中的this的所屬類信息，也就是，我想知道誰的所屬類信息，我們就把這個toString方法執行，并且讓this變為我們檢測的這個數據值，那么方法返回的結果就是當前檢測這個值得所屬類信息

52.自增運算符，符號放在變量前面和后面有什么區別？

在使用自增和自減運算符時，自增運算符放在變量之前或者是之后，并且變量需要參與運算，就有區別了。

當運算符放在變量之后，先取變量的值進行運算，然后再對變量進行加1或者是減1。

如果運算符放在變量之前，先對變量進行加1或者是減1，然后再做運算。

53.for.in循環和for.of循環有什么區別？

for in可以循環數組和對象，得到是數組的下標或對象的鍵名
for of只能循環數組，得到的是數組對應的值

54.函數的默認值參數怎么設置？有什么作用？

第一種方法：
使用arguments,函數所有的參數都會存入arguments數組離去，所以我們可以從中獲取相應的參數然后賦值

function example(a,b){ var a = arguments[0] ? arguments[0] : 1;//設置參數a的默認值為1 var b = arguments[1] ? arguments[1] : 2;//設置參數b的默認值為2 return a+b; }

第二種方法
使用運算符 ||,這個等同于if(a){a=xx}的寫法

function example(name,age){ name=name||'jason'; age=age||30; alert('你好！我是'+name+'，今年'+age+'歲。'); }

第三種方法
使用jquery擴展，適合參數較多的情況下

function example(setting){ var defaultSetting={ name:'jason', age:'30', sex:'男', phone:'100866', QQ:'100866', birthday:'1949.10.01'}; $.extend(defaultSetting,settings); var message='姓名：'+defaultSetting.name +'，性別：'+defaultSetting.sex +'，年齡：'+defaultSetting.age +'，電話：'+defaultSetting.phone +'，QQ：'+defaultSetting.QQ +'，生日：'+defaultSetting.birthday +'。'; alert(message); }

55.什么是自執行函數？有什么用途？

自執行函數: 1、聲明一個匿名函數 2、馬上調用這個匿名函數。
作用：創建一個獨立的作用域。

好處：防止變量彌散到全局，以免各種 js 庫沖突。隔離作用域避免污染，或者截斷作用域鏈，避免閉包造成引用變量無法釋放。利用立即執行特性，返回需要的業務函數或對象，避免每次通過條件判斷來處理

場景：一般用于框架、插件等場景

56.Ajax的實現步驟？

1、創建 XMLHTTPRequest 對象,也就是創建一個異步調用對象
2、創建一個新的 HTTP 請求,并指定該 HTTP 請求的方法、URL 及驗證信息
3、設置響應 HTTP 請求狀態變化的函數
4、發送 HTTP 請求
5、獲取異步調用返回的數據
6、使用 JavaScript 和 DOM 實現局部刷新

57.JQuery中如何發送get請求?發送post請求?

type 發送

58.函數形式參數和實際參數區別?

形參相當于函數中定義的變量，實參是在運行時的函數調用時傳入的參數。
形參就是函數聲明時的變量，實參是我們調用該函數時傳入的具體參數。

59.arguments參數 args剩余參數

arguments參數

60.什么是構造函數?

主要用來在創建對象時初始化對象， 即為對象成員變量賦初始值，總與new運算符一起使用在創建對象的語句中 。特別的一個類可以有多個構造函數 ，可根據其參數個數的不同或參數類型的不同來區分它們 即構造函數的重載。構造函數的功能主要用于在類的對象創建時定義初始化的狀態。

61.什么是原型?什么是原型鏈?JS中原型和原型鏈做什么的?

一.什么是原型和原型鏈？

1.原型：在js中，函數可以有屬性。每個函數都有一個特殊的屬性叫原型（prototype）

2.原型鏈：當調用某個函數的方法時，這個函數未定義這個方法，此時不會返回undefined，而是繼續往原型鏈后面的原型去查找，只有查找不到，才返回undefined。

原理： 每個對象都有隱式原型（proto）和顯式原型（prototype），對象的proto指向它原型對象上的prototype。原型鏈最終指向的是Object.prototype，他的__proto__為null

二.原型和原型鏈存在的意義是什么？

使得實例對象可以共享構造函數的原型屬性和方法，可以節省內存，構造函數原型上的屬性和方法越多，節省的內存就越大。

1、原型模式是用于創建重復的對象，同時又能保證性能，這種類型的設計模式屬于創建型模式，它提供了一種創建對象的最佳方式；
2、原型鏈是原型對象創建過程的歷史記錄，當訪問一個對象的某個屬性時，會先在這個對象本身屬性上查找。

62.怎么判斷兩個數據是否相等?怎么判斷類型和數據是否相等?

判斷對象相等
考察運算符

=====

63.NaN == NaN結果是什么? 為什么?

NaN == NaN 執行結果是 false。JavaScript的規定，NaN表示的是非數字， 但是這個非數字也是不同的，因此，NaN 不等于 NaN，并且兩個NaN永遠不可能相等。

65.數組中常見操作函數 怎么截取一部分數組

1、slice函數
Array.slice()，接收兩個參數，起始位置（包含起始元素），結束位置，返回一個新數組

const arr=[1,2,3,4,5,6,7,8,9,10]
const arr2=arr.slice(1,3)
console.log(arr2);
slice(1,3)，從下標1的元素開始截取（包含該元素），截取到下標為3的元素（不包含該元素）
輸出：[2, 3]

2、splice函數
該函數操作原數組，可以執行數組的刪除和插入，返回一個新數組
用作刪除的時候，接收兩個參數：起始下標，刪除的個數；函數返回刪除的元素數組
用作插入的時候，接收兩個以上參數：起始下標，刪除的個數，插入的元素；函數返回刪除的元素數組，插入的元素會在刪除的元素的位置開始插入
const arr=[1,2,3,4,5,6,7,8,9,10]
const arr2=arr.splice(1,2)
console.log(arr2);
輸出：[2,3]

66.字符串數據轉換成布爾類型有什么結果?數值類型轉換成布爾有什么結果?

number 1 => boolean true
number 0 => boolean false

67.怎么查看一個變量的數據類型?

一、typeof()
識別所有值類型；number,string,boolean
識別函數類型,typeof(函數a)會返回Function
識別引用類型，但是無法區分對象，數組以及 null，都會返回Object
NaN 會被識別為 number，盡管 NaN 是 Not-A-Number 的縮寫，意思是"不是一個數字"。

68.parseint(“10abc”)轉換結果是什么?parseint(“abc10”)轉換結果是什么?parseint(111,2)轉換結果是什么?

parseInt(“10abc”) = 10
parseInt(“abc10”) = NaN

parseInt(111,2) = 7
parseInt(‘111’,2)就是將‘111’解析為2進制的整數，就是4+2+1=7.

詳情parseInt

parseInt 詳解

69.DOM操作中怎么獲取一個節點的父節點?

1.獲取父節點

element.parentNode

70.Math中常見操作函數

Math.floor()向下取整

Math.ceil	向上取整
Math.trunc	截取小數部分
Math.round	四舍五入
Math.max	獲取一系列數據中的最大值
Math.min()	獲取一系列數據中的最小值
Math.pow(x,y)	獲取x數據的y次方 指數運算
Math.sprt(x)	獲取x數據的平方根
Math.random()	獲取一個0~1之間的隨機數

71NaN是什么意思?

是Not a Number的縮寫，在IEEE浮點數算術標準（IEEE 754）中定義，表示一些特殊數值（無窮與非數值（NaN）），為許多CPU與浮點運算器所采用。

72.原生JS繼承的方式有幾種?ES6繼承方式如何實現?

三種
1、構造函數繼承
原理:利用call,apply,bind等方法,在構造函數內部去調用別的構造函數,為己所用.
缺點:原型對象的函數無法復用
2、原型鏈繼承
優點:實現了原型對象內的函數復用.
缺點:雖然得到了屬性值,但無法在實例對象內靈活的傳參,根本不能用.
3、組合繼承
原理:構造函數繼承與原型鏈繼承的組合使用.
優勢:既實現了原型對象內的函數復用,又可以在實例對象內靈活的傳參.

1.2
1.原型鏈繼承
2.借助構造函數繼承
3.組合式繼承
4.原型式繼承
5.寄生式繼承
6.寄生組合式繼承

73.if([0][1]){—}這里if中的條件是true還是false?為什么?

[0] 是true 但是 [0]他只有一個元素。那么你取第一位他肯定是沒有的 那不就是越界得undefined
然后undefined 隱式成false
undefined 隱式轉換 false

74.如何獲取鼠標在窗口的位置?

JS獲取鼠標位置的方法：
1、使用clientX和clientY屬性
2、使用offsetX和offsetY屬性；
3、使用pageX和pageY屬性；
4、使用screenX和screenY屬性；
5、使用layerX和layerY屬性。

屬性及其兼容性
屬性 說明 兼容性
clientX 以瀏覽器窗口左上頂角為原點，定位 x 軸坐標 所有瀏覽器，不兼容 Safari
clientY 以瀏覽器窗口左上頂角為原點，定位 y 軸坐標 所有瀏覽器，不兼容 Safari
offsetX 以當前事件的目標對象左上頂角為原點，定位 x 軸坐標 所有瀏覽器，不兼容 Mozilla
offsetY 以當前事件的目標對象左上頂角為原點，定位 y 軸坐標 所有瀏覽器，不兼容 Mozilla
pageX 以 document 對象（即文檔窗口）左上頂角為原點，定位 x 軸坐標 所有瀏覽器，不兼容 IE
pageY 以 document 對象（即文檔窗口）左上頂角為原點，定位 y 軸坐標 所有瀏覽器，不兼容 IE
screenX 計算機屏幕左上頂角為原點，定位 x 軸坐標 所有瀏覽器
screenY 計算機屏幕左上頂角為原點，定位 y 軸坐標 所有瀏覽器
layerX 最近的絕對定位的父元素（如果沒有，則為 document 對象）左上頂角為元素，定位 x 軸坐標 Mozilla 和 Safari
layerY 最近的絕對定位的父元素（如果沒有，則為 document 對象）左上頂角為元素，定位 y 軸坐標 Mozilla 和 Safari

75.原生JS獲取文本輸入框的內容?

input.value

76.JS代碼中如何跳轉頁面?如何刷新當前頁面?

JS頁面跳轉

reload() 方法
reload()方法用于刷新當前文檔。
reload() 方法類似于你瀏覽器上的刷新頁面按鈕。

location.reload();

在按鈕中可以使用 onclick 事件：

<input type="button" onclick="javascript:location.reload();" value="刷新當前頁面">

77.什么是事件委托？

事件委托也稱之為事件代理（Event Delegation）。是JavaScript中常用綁定事件的常用技巧。顧名思義，“事件代理”即是把原本需要綁定在子元素的響應事件委托給父元素，讓父元素擔當事件監聽的職務。事件代理的原理是DOM元素的事件冒泡。
舉個通俗的例子：比如一個宿舍的同學同時快遞到了，一種方法就是他們一個個去領取，還有一種方法就是把這件事情委托給宿舍長，讓一個人出去拿好所有快遞，然后再根據收件人一 一分發給每個宿舍同學；
在這里，取快遞就是一個事件，每個同學指的是需要響應事件的 DOM 元素，而出去統一領取快遞的宿舍長就是代理的元素，所以真正綁定事件的是這個元素，按照收件人分發快遞的過程就是在事件執行中，需要判斷當前響應的事件應該匹配到被代理元素中的哪一個或者哪幾個。

一個事件觸發后，會在子元素和父元素之間傳播（propagation）。這種傳播分成三個階段。

（1）捕獲階段：從window對象傳導到目標節點（上層傳到底層）稱為“捕獲階段”（capture phase），捕獲階段不會響應任何事件；
（2）目標階段：在目標節點上觸發，稱為“目標階段”
（3）冒泡階段：從目標節點傳導回window對象（從底層傳回上層），稱為“冒泡階段”（bubbling phase）。事件代理即是利用事件冒泡的機制把里層所需要響應的事件綁定到外層。

事件委托的優點：

【1】可以大量節省內存占用，減少事件注冊，比如在ul上代理所有li的click事件就非常棒
ul id=“list”>
li>item 1</li
li>item 2</li
li>item 3</li
…
li>item n</li
ul
// … 代表中間還有未知數個 li
如上面代碼所示，如果給每個li列表項都綁定一個函數，那對內存的消耗是非常大的，因此較好的解決辦法就是將li元素的點擊事件綁定到它的父元素ul身上，執行事件的時候再去匹配判斷目標元素。

【2】可以實現當新增子對象時無需再次對其綁定（動態綁定事件）

假設上述的例子中列表項li就幾個，我們給每個列表項都綁定了事件；
在很多時候，我們需要通過 AJAX 或者用戶操作動態的增加或者刪除列表項li元素，那么在每一次改變的時候都需要重新給新增的元素綁定事件，給即將刪去的元素解綁事件；
如果用了事件委托就沒有這種麻煩了，因為事件是綁定在父層的，和目標元素的增減是沒有關系的，執行到目標元素是在真正響應執行事件函數的過程中去匹配的；所以使用事件在動態綁定事件的情況下是可以減少很多重復工作的。

使用事件委托注意事項：使用“事件委托”時，并不是說把事件委托給的元素越靠近頂層就越好。事件冒泡的過程也需要耗時，越靠近頂層，事件的”事件傳播鏈”越長，也就越耗時。如果DOM嵌套結構很深，事件冒泡通過大量祖先元素會導致性能損失。

2.怎么阻止默認動作？

有一些html元素默認的行為，比如說a標簽，點擊后有跳轉動作；form表單中的submit類型的input有一個默認提交跳轉事件；reset類型的input有重置表單行為。

如果你想阻止這些瀏覽器默認行為，JavaScript為你提供了方法。

var $a = document.getElementsByTagName("a")[0]; $a.onclick = function(e){ alert("跳轉動作被我阻止了") e.preventDefault(); //return false;//也可以 } 默認事件沒有了

既然return false 和 e.preventDefault()都是一樣的效果，那它們有區別嗎？當然有。
僅僅是在HTML事件屬性 和 DOM0級事件處理方法中，才能通過返回 return false 的形式組織事件宿主的默認行為。

78.面試題：項目訪問過程 用戶輸入了 https://www.baidu.com ，具體發生了哪些操作？

總結

以上是生活随笔為你收集整理的原生JS 面试题 （基础）（概率大）的全部內容，希望文章能夠幫你解決所遇到的問題。

如果覺得生活随笔網站內容還不錯，歡迎將生活随笔推薦給好友。