JS代碼優化技巧有哪些

JavaScript 代碼優化技巧有很多，以下是一些常見的優化技巧：

1. 多條件判斷優化：

   • 使用 includes 方法代替多個 if 語句。

     if (['abc', 'def', 'ghi', 'jkl'].includes(x)) {}
     

2. if…else…語句優化：

   • 直接將條件表達式的結果賦值給變量，避免使用中間變量。

     let test = x > 10;
     

3. 優化空值和 undefined 檢查：

   • 使用空值合并運算符 ??。

     const test2 = test1 ?? "";
     

4. For Each 循環優化：

   • 使用 for...of 循環遍歷數組。

     for (let item of testData) {}
     

5. 條件函數調用優化：

   • 使用三元運算符簡化條件函數調用。

     (test3 === 1 ? test1 : test2)()
     

6. 優化 switch 語句：

   • 使用對象字面量代替 switch 語句。

     const actions = {1: test1, 2: test2, 3: test};
     actions[data] && actions[data]();
     

7. 多行字符串簡寫：

   • 使用模板字面量簡化多行字符串。

     const data = `abc abc abc abc abc abc
     

test test, test test test test`; ```

8. 隱式返回簡寫：

   • 使用箭頭函數簡化函數返回值。

     const getArea = diameter => Math.PI * diameter;
     

9. 查找條件簡寫：

   • 使用對象字面量映射函數調用。

     const types = {test1: test1, test2: test2, test3: test3, test4: test4};
     const func = types[type];
     if (!func) throw new Error('Invalid value ' + type);
     func();
     

10. 使用 Object.entries()：

    • 將對象轉換為鍵值對數組。

      const data = { test1: 'abc', test2: 'cde', test3: 'efg' };
      const arr = Object.entries(data);
      console.log(arr);
      

11. 使用 DocumentFragment：

    • 批量新增 DOM 節點。

      const fragment = document.createDocumentFragment();
      for (let i = 0; i < 10; i++) {
        const div = document.createElement('div');
        div.textContent = 'Element ' + i;
        fragment.appendChild(div);
      }
      document.body.appendChild(fragment);
      

12. 防抖和節流：

    • 減少事件監聽器的觸發次數。

      function debounce(func, wait) {
        let timeout;
        return function(...args) {
          clearTimeout(timeout);
          timeout = setTimeout(() => func.apply(this, args), wait);
        };
      }
      

13. 使用 Web Worker：

    • 在后臺線程中運行 JavaScript 代碼。

      const worker = new Worker('worker.js');
      worker.postMessage({ message: 'Hello' });
      worker.onmessage = function(event) {
        console.log('Message from worker:', event.data);
      };
      

14. 瀏覽器緩存：

    • 使用緩存減少網絡請求。

      fetch('https://example.com/data', { cache: 'reload' });
      

15. 異步加載 JavaScript 腳本：

    • 使用 defer 和 async 屬性。

      <script src="script.js" defer></script>
      <script src="script.js" async></script>
      

16. 刪除未使用的代碼：

    • 使用工具如 Uglify 或 Closure Compiler 刪除未使用的代碼。

      uglifyjs input.js -o output.js -c -m
      

17. 使用解構賦值簡化變量聲明：

    • 簡化多個變量的聲明和初始化。

      const { firstName, lastName } = person;
      

18. 使用模板字面量進行字符串拼接：

    • 簡化字符串拼接。

      const greeting = `Hello, ${name}!`;
      

19. 使用展開運算符進行數組和對象操作：

    • 合并數組和復制對象。

      const combined = [...array1, ...array2];
      const clone = { ...original };
      

20. 使用數組的高階方法簡化循環和數據操作：

    • 遍歷數組并返回新數組。

      const doubled = numbers.map(num => num * 2);
      const evens = numbers.filter(num => num % 2 === 0);
      

21. 使用條件運算符簡化條件判斷：

    • 簡化條件判斷。

      const message = issuccess ? 'operation successful' : 'operation failed';
      

22. 使用對象解構和默認參數簡化函數參數：

    • 簡化函數參數的處理。

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

23. 使用函數式編程概念：

    • 使用純函數和函數組合。

      const multiplyByTwo = value => value * 2;
      const addFive = value => value + 5;
      const result = addFive(multiplyByTwo(3));
      

24. 使用對象字面量簡化對象的創建和定義：

    • 簡化對象的創建和初始化。

      const person = { firstName, lastName, age };
      

25. 使用適當的命名和注釋：

    • 提高代碼可讀性。

      const speed = 10;
      function double(value) { return value * 2; }
      

通過這些優化技巧，可以顯著提高 JavaScript 代碼的性能和可讀性。希望這些技巧對你有所幫助！