7個必備JavaScript優化技巧，CodeGeeX 5秒搞定了！-有解無憂

JavaScript，目前成了使用最廣泛的編程語言，這篇文章給出的是一些 JavaScript 的優化技巧，這些技巧幫助開發者撰寫出更好的代碼，當寫完這些代碼段之后，我突然意識到，所有的這些代碼段，由于它們的常用性，非常適合用AI輔助編程工具CodeGeeX來自動生成，

下載使用——CodeGeeX插件，在VSCode和JetBrains IDEs可以直接免費下載使用，CodeGeeX插件可以自動實作代碼生成，可以逐行為代碼添加注釋，也可以進行不同編程語言之間的代碼翻譯，特別值得點贊的功能“Ask CodeGeeX”，把類似chatGPT一樣的智能問答功能，與開發者編程環境IDE深度融合，開發者可以在IDE中，通過問答對話的方式解決技術問題，

在IDE中使用Ask CodeGeeX功能，使得開發程序中遇到的問題，都可以在IDE中沉浸式解決，不用跳出開發環境尋找解決代碼問題的答案，提升了代碼開發效率，同時，在這個新版本中，通過對話框區域常用命令“explain/解釋代碼”、“comment/生成注釋”、“fixbug/檢查bug”的快捷方式，可以直接操作代碼，實作代碼解釋，逐行添加代碼注釋，嘗試修復代碼片段潛在bug等功能，

“explain/解釋代碼”按鈕，獲得整段代碼解釋

當你撰寫代碼時，希望了解某一段生成的代碼作何解釋？那么你就可以在CodeGeeX插件的代碼生成區域中，選中該段代碼，左側邊欄的對話區會出現浮層，同時展示選中代碼，在對話區通過快捷按鈕：“解釋代碼”，在對話界面中就可以回復出整段的代碼解釋，

“comment/生成注釋”按鈕為代碼逐行添加注釋

同樣，當你希望為一段生成的代碼逐行添加注釋，你就可以在CodeGeeX代碼生成區域，選中該段代碼，側邊欄的對話區會出現浮層，同時展示選中代碼，在對話區通過快捷按鈕：“生成注釋”，在對話界面就可以直接為這段代碼逐行添加注釋，

“fixbug/檢查bug”修復代碼潛在bug

當你撰寫代碼遇到一個錯誤時，在CodeGeeX插件的代碼生成區域中選中該段代碼，左側邊欄的對話區會出現浮層，同時展示選中代碼，在對話區通過快捷按鈕：“檢查bug”，代碼編輯區就可以直接幫你找到這段代碼中的問題并進行錯誤修復，并且對修復代碼的區域做高亮標記，方便進行代碼對照，

Fallback Values：回退值

// Lengthy
let name;
if (user?.name) {
  name = user.name;
} else {
  name = "Anonymous";
}

// Shortly
const name = user?.name ?? "Anonymous";

這個代碼段可以用CodeGeeX插件工具，在你代碼背景關系中自動生成，

Shortly For Switching
Long switch通常使用一個物件來最大化，其中Key為開關，Value為回傳值，

const dayNumber = new Date().getDay();

// Lengthy
let day;
switch (dayNumber) {
  case 0:
    day = "Sunday";
    break;
  case 1:
    day = "Monday";
    break;
  case 2:
    day = "Tuesday";
    break;
  case 3:
    day = "Wednesday";
    break;
  case 4:
    day = "Thursday";
    break;
  case 5:
    day = "Friday";
    break;
  case 6:
    day = "Saturday";
}

// Shortly
const days = [
    "Sunday",
    "Monday",
    "Tuesday",
    "Wednesday",
    "Thursday",
    "Friday",
    "Saturday",
];

// Or
const days = `Sunday,Monday,Tuesday,Wednesday,Thursday,Friday,Saturday`.split(
    ","
);

const day = days[dateNumber];

這個代碼段可以用CodeGeeX插件工具，在你代碼背景關系中自動生成，

Calls To Functions

函式呼叫

// Lengthy
function f1() {
  // ...
}
function f2() {
  // ...
}

// Shorter
condition ? f1() : f2();

這個代碼段可以用CodeGeeX插件工具，在你代碼背景關系中自動生成，

多個字串檢查

通常需要檢查字串是否等于多個值之一，不難但很繁瑣，這里完全可以交給CodeGeeX來生成這段代碼，

// Lenghty
const isVowel = (letter) => {
  return (
    letter === "a" ||
    letter === "e" ||
    letter === "i" ||
    letter === "o" ||
    letter === "u"
  );
};

// Shortly
const isVowel = letter => /[aeiou]/i.test(letter);

For-of 和 For-in 回圈有利于重復陣列或物件，無需手動跟蹤物件鍵的索引，

For-of

const arr = [1, 2, 3, 4, 5];

// Lengthy
for (let i = 0; i < arr.length; i++) {
  const element = arr[i];
  // ...
}

// Shortly
for (const element of arr) {
  // ...
}

For-in

const obj = {
  a: 1,
  b: 2,
  c: 3,
};

// Lengthy
const keys = Object.keys(obj);
for (let i = 0; i < keys.length; i++) {
  const key = keys[i];
  const value = https://www.cnblogs.com/chattech/archive/2023/06/16/obj[key];
  // ...
}

// Shortly
for (const key in obj) {
  const value = obj[key];
  // ...
}

這個代碼段可以用CodeGeeX插件工具，在你代碼背景關系中自動生成，

False Checks

如果要檢查變數是空、未定義、0、假、還是空字串，可以使用邏輯非執行操作，使得驗證變數是否包含有效資料變得簡單，

// Lengthy
const isFalsey = (value) => {
  if (
    value =https://www.cnblogs.com/chattech/archive/2023/06/16/== null ||
    value === undefined ||
    value === 0 ||
    value === false ||
    value === NaN ||
    value ===""
  ) {
    return true;
  }
  return false;
};

// Shortly
const isFalsey = (value) => !value;

這個代碼段可以用CodeGeeX插件工具，在你代碼背景關系中自動生成，

Secondary Operator

JavaScript開發一定遇到過ternary operator，這是撰寫簡潔版if-else陳述句的絕佳方法，你可以用它來撰寫簡潔的代碼，甚至可以連起來檢查多個條件，

// Lengthy
let info;

if (value < minValue) {
  info = "Value is too small";
} else if (value > maxValue) {
  info = "Value is too large";
} else {
  info = "Value is in range";
}

// Shortly
const info =
  value < minValue
    ? "Value is too small"
    : value > maxValue ? "Value is too large" : "Value is in range";

本文由博客一文多發平臺 OpenWrite 發布！

轉載請註明出處，本文鏈接：https://www.uj5u.com/qita/555384.html

標籤：其他

上一篇：安全可信 | 首批！天翼云邊緣安全加速平臺AccessOne通過信通院“軟體自研創新能力”專項評估

下一篇：返回列表