,,

53 道 JavaScript 前端基礎面試題

當前位置：點晴教程→知識管理交流 →『技術文檔交流』

admin

2024年10月13日 22:27 本文熱度 869

寫在前面

由于目前現(xiàn)在求職市場競爭激烈，許多初學者和經驗豐富的開發(fā)人員都面臨著求職問題。因此，最好的方法是不斷學習并提高自己的技能。

為了拿到心儀的offer，我們需要認真準備面試，因此，今天我為大家準備了53道面試題，我以“一問一答”的形式將這些前端面試題分享出來，希望能夠幫助到你。

雖然這些面試題主要針對初級開發(fā)人員，但其中也有包括一些中級開發(fā)人員的題。

那么，我們現(xiàn)在開始吧。

1. JavaScript 中有哪些數(shù)據類型？

Number — 數(shù)字
String — 字符串
Boolean — 布爾類型，true 或 false
Object — JavaScript 對象
null — 表示“無”、“空”或“未知值”的特殊值。
undefined ——“值尚未被分配”。如果聲明了變量但沒有分配值，則分配此類型。
Symbol— 一種唯一且不可變的數(shù)據類型，可用作對象屬性的標識符。
BigInt — 用于創(chuàng)建大數(shù)。

const bigInt = 1234567890123456789012345678901234567890n;

2.“==”和“===”有什么區(qū)別？

運算符“==”檢查抽象相等，而“===”檢查嚴格相等。換句話說，“==”運算符在比較之前執(zhí)行必要的類型轉換，而“===”則不執(zhí)行類型轉換。因此，如果兩個值不是同一類型，則使用“===”運算符時將返回 false。

3. 變量的聲明方式有哪些？

聲明變量有 4 種方法：聲明變量有 4 種方法：

foo =123;var foo = 123;let a = 123;conest a = 123;

使用“var”關鍵字聲明變量與第一種方法類似。以這種方式聲明的變量具有全局或函數(shù)作用域，但缺少塊作用域，這是一個缺點。

“l(fā)et”和“const”是聲明變量的更好方法。它們具有塊作用域，這意味著在函數(shù)內部聲明的變量在該函數(shù)外部將不可見。

“const”變量是不可變的，但如果它是一個對象，你可以改變它的屬性，如果它是一個數(shù)組，你可以修改和添加元素。

4. null 和 undefined 有什么區(qū)別？

兩個選項都代表空值。如果我們初始化一個變量但不給它賦值，它就會被分配一個特殊的標記—undefined。Null 是手動分配的。Null 是一個特殊值，表示“無”、“空”或“未知值”。如果我們需要清除變量的值，我們設置 foo = null。

5. 箭頭函數(shù)以及與常規(guī)函數(shù)的區(qū)別。

箭頭函數(shù)不能使用參數(shù)對象。
它們有不同的語法。
箭頭函數(shù)沒有自己的 this 上下文。當引用 this 時，箭頭函數(shù)從周圍的作用域中獲取上下文。
箭頭函數(shù)不能用作構造函數(shù)。換句話說，它們不能用 new 關鍵字調用。

6. 什么是閉包?以及為什么需要它們？

閉包是一個函數(shù)以及它可以訪問的所有外部變量。例如，有一個具有嵌套函數(shù)的函數(shù)，該函數(shù)將關閉并保留其父級的變量。

7. 什么是模板文字？

