每個開發人員都應該知道的頂級 JavaScript 技巧-js教程-PHP中文網

無論您是 JavaScript 新手還是已經編碼多年，總有新的技巧和技巧可以讓您的編碼生活更輕鬆。在這篇文章中，我們將深入探討 30 個基本的 JavaScript 技巧，它們不僅可以改進您的程式碼，還可以提高您的工作效率！

1.使用const和let代替var

跟var說再見！使用 const 和 let 有助於防止與作用域相關的問題，並使您的程式碼更具可預測性。

2. 預設功能參數

設定函數參數的預設值以避免未定義的值。

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

登入後複製

3. 箭頭函數讓程式碼更簡潔

箭頭函數提供了更清晰的語法並更直觀地處理此上下文。

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

登入後複製

4. 解構數組和對象

解構簡化了從陣列和物件中提取值的過程。

const [x, y] = [1, 2];
const { name, age } = { name: "John", age: 30 };

登入後複製

5. 用於合併陣列/物件的擴充運算符

擴充語法非常適合複製和合併陣列或物件。

const arr1 = [1, 2];
const arr2 = [...arr1, 3, 4]; // [1, 2, 3, 4]

登入後複製

6. 更簡潔字串的模板文字

對多行字串和變數插值使用反引號。

const name = "Alice";
console.log(`Hello, ${name}!`);

登入後複製

7. 可選連結 (?.)

存取深層嵌套的物件屬性，而不必擔心錯誤。

const user = { address: { street: "Main St" } };
console.log(user?.address?.street); // Main St

登入後複製

8. 空合併運算子 (??)

使用??處理空值（空值或未定義）。

let name = null;
console.log(name ?? "Guest"); // Guest

登入後複製

9. 數組.map()方法

輕鬆轉換數組值。

const numbers = [1, 2, 3];
const doubled = numbers.map(n => n * 2); // [2, 4, 6]

登入後複製

10. 陣列.filter()方法

依條件過濾元素。

const numbers = [1, 2, 3, 4];
const evenNumbers = numbers.filter(n => n % 2 === 0); // [2, 4]

登入後複製

11. 數組.reduce()方法

將陣列縮減為單一值，例如總和或乘積。

const numbers = [1, 2, 3];
const sum = numbers.reduce((total, num) => total + num, 0); // 6

登入後複製

12. 短路評估

使用 && 和 ||用於簡潔的條件邏輯。

const loggedInUser = user && user.name;

登入後複製

13. 立即呼叫函數表達式（IIFE）

函數定義後立即運行。

(function() {
    console.log("This runs immediately!");
})();

登入後複製

14. 記憶以提高表現

儲存函數結果以提高昂貴操作的效能。

const memoize = fn => {
    const cache = {};
    return (...args) => {
        if (cache[args]) return cache[args];
        const result = fn(...args);
        cache[args] = result;
        return result;
    };
};

登入後複製

15. 去抖動和節流

最佳化事件偵聽器，透過限制呼叫函數的頻率來提高效能。

const debounce = (func, delay) => {
    let timeout;
    return (...args) => {
        clearTimeout(timeout);
        timeout = setTimeout(() => func(...args), delay);
    };
};

登入後複製

16. 物件屬性簡寫

定義與變數同名的物件屬性的簡寫。

const name = "Alice";
const user = { name };

登入後複製

17. 物件方法簡寫

對物件方法使用簡寫語法。

const obj = {
    greet() {
        console.log("Hello!");
    }
};

登入後複製

18. 設定超時和設定間隔

使用 setTimeout() 和 setInterval() 控制函數執行時間。

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

登入後複製

19.簡單條件的三元運算符

讓簡單的 if-else 語句更簡潔。

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

登入後複製

20. Object.freeze() 製作不可變對象

防止對物件進行更改。

const [x, y] = [1, 2];
const { name, age } = { name: "John", age: 30 };

登入後複製

21. 物件.keys(), 物件.values(), 物件.entries()

從物件快速檢索鍵、值或鍵值對。

const arr1 = [1, 2];
const arr2 = [...arr1, 3, 4]; // [1, 2, 3, 4]

登入後複製

22. Async/Await 乾淨的非同步程式碼

以更具可讀性的方式處理非同步操作。

const name = "Alice";
console.log(`Hello, ${name}!`);

登入後複製

23. Promise.all() 用於並發非同步任務

並行運行多個 Promise 並等待所有 Promise 解決。

const user = { address: { street: "Main St" } };
console.log(user?.address?.street); // Main St

登入後複製

24. 解構函數參數

直接在函數參數中使用解構以獲得更清晰的程式碼。

let name = null;
console.log(name ?? "Guest"); // Guest

登入後複製

25. 這個的力量

了解它在不同情境（函數、類別、箭頭函數）中的行為。

const numbers = [1, 2, 3];
const doubled = numbers.map(n => n * 2); // [2, 4, 6]

登入後複製

26. 處理非同步循環

循環內的非同步函數需要使用await 仔細處理。

const numbers = [1, 2, 3, 4];
const evenNumbers = numbers.filter(n => n % 2 === 0); // [2, 4]

登入後複製

27. 動態屬性名稱

在物件中使用動態屬性鍵。

const numbers = [1, 2, 3];
const sum = numbers.reduce((total, num) => total + num, 0); // 6

登入後複製

28. 數組 .some() 和 .every() 方法

檢查部分或全部元素是否符合條件。
javascript

const loggedInUser = user && user.name;

登入後複製

29. 命名導出與預設導出

了解模組中命名導出和預設導出之間的差異。

(function() {
    console.log("This runs immediately!");
})();

登入後複製

30. 使用console.table()進行調試

使用 console.table() 以表格格式視覺化物件或陣列。

const memoize = fn => {
    const cache = {};
    return (...args) => {
        if (cache[args]) return cache[args];
        const result = fn(...args);
        cache[args] = result;
        return result;
    };
};

登入後複製