用於面試的終極 JavaScript 和 React 備忘單

準備下一次面試：JavaScript 和 React 關鍵主題

JavaScript 主題

1。吊掛

提升是 JavaScript 的一種機制，它在編譯階段、執行程式碼之前將變數和函數宣告移到其包含範圍的頂部。這意味著您可以在程式碼中實際聲明變數和函數之前對其進行引用。但是，僅提升聲明，而不提升初始化。對於用 var 宣告的變量，它們會被提升並初始化為未定義，而 let 和 const 會被提升但未初始化，如果在聲明之前訪問，則會導致「臨時死區」錯誤。函數聲明被完全提升，這意味著它們可以在出現在程式碼中之前被呼叫。

範例：

console.log(a); // undefined
var a = 5;

// Equivalent to:
var a;
console.log(a); // undefined
a = 5;

函數宣告也被提升：

greet(); // "Hello!"
function greet() {
  console.log("Hello!");
}

2。關閉

閉包是 JavaScript 中的功能，其中函數即使在該範圍之外執行時仍保留對其詞法範圍的存取。這允許函數“記住”其周圍範圍中的變數。閉包通常用於 JavaScript 中的資料封裝、維護狀態或建立私有變數。當一個函數在另一個函數內部定義並且內部函數引用外部函數中的變數時，它們就會形成。

範例：

function outer() {
  let count = 0;
  return function inner() {
    count++;
    return count;
  };
}

const increment = outer();
console.log(increment()); // 1
console.log(increment()); // 2

3。承諾

Promise 代表未來可用的值的佔位符。它們用於比傳統回調函數更有效地處理非同步操作，從而減少“回調地獄”。 Promise 可處於以下三種狀態之一：待定、已履行或已拒絕。一旦承諾被履行或拒絕，它就變得不可改變。 Promise 提高了程式碼的可讀性，並使連結非同步操作變得更容易。

範例：

const fetchData = new Promise((resolve, reject) => {
  setTimeout(() => {
    resolve("Data fetched!");
  }, 1000);
});

fetchData.then(data => console.log(data)); // "Data fetched!"

4。函數柯里化

函數柯里化是一種將具有多個參數的函數轉換為一系列函數的技術，每個函數採用一個參數。這種方法廣泛應用於函數式程式設計中，透過修復原始函數的一些參數來建立可重複使用的函數。柯里化可以實現更好的程式碼可讀性、可重複使用性和模組化。

範例：

function add(a) {
  return function(b) {
    return a + b;
  };
}

const add5 = add(5);
console.log(add5(3)); // 8

5。執行上下文

執行上下文定義了 JavaScript 程式碼的執行環境。它包括在特定時間可存取的變數、物件和函數。執行上下文分為三種：

• 全域執行上下文：在腳本首次執行時建立。在全域範圍內宣告的變數和函數是此上下文的一部分。
• 函數執行上下文：每當呼叫函數時創建，包含其局部變數和參數。
• Eval 執行上下文：很少使用，在呼叫 eval() 時建立。 執行上下文也決定了它的值，並涉及作用域鏈.
的創建

範例：

console.log(a); // undefined
var a = 5;

// Equivalent to:
var a;
console.log(a); // undefined
a = 5;

6。呼叫、申請、綁定

這些是在呼叫函數時明確設定 this 值的方法。

• Call：使用給定的 this 上下文和單獨傳遞的參數呼叫函數。
• Apply：與 call 類似，但參數以陣列形式傳遞。
• Bind：傳回一個具有特定 this 上下文和預設參數的新函數，而不立即呼叫它。

範例：

greet(); // "Hello!"
function greet() {
  console.log("Hello!");
}

7。常用方法的 Polyfill

Polyfill 是在原生不可用的環境中實作功能的程式碼片段。它們允許較舊的瀏覽器或執行時間環境支援現代 JavaScript 功能，例如 Array.map、Promise 或 Object.assign。 Polyfill 通常用於確保相容性，並使用模仿缺失功能行為的回退邏輯來實現。

範例： Array.prototype.map Polyfill：

function outer() {
  let count = 0;
  return function inner() {
    count++;
    return count;
  };
}

const increment = outer();
console.log(increment()); // 1
console.log(increment()); // 2

反應主題

1。和解

協調是 React 更新 DOM 以符合虛擬 DOM 的過程。 React 使用 diff 演算法來確定所需的最小更新次數，從而提高渲染效率。當狀態或屬性變更時，React 會建立一個新的虛擬 DOM，將其與前一個進行比較，並僅更新已變更的部分。