模板文字用反引號 (") 括起來，并允許多行字符串。它們還允許在其中嵌入表達式。

8. 什么是Set和Map？

Map是一個集合，是一種按照鍵值對原理進行操作的數(shù)據結構，類似于Object。然而，Map 和 Object 之間的主要區(qū)別在于 Map 允許使用任何類型的鍵。Set 是一種沒有鍵的集合類型，是一個數(shù)組，其中每個值只能出現(xiàn)一次。集合在其內部存儲唯一的值。

9. 如何檢查對象中是否存在屬性？

第一種方法是使用 hasOwnProperty 函數(shù)，該函數(shù)適用于每個對象。第二種方法是使用 in 運算符。但是，在使用 in 運算符時必須小心，因為它會檢查鏈中的所有原型。

10. 如何訪問對象屬性？

第一種方式是靜態(tài)的，使用點表示法：obj.a。

第二種方式是動態(tài)的，使用方括號：obj[‘a’]。

11. 使用數(shù)組的主要方法有哪些？

forEach — 用于循環(huán)數(shù)組的迭代方法，不返回任何內容。它提供了比常規(guī) for 循環(huán)更優(yōu)雅的替代方案。
filter(callback, [args]) — 一種使用提供的函數(shù)過濾數(shù)組的方法。它創(chuàng)建一個新數(shù)組，其中僅包含回調(item, i, arr) 函數(shù)返回 true 的原始數(shù)組中的元素。
map(callback, [args]) — 一種轉換數(shù)組的方法。它創(chuàng)建一個新數(shù)組，其中包含為數(shù)組的每個元素調用回調(item, i, arr) 函數(shù)的結果。
reduce(callback, [initValue]) — 一種按順序處理數(shù)組的每個元素，同時維護中間結果的方法。

12.創(chuàng)建對象的方式有哪些？

使用構造函數(shù)：

使用對象文字表示法：

使用一個類：

使用創(chuàng)建函數(shù)：

13.什么是Promise？

Promise 是一個設計用于處理異步代碼的對象。它維持自己的狀態(tài)。最初，Promise 處于待處理狀態(tài)，如果異步代碼執(zhí)行成功，則 Promise 轉換為已完成狀態(tài)；如果發(fā)生錯誤，則轉換為拒絕狀態(tài)。Promise 接受兩個回調函數(shù)：

onFulfilled，當Promise履行時觸發(fā)。
onRejected，當Promise被拒絕時觸發(fā)。

使用模式如下：

需要異步執(zhí)行某些操作的代碼會創(chuàng)建一個 Promise 并返回它。
外部代碼收到 Promise 后，將 onFulfilled 和 onRejected 回調函數(shù)傳遞給它。
該過程完成后，異步代碼將 Promise 轉換為已完成或已拒絕狀態(tài)，并自動調用相應的回調函數(shù)。

14.什么是async/await以及如何使用它？

async/await 是一種處理 Promise 的特殊語法。

使用異步語法聲明的函數(shù)始終返回 Promise。

關鍵字await使JavaScript解釋器等待，直到await右側的Promise完成后才繼續(xù)執(zhí)行。然后，它將返回結果，并且代碼將繼續(xù)執(zhí)行。wait 不能在常規(guī)函數(shù)中使用。

15. 如何檢查一個對象是否是數(shù)組？

要檢查對象是否是數(shù)組，可以使用 Array.isArray() 方法。它接受一個對象作為輸入，如果該對象是數(shù)組則返回 true，如果不是數(shù)組則返回 false。

16. 擴展運算符 (…) 的目的是什么？

擴展運算符 (…) 用于解包數(shù)組或對象。

它允許你擴展可迭代的元素，例如，數(shù)組和字符串。

它用在調用的預期參數(shù)數(shù)量為零或更多的函數(shù)中。

它用在數(shù)組文字或表達式中。

它用在對象文字中，其中鍵值對的數(shù)量應為零或更多。

17. 復制對象時如何避免引用依賴？

如果對象不包含嵌套對象，例如：

在這種情況下，你可以使用展開運算符或 Object.assign() 方法：

如果對象包含嵌套對象：

在這種情況下，你需要執(zhí)行深復制。

解決方法雖然較慢，但是：

該方法適用于沒有原型和函數(shù)的對象。

或者，你可以使用 lodash 庫的 deepClone() 函數(shù)。

18. 如何改變函數(shù)的上下文？

使用bind()方法，該方法返回一個帶有綁定上下文的新函數(shù)。

使用 call() 和 apply() 方法。主要區(qū)別在于 call() 接受參數(shù)序列，而 apply() 接受參數(shù)數(shù)組作為第二個參數(shù)。

19. 什么是三元運算符/條件運算符？

三元運算符是 if-else 語句的簡寫符號。運算符由問號和冒號表示。它被稱為三元，因為它是唯一接受三個參數(shù)的運算符。

健康）狀況？表達式_1：表達式_2

20.什么是解構？

解構是一種允許我們將數(shù)組和對象解包為多個變量的語法。

21.什么是DOM？

DOM 代表文檔對象模型。它是將 HTML 文檔表示為標簽樹。

例子

DOM 樹中的每個節(jié)點都是一個對象。

HTML 文檔的基本元素是標簽。

根據文檔對象模型 (DOM)，每個 HTML 標簽都是一個對象。嵌套標簽是其父元素的“子元素”。標簽內的文本也是一個對象。所有這些對象都可以使用 JavaScript 訪問，我們可以使用它們來操作頁面。

22.什么是事件循環(huán)？

事件循環(huán)——一種管理代碼執(zhí)行的機制。它以正確的順序處理事件處理和任務執(zhí)行。

事件循環(huán)的主要思想是JavaScript在單線程環(huán)境中運行但可以處理異步操作。當異步操作（例如服務器請求）完成時，它將相應的事件放入事件隊列中。

事件循環(huán)以循環(huán)方式工作，按照事件到達的順序處理這些事件。

它從隊列中獲取一個事件并將其傳遞以供執(zhí)行。如果事件包含回調或處理程序，則會調用它，并執(zhí)行與該事件關聯(lián)的代碼。

事件循環(huán)還處理其他任務，例如計時器和微任務（Promise）。它管理所有這些任務的執(zhí)行順序，以確保一致性并防止阻塞代碼執(zhí)行的主線程。

簡而言之，JavaScript 中的事件循環(huán)通過處理隊列中的事件并按正確的順序執(zhí)行相應的代碼來管理異步操作。這使得 JavaScript 在處理異步操作時能夠響應并有效地利用其資源。

23.什么是原型繼承？

JavaScript 中的每個對象都有一個屬性——原型?？梢詫⒎椒ê蛯傩蕴砑拥皆椭小？梢愿鶕蛣?chuàng)建其他對象。創(chuàng)建的對象自動繼承其原型的方法和屬性。如果對象中不存在某個屬性，則將在原型中執(zhí)行其搜索。

