53 道 JavaScript 前端基礎面試題
當前位置:點晴教程→知識管理交流
→『 技術文檔交流 』
3. 變量的聲明方式有哪些? 聲明變量有 4 種方法:聲明變量有 4 種方法:
使用“var”關鍵字聲明變量與第一種方法類似。 以這種方式聲明的變量具有全局或函數作用域,但缺少塊作用域,這是一個缺點。 “let”和“const”是聲明變量的更好方法。 它們具有塊作用域,這意味著在函數內部聲明的變量在該函數外部將不可見。 “const”變量是不可變的,但如果它是一個對象,你可以改變它的屬性,如果它是一個數組,你可以修改和添加元素。 4. null 和 undefined 有什么區別? 兩個選項都代表空值。 如果我們初始化一個變量但不給它賦值,它就會被分配一個特殊的標記—undefined。Null 是手動分配的。Null 是一個特殊值,表示“無”、“空”或“未知值”。 如果我們需要清除變量的值,我們設置 foo = null。 5. 箭頭函數以及與常規函數的區別。
6. 什么是閉包?以及為什么需要它們? 閉包是一個函數以及它可以訪問的所有外部變量。 例如,有一個具有嵌套函數的函數,該函數將關閉并保留其父級的變量。 7. 什么是模板文字? 模板文字用反引號 (") 括起來,并允許多行字符串。 它們還允許在其中嵌入表達式。 8. 什么是Set和Map? Map是一個集合,是一種按照鍵值對原理進行操作的數據結構,類似于Object。 然而,Map 和 Object 之間的主要區別在于 Map 允許使用任何類型的鍵。Set 是一種沒有鍵的集合類型,是一個數組,其中每個值只能出現一次。 集合在其內部存儲唯一的值。 9. 如何檢查對象中是否存在屬性? 第一種方法是使用 hasOwnProperty 函數,該函數適用于每個對象。第二種方法是使用 in 運算符。 但是,在使用 in 運算符時必須小心,因為它會檢查鏈中的所有原型。 10. 如何訪問對象屬性? 第一種方式是靜態的,使用點表示法:obj.a。 第二種方式是動態的,使用方括號:obj[‘a’]。 11. 使用數組的主要方法有哪些?
12.創建對象的方式有哪些? 使用構造函數: 使用對象文字表示法: 使用一個類: 使用創建函數: 13.什么是Promise? Promise 是一個設計用于處理異步代碼的對象。它維持自己的狀態。最初,Promise 處于待處理狀態,如果異步代碼執行成功,則 Promise 轉換為已完成狀態;如果發生錯誤,則轉換為拒絕狀態。Promise 接受兩個回調函數:
使用模式如下:
async/await 是一種處理 Promise 的特殊語法。 使用異步語法聲明的函數始終返回 Promise。 關鍵字await使JavaScript解釋器等待,直到await右側的Promise完成后才繼續執行。然后,它將返回結果,并且代碼將繼續執行。wait 不能在常規函數中使用。 15. 如何檢查一個對象是否是數組? 要檢查對象是否是數組,可以使用 Array.isArray() 方法。它接受一個對象作為輸入,如果該對象是數組則返回 true,如果不是數組則返回 false。 16. 擴展運算符 (…) 的目的是什么? 擴展運算符 (…) 用于解包數組或對象。 它允許你擴展可迭代的元素,例如,數組和字符串。 它用在調用的預期參數數量為零或更多的函數中。 它用在數組文字或表達式中。 它用在對象文字中,其中鍵值對的數量應為零或更多。 17. 復制對象時如何避免引用依賴? 如果對象不包含嵌套對象,例如:
在這種情況下,你可以使用展開運算符或 Object.assign() 方法: 如果對象包含嵌套對象: 在這種情況下,你需要執行深復制。 解決方法雖然較慢,但是: 該方法適用于沒有原型和函數的對象。 或者,你可以使用 lodash 庫的 deepClone() 函數。 18. 如何改變函數的上下文? 使用bind()方法,該方法返回一個帶有綁定上下文的新函數。 使用 call() 和 apply() 方法。主要區別在于 call() 接受參數序列,而 apply() 接受參數數組作為第二個參數。 19. 什么是三元運算符/條件運算符? 三元運算符是 if-else 語句的簡寫符號。運算符由問號和冒號表示。它被稱為三元,因為它是唯一接受三個參數的運算符。 健康)狀況 ?表達式_1:表達式_2 20.什么是解構? 解構是一種允許我們將數組和對象解包為多個變量的語法。 21.什么是DOM? DOM 代表文檔對象模型。它是將 HTML 文檔表示為標簽樹。 例子 DOM 樹中的每個節點都是一個對象。 HTML 文檔的基本元素是標簽。 根據文檔對象模型 (DOM),每個 HTML 標簽都是一個對象。嵌套標簽是其父元素的“子元素”。標簽內的文本也是一個對象。所有這些對象都可以使用 JavaScript 訪問,我們可以使用它們來操作頁面。 22.什么是事件循環? 事件循環——一種管理代碼執行的機制。它以正確的順序處理事件處理和任務執行。 事件循環的主要思想是JavaScript在單線程環境中運行但可以處理異步操作。當異步操作(例如服務器請求)完成時,它將相應的事件放入事件隊列中。 事件循環以循環方式工作,按照事件到達的順序處理這些事件。 它從隊列中獲取一個事件并將其傳遞以供執行。如果事件包含回調或處理程序,則會調用它,并執行與該事件關聯的代碼。 事件循環還處理其他任務,例如計時器和微任務(Promise)。它管理所有這些任務的執行順序,以確保一致性并防止阻塞代碼執行的主線程。 簡而言之,JavaScript 中的事件循環通過處理隊列中的事件并按正確的順序執行相應的代碼來管理異步操作。這使得 JavaScript 在處理異步操作時能夠響應并有效地利用其資源。 23.什么是原型繼承? JavaScript 中的每個對象都有一個屬性——原型。可以將方法和屬性添加到原型中。可以根據原型創建其他對象。創建的對象自動繼承其原型的方法和屬性。如果對象中不存在某個屬性,則將在原型中執行其搜索。 24.什么是可選鏈運算符? 可選鏈接運算符 ?。如果 ? 后面的部分停止計算并返回undefined。undefined或為null。 讓我們考慮一個用戶對象。大多數用戶都有一個地址 user.address 和一個街道 user.address.street,但有些用戶沒有提供地址。在這種情況下,可選鏈接運算符可以幫助我們在嘗試訪問未在地址中指定街道的用戶街道時避免錯誤。 25.什么是 Shadow DOM? Shadow DOM 是一組 Web 標準,允許封裝網頁上元素的結構和樣式。它代表 DOM 的一個特殊片段,位于元素內部并與頁面的其余部分分開。Shadow DOM 用于創建具有獨立且風格化內容的組件和小部件,這些內容與頁面的整體結構不沖突。 26.什么是遞歸?如何使用它? 遞歸是一種解決問題的方法,其中函數通過在自己的函數體內重用自身來解決問題。簡單來說,就是函數調用自身的時候。 遞歸函數包括:
基本情況是必要條件;否則,會因函數調用無限循環而導致堆棧溢出。 27. 函數表達式和函數聲明有什么區別? 函數聲明是聲明函數的傳統方式。 函數表達式: 通過函數聲明,可以創建函數并將其分配給變量,就像任何其他值一樣。本質上,函數如何定義并不重要,因為它是存儲在變量“foo”中的值。 然而,函數聲明是在執行代碼塊之前處理的,這意味著它們在整個代碼塊中都是可見的。另一方面,函數表達式僅在執行流到達時才會創建。 28.什么是構造函數? 構造函數是用于創建對象的常規函數。但是,使用它們有兩個規則:
當使用 new 運算符創建構造函數時,會發生以下情況:
29. 如何從對象中獲取鍵列表和值列表? 你可以使用 Object.keys() 獲取鍵列表,使用 Object.values() 獲取值列表。 30. 提供 ES6 中新功能的示例。 最常見的:
31. ES6中如何進行類繼承? 類繼承是使用“extends”關鍵字后跟父類的名稱來完成的。 32. JavaScript 中的微任務和宏任務是什么? 在 JavaScript 中,微任務和宏任務是指需要在事件循環中執行的任務類型。 微任務是在瀏覽器重新繪制頁面之前需要在當前事件循環內執行的任務。它們通常使用 Promise.then()、process.nextTick()(在 Node.js 中)或 MutationObserver 等方法添加到執行隊列中。 微任務的示例包括執行 Promise 處理程序和 DOM 突變。 另一方面,宏任務是在當前事件循環完成之后、在屏幕上呈現更改之前需要執行的任務。 這包括使用 setTimeout、setInterval、requestAnimationFrame 添加到事件隊列的任務,以及處理輸入事件和網絡請求。 宏任務在當前事件循環中的所有微任務處理完畢后執行。 微任務和宏任務之間的區別很重要,因為它決定了執行順序并允許管理 JavaScript 中不同任務的優先級。 微任務具有更高的優先級,并且在宏任務之前執行,這樣可以更快地更新界面并防止阻塞主 JavaScript 執行線程。 33.什么是生成器? 生成器根據需要一個一個地生成一系列值。生成器可以很好地與對象配合使用,并且可以輕松創建數據流。 要聲明生成器,需要使用一種特殊的語法——生成器函數。 next() 是生成器的主要方法。調用時,next() 開始執行代碼,直到最近的yield 語句。該值可能不存在,在這種情況下它表示為未定義。當達到yield時,函數執行暫停,并將相應的值返回給外部代碼。 34.瀏覽器中存儲數據的方法有哪些? 在瀏覽器中存儲數據有多種方法:
35、sessionStorage和localStorage有什么區別? SessionStorage 和 localStorage 允許在瀏覽器中以鍵值格式存儲對象。 主要區別是:
36.什么是正則表達式? 正則表達式是由特殊規則和模式定義的字符串。它們是一個強大的工具,可以檢測和處理字符串中的復雜結構。 37.WeakSet和WeakMap是什么,它們與Map和Set有何不同? WeakMap 和 Map 之間的第一個區別是 WeakMap 中的鍵必須是對象,而不是原始值。 第二個區別在于數據結構的內存存儲。JavaScript 引擎將值保存在內存中,只要它們是可訪問的,這意味著它們可以被使用。 通常,對象屬性、數組元素或其他數據結構被認為是可訪問的,并且只要數據結構存在,它們就會保留在內存中,即使沒有其他對它們的引用。 對于 WeakMap 和 WeakSet 來說,它的工作方式不同。一旦對象變得不可訪問,它將從數據結構中刪除。 38. 為什么兩個具有相同字段的對象比較時返回 false? 根據對內存區域的引用來比較對象。對于 JavaScript,test1 和 test2 對象是不同的,即使它們具有相同的字段。僅當對象是同一個對象時,它們才相等。 39. 為什么我們可以調用原始類型的方法? JavaScript 允許使用原始數據類型(字符串、數字等),就像它們是對象一樣。原始數據類型有方法。 為了使此功能可用,每個基本數據類型都有自己的包裝對象:字符串、數字、布爾值和符號。由于這些包裝對象,原始數據類型具有不同的方法集,例如 toLowerCase() 或 toUpperCase()。 40. 如何檢查對象是從哪個類創建的? 你可以使用instanceof運算符檢查對象是從哪個類創建的,同時考慮繼承。 41. 編寫代碼,每 10 秒記錄一次在網站上花費的時間(以秒為單位)。 42.什么是純函數? 純函數需要滿足以下兩個條件的函數:
43.什么是高階函數? 高階函數是接受另一個函數作為參數或返回一個函數作為結果的函數。 44. 如果我們可以使用回調來處理異步代碼,為什么還需要 Promise? 如果我們想使用回調函數從服務器異步獲取一些數據,則會導致以下結果: 這稱為回調地獄,因為每個回調都嵌套在另一個回調中,并且每個內部回調都依賴于父函數。 使用Promises,我們可以重寫上面的代碼: ? 有了Promises,執行順序就清晰了,讓代碼更具可讀性。 45. 編寫你自己的bind 方法的實現。 為了實現它,我們可以使用閉包和 apply() 方法將函數綁定到上下文。 46. 用加、減、乘、除和 get 方法編寫一個計算器函數。該函數必須通過可選鏈來工作。 47. 編寫一個 randomSort 函數,該函數接受一個數字數組并按隨機順序對數組進行排序。 你可以使用 sort() 方法和 Math.random() 來實現此目的。 48. 編寫一個deleteGreatestValue 函數,該函數接受一個二維數字數組,并從每個嵌套數組中刪除最大的數字。 我們應該迭代每個嵌套數組,獲取每個嵌套數組的最大值并將其刪除。 49. 編寫一個 sortPeople 函數,它接受一個字符串名稱數組和一個數字高度數組,其中名稱[i] == heights[i]。它應該根據高度數組對名稱數組進行排序。 50. 編寫一個subsets 函數,它接受一個數字數組nums 并返回這些數字的所有可能的數組變體。 51.如何反轉鏈表? 讓我們創建一個函數reverseLinkedList,它將鏈表作為輸入并返回該列表的反轉版本。 方法:
總之,該函數通過從頭到尾迭代每個節點,為每個值創建一個新的列表節點并相應地更新指針來反轉鏈表。 52.如何對鏈表進行排序? 讓我們創建一個函數 sortList,它將鏈表作為輸入并返回該列表的排序版本。 方法:
53. Observables 和 Promise 之間有什么區別? Observables 和 Promises 都用于處理 JavaScript 中的異步操作。 一個關鍵的區別是 Observables 可以隨著時間的推移發出多個值。 它們適合處理數據流,例如用戶交互、事件或來自 API 的隨時間變化的數據。另一方面,承諾只能用單個值解析一次。 它們適合處理要么成功要么失敗的單個異步操作。 總之,Promises 最適合處理具有單個結果的一次性異步操作,而 Observables 在處理持續的數據流、事件和復雜的數據處理管道時更強大。 它們之間的選擇取決于特定的用例以及你正在處理的異步操作的性質。 寫在最后 在準備這些面試題以及研究所涵蓋的主題并查看相關資源的時候,相當于又把一些知識做了復習,對于之前沒有記住的內容,通過對這些內容的掌握,可以提升你的面試成功通過機率。 最后,感謝你的閱讀,祝編程愉快! 該文章在 2024/10/14 11:18:38 編輯過 |
關鍵字查詢
相關文章
正在查詢... |