使用 ESLint 避免 JavaScript 和 React 專案中的不安全調(diào)用

?? 在現(xiàn)代 JavaScript 和 React 應用程式中，經(jīng)常會遇到由於存取未定義或空值的屬性，或呼叫未定義的陣列或物件的方法而導致的執(zhí)行時間錯誤。這些問題可能會破壞用戶體驗並使調(diào)試成為一場噩夢。在本文中，我們將識別常見問題並提供 ESLint 配置來有效緩解這些問題。 ??

？ ? 在我們的 React 或 React Native 專案中，因為我們不使用 TypeScript，所以有時我們會忘記寫安全程式碼。這些不安全的程式碼可能會導致生產(chǎn)中的許多問題，例如 React Native 應用程式崩潰、讓用戶感到沮喪以及使維護變得複雜。讓我們深入探討這些常見問題以及如何解決它們。 ???

不安全通話的常見問題

1. 存取未定義或 null 的屬性???

問題：

存取未定義或 null 的物件上的屬性會導致執(zhí)行階段錯誤：

const user = undefined;
console.log(user.name); // ? Runtime Error: Cannot read property 'name' of undefined

解決方案：

• 解 1： 使用選購鏈 (?.)。

const name = user?.name;

• 解決方案 2： 採用預設(shè)後備。

const name = user ? user.name : 'Default Name';

• 解決方案3：確保訪問前初始化。

const user = { name: 'Default Name' };

2. 在未定義或 null 上呼叫方法 ???

問題：

在未定義的陣列上呼叫 .map() 或 .filter() 等方法會引發(fā)錯誤：

const items = undefined;
items.map((item) => console.log(item)); // ? Runtime Error: Cannot read property 'map' of undefined

解決方案：

• 解 1： 驗證變數(shù)是否為陣列。

if (Array.isArray(items)) {
  items.map(item => console.log(item));
}

• 解決方案2：提供預設(shè)數(shù)組。

const items = someValue || [];
items.map(item => console.log(item));

• 解 3： 使用空合併運算子 (??)。

const items = possibleItems ?? [];

3. 呼叫未定義的函數(shù)????？

問題：

嘗試呼叫可能未定義的函數(shù)：

const handler = undefined;
handler(); // ? Runtime Error: handler is not a function

解決方案：

• 解決方案1：在呼叫之前檢查是否存在。

if (typeof handler === 'function') {
  handler();
}

• 解 2： 指派一個無操作預設(shè)函數(shù)。

const handler = passedHandler || (() => {});

4. 解構(gòu)未定義或空物件？ ?？

問題：

從未定義的物件解構(gòu)屬性會導致錯誤：

const user = undefined;
console.log(user.name); // ? Runtime Error: Cannot read property 'name' of undefined

解決方案：

• 解決方案 1： 使用預設(shè)值的可選鏈。

const name = user?.name;

• 解 2： 在解構(gòu)之前進行驗證。

const name = user ? user.name : 'Default Name';

5. 存取不存在的陣列元素???

問題：

存取未定義陣列的元素會導致錯誤：

const user = { name: 'Default Name' };

解決方案：

• 解決方案 1： 提供預設(shè)後備。

const items = undefined;
items.map((item) => console.log(item)); // ? Runtime Error: Cannot read property 'map' of undefined

• 解2：正確初始化陣列。

if (Array.isArray(items)) {
  items.map(item => console.log(item));
}

6. 無效數(shù)組/函數(shù)使用 ??

問題：

對未定義的值或物件使用 .map() 或 .filter() 等陣列方法：

const items = someValue || [];
items.map(item => console.log(item));

解決方案：

• 解 1： 總是驗證數(shù)組函數(shù)的輸入。

const items = possibleItems ?? [];

• 解 2： 如果輸入無效，則傳回安全結(jié)果。

const handler = undefined;
handler(); // ? Runtime Error: handler is not a function

7. 條件檢查不充分??

問題：

未能嚴格驗證條件可能會導致錯誤，例如依賴虛假值。例如，如果期望布林值的條件可能會錯誤地評估其他類型，例如未定義或0：

if (typeof handler === 'function') {
  handler();
}

解決方案：

• 解 1： 使用嚴格相等比較。

const handler = passedHandler || (() => {});

• 解 2： 明確強制值以實現(xiàn)預期行為。

const obj = undefined;
const { name } = obj; // ? Runtime Error: Cannot destructure property 'name' of undefined

• 解 3： 在程式碼中定義明確條件。

const { name = 'Default Name' } = user || {};

---

使用 ESLint 避免不安全呼叫 ???

為了在開發(fā)過程中捕捉這些問題，我們可以利用具有特定規(guī)則的 ESLint。下面是一個 ESLint 配置，它將標記不安全的呼叫並建議修復。 ?????

ESLint 配置????

將以下規(guī)則新增至您的 .eslintrc.js 或 ESLint 設(shè)定檔：

const user = undefined;
console.log(user.name); // ? Runtime Error: Cannot read property 'name' of undefined

規(guī)則說明？ ??？

1. @typescript-eslint/no-unnecessary-condition：標記不必要的條件或未處理的潛在未定義或空值。 ??
2. no-unused-expressions：確保避免像 someObject && someObject.doSomething 這樣的短路邏輯，除非明確需要。 ？
3. @typescript-eslint/no-unsafe-call：防止對非函數(shù)進行不安全的函數(shù)呼叫。 ?
4. @typescript-eslint/no-unsafe-member-access：標記嘗試存取潛在未定義值的屬性。 ?
5. consistent-return：在函數(shù)中強制執(zhí)行一致的回傳類型，以避免傳回無效或未定義的值。 ？
6. @typescript-eslint/strict-boolean-expressions：透過防止隱式強制轉(zhuǎn)換來增強條件表達式。 ？
7. @typescript-eslint/no-non-null-assertion：不允許不安全！運算符用於繞過空/未定義檢查。 ？

---

安裝所需的依賴項？ ？ ？

要啟用這些規(guī)則，請確保您安裝了必要的 ESLint 外掛程式和解析器：

const name = user?.name;

---

將 ESLint 與 VSCode 整合?????

1. 安裝 ESLint 擴充：

• 在 VSCode 市場中搜尋“ESLint”並安裝。 ?

2. 啟用自動修復：

將以下內(nèi)容加入您的settings.json：

const name = user ? user.name : 'Default Name';

3. 運行 ESLint：

新增 npm 腳本來執(zhí)行 ESLint：

const user = { name: 'Default Name' };

然後，執(zhí)行 npm run lint 來捕捉問題。 ？

---

結(jié)論 ？ ？ ？

透過實作上述 ESLint 規(guī)則和實踐，您可以在不安全呼叫變成運行時錯誤之前捕獲並修復它們。 ??這種方法將提高 JavaScript 和 React 專案的可靠性和可維護性。 ???

---

以上是使用 ESLint 避免 JavaScript 和 React 專案中的不安全調(diào)用的詳細內(nèi)容。更多資訊請關(guān)注PHP中文網(wǎng)其他相關(guān)文章！