24.什么是可選鏈運算符？

可選鏈接運算符 ?。如果 ? 后面的部分停止計算并返回undefined。undefined或為null。

讓我們考慮一個用戶對象。大多數(shù)用戶都有一個地址 user.address 和一個街道 user.address.street，但有些用戶沒有提供地址。在這種情況下，可選鏈接運算符可以幫助我們在嘗試訪問未在地址中指定街道的用戶街道時避免錯誤。

25.什么是 Shadow DOM？

Shadow DOM 是一組 Web 標準，允許封裝網頁上元素的結構和樣式。它代表 DOM 的一個特殊片段，位于元素內部并與頁面的其余部分分開。Shadow DOM 用于創(chuàng)建具有獨立且風格化內容的組件和小部件，這些內容與頁面的整體結構不沖突。

26.什么是遞歸？如何使用它？

遞歸是一種解決問題的方法，其中函數(shù)通過在自己的函數(shù)體內重用自身來解決問題。簡單來說，就是函數(shù)調用自身的時候。

遞歸函數(shù)包括：

終止條件或基本情況
遞歸步驟——一種將問題簡化為更簡單形式的方法。

基本情況是必要條件；否則，會因函數(shù)調用無限循環(huán)而導致堆棧溢出。

27. 函數(shù)表達式和函數(shù)聲明有什么區(qū)別？

函數(shù)聲明是聲明函數(shù)的傳統(tǒng)方式。

函數(shù)表達式：

通過函數(shù)聲明，可以創(chuàng)建函數(shù)并將其分配給變量，就像任何其他值一樣。本質上，函數(shù)如何定義并不重要，因為它是存儲在變量“foo”中的值。

然而，函數(shù)聲明是在執(zhí)行代碼塊之前處理的，這意味著它們在整個代碼塊中都是可見的。另一方面，函數(shù)表達式僅在執(zhí)行流到達時才會創(chuàng)建。

28.什么是構造函數(shù)？

構造函數(shù)是用于創(chuàng)建對象的常規(guī)函數(shù)。但是，使用它們有兩個規(guī)則：

構造函數(shù)的名稱應以大寫字母開頭。
應使用 new 運算符調用構造函數(shù)。

當使用 new 運算符創(chuàng)建構造函數(shù)時，會發(fā)生以下情況：

創(chuàng)建一個新的空對象并將其分配給該對象。
執(zhí)行構造函數(shù)內的代碼。通常，此代碼將修改 this 對象并添加新屬性。
返回此值。

29. 如何從對象中獲取鍵列表和值列表？

你可以使用 Object.keys() 獲取鍵列表，使用 Object.values() 獲取值列表。

30. 提供 ES6 中新功能的示例。

最常見的：

let和const。引入新關鍵字 let 和 const 用于聲明具有塊作用域的變量。
箭頭函數(shù)。箭頭函數(shù)的概念允許更簡潔和清晰的函數(shù)定義。

默認參數(shù)。你可以定義函數(shù)參數(shù)的默認值。

展開運算符 (...)。擴展運算符允許解包函數(shù)參數(shù)的數(shù)組或對象元素或創(chuàng)建新的數(shù)組/對象。

解構。解構允許從數(shù)組或對象中提取值并將它們分配給變量。

