作為開發人員，我們努力編寫不僅實用而且干凈高效的代碼。干凈的代碼對于可維護性、可擴展性和可讀性至關重要。在不斷發展的 JavaScript 世界中，采用編寫干凈代碼的最佳實踐可以顯著提高編程效率和項目質量。ley28資訊網——每日最新資訊28at.com

ley28資訊網——每日最新資訊28at.com

今天這篇內容，我們將分享26個JavaScript技巧，可幫助你編寫更簡潔、更高效的 JavaScript 代碼，并附有示例來幫助您實現更好的代碼效果。ley28資訊網——每日最新資訊28at.com

1.使用const并避免使用 var

避免使用 var 聲明變量。相反，對塊作用域變量使用 let 和 const 可以提高可讀性并減少運行時錯誤。ley28資訊網——每日最新資訊28at.com

// Instead ofvar name = 'Lokesh Prajapati';// Useconst name = 'Lokesh Prajapati'; // for constantslet age = 24; // for variables that may change

2. 使用描述性變量名稱

選擇描述其用途或它們所持有的值的變量和函數名稱。ley28資訊網——每日最新資訊28at.com

// Instead ofconst d = new Date();// Useconst currentDate = new Date();

3. 使用模板文字

模板文字使字符串連接更具可讀性。ley28資訊網——每日最新資訊28at.com

const name = 'Lokesh';console.log(`Hello, ${name}!`); // More readable

4. 解構賦值

解構使得從數組中提取值或從對象中提取屬性變得更加容易。ley28資訊網——每日最新資訊28at.com

const person = { name: 'Lokesh', age: 24 };const { name, age } = person;

5. 默認參數

使用默認參數使您的函數更加健壯。ley28資訊網——每日最新資訊28at.com

function greet(name = 'Guest') {  console.log(`Hello, ${name}!`);}

6. 箭頭函數

箭頭函數提供簡潔的語法并按詞法綁定 this 值。ley28資訊網——每日最新資訊28at.com

const add = (a, b) => a + b;

7. 在異步代碼中使用 Promise 和 Async/Await

Promise 和 async/await 語法使異步代碼更易于閱讀和管理。ley28資訊網——每日最新資訊28at.com

async function fetchData() {  const data = await fetch('https://api.example.com');  return data.json();}

8. 模塊

使用模塊有效地組織和重用您的代碼。ley28資訊網——每日最新資訊28at.com

// math.jsexport const add = (a, b) => a + b;// app.jsimport { add } from './math.js';console.log(add(2, 3));

9. 短路評估

使用短路求值來表達簡潔的條件表達式。ley28資訊網——每日最新資訊28at.com

const greet = name => console.log(name || 'Guest');

10.三元運算符

三元運算符可以簡化 if-else 語句。ley28資訊網——每日最新資訊28at.com

const age = 20;const canVote = age >= 18 ? 'Yes' : 'No';

11. 擴展運算符

擴展運算符允許迭代器在需要 0+ 參數的地方進行擴展。ley28資訊網——每日最新資訊28at.com

const nums = [1, 2, 3];const newNums = [...nums, 4, 5];

12. 其余參數

剩余參數允許函數接受不定數量的參數作為數組。ley28資訊網——每日最新資訊28at.com

function sum(...nums) {  return nums.reduce((acc, curr) => acc + curr, 0);}

13. Chain Promises Wisely

Chain 承諾避免“回調地獄”并保持代碼整潔。ley28資訊網——每日最新資訊28at.com

fetchData()  .then(data => processData(data))  .then(result => displayData(result))  .catch(error => console.error(error));