2。鉤子

鉤子是允許功能組件使用狀態和生命週期方法等功能的函數，這些功能以前僅在類別組件中可用。範例包括用於狀態管理的 useState 和用於副作用的 useEffect。 Hooks 讓 React 程式碼更簡潔，功能元件更強大。

範例：

const fetchData = new Promise((resolve, reject) => {
  setTimeout(() => {
    resolve("Data fetched!");
  }, 1000);
});

fetchData.then(data => console.log(data)); // "Data fetched!"

3。類別與函數元件

類組件是 ES6 類，將其用於狀態和生命週期方法。功能元件是呈現 UI 的簡單功能。透過引入鉤子，功能組件可以管理狀態和生命週期，而無需類別。函數式組件因其簡單性和更好的性能而受到青睞。

類別組件範例：

console.log(a); // undefined
var a = 5;

// Equivalent to:
var a;
console.log(a); // undefined
a = 5;

4。記憶

記憶化是一種效能最佳化技術，用於防止不必要的重新計算或重新渲染。在 React 中，記憶化確保元件僅在其 props 或狀態變更時才重新渲染。這對於計算成本較高或更新頻繁的組件特別有用。

範例：

greet(); // "Hello!"
function greet() {
  console.log("Hello!");
}

5。高階組件 (HOC)

HOC 是 React 中的一種設計模式，其中函數將元件作為輸入並傳回該元件的增強版本。 HOC 通常用於程式碼重複使用、管理狀態以及新增日誌記錄或驗證等功能。

範例：

function outer() {
  let count = 0;
  return function inner() {
    count++;
    return count;
  };
}

const increment = outer();
console.log(increment()); // 1
console.log(increment()); // 2

6。表演

提高 React 效能涉及避免不必要的重新渲染、延遲載入元件以及使用 React.memo 或 useMemo 最佳化渲染等技術。開發人員也使用 React Profiler 等工具來識別瓶頸。

7。反應路由器

React Router 是一個用於管理 React 應用程式中導航的函式庫。它允許開發人員定義路由並根據 URL 動態渲染元件。功能包括嵌套路線、路線參數和導航守衛。

範例：

const fetchData = new Promise((resolve, reject) => {
  setTimeout(() => {
    resolve("Data fetched!");
  }, 1000);
});

fetchData.then(data => console.log(data)); // "Data fetched!"

8。快取

React 中的快取涉及儲存經常使用的資料以避免重新取得它。這可以使用 React-query、Redux 或 localStorage 等函式庫來實作。快取透過減少載入時間來提高效能和使用者體驗。

9。安全

為了保護 React 應用程式的安全，開發人員應該驗證和清理使用者輸入、使用 HTTPS 並避免內聯 JavaScript 以防止 XSS 攻擊。像 Helmet 這樣的函式庫可以幫助設定安全的 HTTP 標頭。身份驗證和授權也應該安全地實現。

10。提高性能

可以透過以下方式提高性能：

• 透過程式碼分割減少套件大小。
• 避免不必要的狀態更新。
• 使用 React.lazy 進行延遲載入。
• 最佳化影像和資源。
• 使用高效率的演算法來執行計算任務。

11。記憶體洩漏

當物件不再使用但未被垃圾收集時，就會發生記憶體洩漏。在 React 中，洩漏通常是由於事件偵聽器、計時器或訂閱的清理不當而引起的。將 useEffect 與清理功能結合使用可確保正確清理，防止此類問題。

清理正在使用的訂閱或計時器效果：

console.log(a); // undefined
var a = 5;

// Equivalent to:
var a;
console.log(a); // undefined
a = 5;

總之，掌握 JavaScript 和 React 的核心概念對於任何旨在建立健壯且高效的應用程式的開發人員來說至關重要。這些原則不僅構成了 Web 開發的基礎，而且還幫助您自信地應對複雜的挑戰。無論是理解閉包、使用 React 優化效能，還是實施安全最佳實踐，對這些主題的深入理解將使您在面試和職業生涯中脫穎而出。不斷探索、練習和完善您的技能——因為在不斷發展的程式設計世界中，學習之旅永遠不會真正結束。

以上是用於面試的終極 JavaScript 和 React 備忘單的詳細內容。更多資訊請關注PHP中文網其他相關文章！