31. ES6中如何進行類繼承？

類繼承是使用“extends”關鍵字后跟父類的名稱來完成的。

32. JavaScript 中的微任務和宏任務是什么？

在 JavaScript 中，微任務和宏任務是指需要在事件循環(huán)中執(zhí)行的任務類型。

微任務是在瀏覽器重新繪制頁面之前需要在當前事件循環(huán)內執(zhí)行的任務。它們通常使用 Promise.then()、process.nextTick()（在 Node.js 中）或 MutationObserver 等方法添加到執(zhí)行隊列中。

微任務的示例包括執(zhí)行 Promise 處理程序和 DOM 突變。

另一方面，宏任務是在當前事件循環(huán)完成之后、在屏幕上呈現(xiàn)更改之前需要執(zhí)行的任務。

這包括使用 setTimeout、setInterval、requestAnimationFrame 添加到事件隊列的任務，以及處理輸入事件和網絡請求。

宏任務在當前事件循環(huán)中的所有微任務處理完畢后執(zhí)行。

微任務和宏任務之間的區(qū)別很重要，因為它決定了執(zhí)行順序并允許管理 JavaScript 中不同任務的優(yōu)先級。

微任務具有更高的優(yōu)先級，并且在宏任務之前執(zhí)行，這樣可以更快地更新界面并防止阻塞主 JavaScript 執(zhí)行線程。

33.什么是生成器？

生成器根據需要一個一個地生成一系列值。生成器可以很好地與對象配合使用，并且可以輕松創(chuàng)建數(shù)據流。

要聲明生成器，需要使用一種特殊的語法——生成器函數(shù)。

next() 是生成器的主要方法。調用時，next() 開始執(zhí)行代碼，直到最近的yield 語句。該值可能不存在，在這種情況下它表示為未定義。當達到y(tǒng)ield時，函數(shù)執(zhí)行暫停，并將相應的值返回給外部代碼。

34.瀏覽器中存儲數(shù)據的方法有哪些？

在瀏覽器中存儲數(shù)據有多種方法：

LocalStorage 和 SessionStorage — 在瀏覽器中存儲鍵值對。其中存儲的數(shù)據在頁面刷新后仍保留。兩種存儲選項都只能使用字符串作為鍵和值，因此需要使用 JSON.stringify() 轉換對象。Cookie — 存儲在瀏覽器中的小數(shù)據字符串。
Cookie 通常由 Web 服務器使用 Set-Cookie 標頭設置。然后，瀏覽器將使用 Cookie 標頭自動將它們添加到幾乎每個對同一域的請求中。一個 cookie 最多可以容納 4kb 的數(shù)據。根據瀏覽器的不同，每個站點允許使用 20 個以上的 cookie。
IndexedDB — 內置數(shù)據庫，比 localStorage 更強大。它是一個鍵值存儲，其中有多種類型的鍵可用，值幾乎可以是任何東西。IndexedDB 支持事務以提高可靠性，支持鍵范圍查詢和索引，并允許存儲比 localStorage 更多的數(shù)據。IndexedDB 是為離線應用程序設計的，可以與 Service Workers 等技術結合。

35、sessionStorage和localStorage有什么區(qū)別？

SessionStorage 和 localStorage 允許在瀏覽器中以鍵值格式存儲對象。

主要區(qū)別是：

localStorage 最多可以存儲 10 MB 的數(shù)據，而 sessionStorage 最多可以存儲 5 MB 的數(shù)據。
localStorage 中的數(shù)據不會被刪除，而 sessionStorage 中的數(shù)據會在瀏覽器選項卡關閉時被刪除。
localStorage 中的數(shù)據可以從任何窗口訪問，而 sessionStorage 中的數(shù)據只能從同一瀏覽器窗口訪問。

36.什么是正則表達式？

正則表達式是由特殊規(guī)則和模式定義的字符串。它們是一個強大的工具，可以檢測和處理字符串中的復雜結構。

37.WeakSet和WeakMap是什么，它們與Map和Set有何不同？

WeakMap 和 Map 之間的第一個區(qū)別是 WeakMap 中的鍵必須是對象，而不是原始值。

第二個區(qū)別在于數(shù)據結構的內存存儲。JavaScript 引擎將值保存在內存中，只要它們是可訪問的，這意味著它們可以被使用。

通常，對象屬性、數(shù)組元素或其他數(shù)據結構被認為是可訪問的，并且只要數(shù)據結構存在，它們就會保留在內存中，即使沒有其他對它們的引用。