14.使用數組（Array)和對象(Object）方法

利用數組和對象的內置方法來獲得更簡潔和描述性的代碼。ley28資訊網——每日最新資訊28at.com

const numbers = [1, 2, 3, 4, 5];const doubled = numbers.map(number => number * 2);

15. 提前返回

使用提前返回來避免深層嵌套并使您的函數更加清晰。ley28資訊網——每日最新資訊28at.com

function processUser(user) {  if (!user) return;  // Process user}

16.避免全局變量

盡量減少全局變量的使用，以減少潛在的沖突和錯誤。ley28資訊網——每日最新資訊28at.com

17. 明智地評論

注釋應該解釋“為什么”要做某事，而不是“正在做什么”，因為代碼本身對于后者應該是不言自明的。好的注釋可以防止誤解，并為將來閱讀您代碼的任何人（包括您自己）節省時間。ley28資訊網——每日最新資訊28at.com

// Bad: The comment is unnecessary as the code is self-explanatory// Increment the counter by onecounter++;// Good: The comment provides context that the code cannot// We increment the counter here because the user has opened a new sessioncounter++;// Bad: Comment restates the code// Check if the user is logged inif (user.isLoggedIn) {  // ...}// Good: Explains why the condition is important// Check if the user is logged in because only logged-in users have access to premium featuresif (user.isLoggedIn) {  // Code to provide access to premium features}

18. 一致的編碼風格

采用一致的編碼風格或遵循風格指南（如 Airbnb 的 JavaScript 風格指南）以保持可讀性。命名、間距和語法的一致性將使您的代碼更易于遵循和維護。ley28資訊網——每日最新資訊28at.com

// Bad: inconsistent spacing and namingfunction calculatevalue(a,b){ const total=a+breturn total;}// Good: consistent naming and spacing, following a common style guidefunction calculateValue(a, b) {  const total = a + b;  return total;}

19. 保持職能小而集中

每個功能應該做一件事，并且做好。小型、集中的函數更容易測試和調試。ley28資訊網——每日最新資訊28at.com

// Bad: doing too much in one functionfunction handleUserData(user) {  if (user.age < 18) {    console.log('User is a minor');  } else {    console.log('User is an adult');  }  // Additional unrelated tasks...}// Good: breaking down into smaller, focused functionsfunction logUserAgeCategory(age) {  const category = age < 18 ? 'minor' : 'adult';  console.log(`User is a ${category}`);}

20. 模塊化你的代碼

將您的代碼分解為模塊或組件。這不僅使其更易于管理，而且增強了可重用性。ley28資訊網——每日最新資訊28at.com

// userValidation.jsexport function isValidUser(user) {  // Validation logic...}// app.jsimport { isValidUser } from './userValidation.js';if (isValidUser(user)) {  // Proceed...}

21. 避免使用幻數

用命名常量替換幻數，使代碼更具可讀性和可維護性。ley28資訊網——每日最新資訊28at.com

const MAX_USERS = 10;// Instead ofif (users.length > 10) {  // Do something}// Useif (users.length > MAX_USERS) {  // Do something}

22.簡化條件表達式

為了清晰起見，將復雜的條件分解為變量或更小的函數。ley28資訊網——每日最新資訊28at.com

const isEligibleForDiscount = (user) => user.age > 65 || user.memberStatus === 'VIP';if (isEligibleForDiscount(user)) {  // Apply discount}

23. 謹慎使用注釋

代碼應該盡可能不言自明。使用注釋來解釋“為什么”而不是“什么”。ley28資訊網——每日最新資訊28at.com

// Bad: unnecessary comment// adds one to the numberconst increment = (number) => number + 1;// Good: comment explaining why// We add 1 to include the last day of the rangeconst inclusiveEnd = (start, end) => end - start + 1;

24. 更喜歡組合而不是繼承

組合提供了更大的靈活性，并降低了與深層繼承層次結構相關的復雜性。ley28資訊網——每日最新資訊28at.com

const canEat = {  eat: function() {    console.log('Eating');  }};// Compositionconst person = Object.assign({}, canEat);person.eat(); // Eating

25. 封裝代碼塊

封裝處理特定任務的代碼部分。這提高了可讀性和可重用性。ley28資訊網——每日最新資訊28at.com

function processOrder(order) {  const validateOrder = (order) => {    // Validation logic  };

26. 了解最新功能

JavaScript 不斷發展。及時了解最新功能可以幫助您編寫更高效、更簡潔的代碼。ley28資訊網——每日最新資訊28at.com

// Old way: callbacksfs.readFile(filePath, function(err, data) {  if (err) throw err;  console.log(data);});// New way: async/awaitasync function readFileAsync(filePath) {  try {    const data = await fs.promises.readFile(filePath);    console.log(data);  } catch (err) {    console.error(err);  }}

總結

接受這些技巧不僅可以提高您的 JavaScript 編碼技能，還可以使您的代碼庫更易于維護且使用起來更愉快。請記住，編寫干凈代碼的目標不僅僅是遵守規則，而是讓您的代碼盡可能清晰易懂，讓其他人（包括未來的您）可以理解。ley28資訊網——每日最新資訊28at.com

本文鏈接：http://www.tebozhan.com/showinfo-26-82359-0.html26 個寫高效干凈JavaScript 的小技巧

聲明：本網頁內容旨在傳播知識，若有侵權等問題請及時與本網聯系，我們將在第一時間刪除處理。郵件：2376512515@qq.com

上一篇： 聊聊2024最活躍的前端框架是哪個？Vue、React、Angular、Svelte、Ember？

下一篇： 您必須了解的 21 個 HTML 技巧