對于 WeakMap 和 WeakSet 來說，它的工作方式不同。一旦對象變得不可訪問，它將從數(shù)據結構中刪除。

38. 為什么兩個具有相同字段的對象比較時返回 false？

根據對內存區(qū)域的引用來比較對象。對于 JavaScript，test1 和 test2 對象是不同的，即使它們具有相同的字段。僅當對象是同一個對象時，它們才相等。

39. 為什么我們可以調用原始類型的方法？

JavaScript 允許使用原始數(shù)據類型（字符串、數(shù)字等），就像它們是對象一樣。原始數(shù)據類型有方法。

為了使此功能可用，每個基本數(shù)據類型都有自己的包裝對象：字符串、數(shù)字、布爾值和符號。由于這些包裝對象，原始數(shù)據類型具有不同的方法集，例如 toLowerCase() 或 toUpperCase()。

40. 如何檢查對象是從哪個類創(chuàng)建的？

你可以使用instanceof運算符檢查對象是從哪個類創(chuàng)建的，同時考慮繼承。

41. 編寫代碼，每 10 秒記錄一次在網站上花費的時間（以秒為單位）。

42.什么是純函數(shù)？

純函數(shù)需要滿足以下兩個條件的函數(shù)：

每次使用相同的參數(shù)集調用該函數(shù)時，它都會返回相同的結果。
它沒有副作用，這意味著它不會修改函數(shù)外部的變量。

43.什么是高階函數(shù)？

高階函數(shù)是接受另一個函數(shù)作為參數(shù)或返回一個函數(shù)作為結果的函數(shù)。

44. 如果我們可以使用回調來處理異步代碼，為什么還需要 Promise？

如果我們想使用回調函數(shù)從服務器異步獲取一些數(shù)據，則會導致以下結果：

這稱為回調地獄，因為每個回調都嵌套在另一個回調中，并且每個內部回調都依賴于父函數(shù)。

使用Promises，我們可以重寫上面的代碼：

有了Promises，執(zhí)行順序就清晰了，讓代碼更具可讀性。

45. 編寫你自己的bind 方法的實現(xiàn)。

為了實現(xiàn)它，我們可以使用閉包和 apply() 方法將函數(shù)綁定到上下文。

46. 用加、減、乘、除和 get 方法編寫一個計算器函數(shù)。該函數(shù)必須通過可選鏈來工作。

47. 編寫一個 randomSort 函數(shù)，該函數(shù)接受一個數(shù)字數(shù)組并按隨機順序對數(shù)組進行排序。

你可以使用 sort() 方法和 Math.random() 來實現(xiàn)此目的。

48. 編寫一個deleteGreatestValue 函數(shù)，該函數(shù)接受一個二維數(shù)字數(shù)組，并從每個嵌套數(shù)組中刪除最大的數(shù)字。

我們應該迭代每個嵌套數(shù)組，獲取每個嵌套數(shù)組的最大值并將其刪除。

49. 編寫一個 sortPeople 函數(shù)，它接受一個字符串名稱數(shù)組和一個數(shù)字高度數(shù)組，其中名稱[i] == heights[i]。它應該根據高度數(shù)組對名稱數(shù)組進行排序。

50. 編寫一個subsets 函數(shù)，它接受一個數(shù)字數(shù)組nums 并返回這些數(shù)字的所有可能的數(shù)組變體。

51.如何反轉鏈表？

讓我們創(chuàng)建一個函數(shù)reverseLinkedList，它將鏈表作為輸入并返回該列表的反轉版本。

方法：

它用 null 初始化結果變量，該變量將保存反轉的列表。
它使用 head 初始化 root 變量，該變量指向列表的開頭。
它進入一個 while 循環(huán)，一直持續(xù)到 root 變?yōu)?null，表示列表末尾。
在循環(huán)內部，它檢查結果是否已經有元素。如果是，它會使用當前值 root.val 和指向下一個節(jié)點結果的指針創(chuàng)建一個新的列表節(jié)點。然后它用這個新節(jié)點更新結果。
如果 result 還沒有任何元素，它將創(chuàng)建一個新的列表節(jié)點，其中當前值 root.val 和 null 作為指向下一個節(jié)點的指針。然后它用這個新節(jié)點更新結果。
更新結果后，通過將 root.next 分配給 root 來移動到列表中的下一個元素。
while 循環(huán)完成后，它返回結果中存儲的反轉列表。

總之，該函數(shù)通過從頭到尾迭代每個節(jié)點，為每個值創(chuàng)建一個新的列表節(jié)點并相應地更新指針來反轉鏈表。