歡迎使用我們精選的 JavaScript 技巧集合，它將幫助您優化程式碼、使其更具可讀性並節省您的時間。

讓我們深入研究 JavaScript 的功能和超越傳統的技巧，並發現這種強大的程式語言的全部潛力。

1. 使用!!轉換為布林值

使用雙重否定快速將任何值轉換為布林值。

        let truthyValue = !!1; // true
        let falsyValue = !!0; // false

2. 預設功能參數

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

        function greet(name = "Guest") {
            return `Hello, ${name}!`;
        }

3. 短 if-else 的三元運算符

if-else語句的簡寫。

        let price = 100;
        let message = price > 50 ? "Expensive" : "Cheap";

4. 動態字串的範本文字

使用模板文字在字串中嵌入表達式。

        let item = "coffee";
        let price = 15;
        console.log(`One ${item} costs $${price}.`);

5. 解構賦值

輕鬆從物件或陣列中提取屬性。

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

6. 用於陣列和物件克隆的擴展運算符

克隆陣列或物件而不引用原始陣列或物件。

        let originalArray = [1, 2, 3];
        let clonedArray = [...originalArray];

7. 短路評估

使用邏輯運算子進行條件執行。

        let isValid = true;
        isValid && console.log("Valid!");

8. 可選連結 (?.)

如果引用為nullish則可以安全地存取巢狀物件屬性，而不會出現錯誤。

        let user = {name: "John", address: {city: "New York"}};
        console.log(user?.address?.city); // "New York"

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

使用??為null或undefined提供預設值。

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

10. 使用map 、 filter和reduce進行陣列操作

無需傳統循環即可處理陣列的優雅方法。

        // Map
        let numbers = [1, 2, 3, 4];
        let doubled = numbers.map(x => x * 2);

        // Filter
        const evens = numbers.filter(x => x % 2 === 0);

        // Reduce
        const sum = numbers.reduce((accumulator, currentValue) => accumulator + currentValue, 0);

11.標記模板文字

使用模板文字進行函數呼叫以進行自訂字串處理。

        function highlight(strings, ...values) {
            return strings.reduce((prev, current, i) => `${prev}${current}${values[i] || ''}`, '');
        }
        let price = 10;
        console.log(highlight`The price is ${price} dollars.`);

12.使用Object.entries()和Object.fromEntries()

將物件轉換為陣列並返回以方便操作。

        let person = {name: "Alice", age: 25};
        let entries = Object.entries(person);
        let newPerson = Object.fromEntries(entries);

13. 唯一元素的集合物件

使用 Set 儲存任何類型的唯一值。

        let numbers = [1, 1, 2, 3, 4, 4];
        let uniqueNumbers = [...new Set(numbers)];

14. 物件中的動態屬性名稱

在物件文字表示法中使用方括號來建立動態屬性名稱。

        let dynamicKey = 'name';
        let person = {[dynamicKey]: "Alice"};

15. 使用bind()進行函數柯里化

建立一個新函數，在呼叫時將其 this 關鍵字設定為提供的值。

        function multiply(a, b) {
            return a * b;
        }
        let double = multiply.bind(null, 2);
        console.log(double(5)); // 10

16. 使用 Array.from() 從類別陣列物件建立陣列

將類似陣列或可迭代的物件轉換為真正的陣列。

        let nodeList = document.querySelectorAll('div');
        let nodeArray = Array.from(nodeList);

17. 可迭代物件的 for...of 循環

直接迭代可迭代物件（包括陣列、映射、集合等）。

        for (let value of ['a', 'b', 'c']) {
            console.log(value);
        }

18. 使用 Promise.all() 實作並發 Promise

同時執行多個 Promise 並等待所有的都解決。

        let promises = [fetch(url1), fetch(url2)];
        Promise.all(promises)
        .then(responses => console.log('All done'));

19. 函數參數的剩餘參數

將任意數量的參數捕獲到陣列中。

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

20. 用於性能優化的記憶

儲存函數結果以避免冗餘處理。

        const memoize = (fn) => {
            const cache = {};
            return (...args) => {
                let n = args[0];  // assuming single argument for simplicity
                if (n in cache) {
                    console.log('Fetching from cache');
                    return cache[n];
                }
                else {
                    console.log('Calculating result');
                    let result = fn(n);
                    cache[n] = result;
                    return result;
                }
            };
        };

21. 使用 ^ 交換值

使用 XOR 以位元運算子交換兩個變數的值，無需使用臨時變數。

        let a = 1, b = 2;
        a ^= b; b ^= a; a ^= b; // a = 2, b = 1

22. 使用 flat() 展平陣列

使用flat()方法輕鬆展平巢狀陣列，並將展平深度作為可選參數。

        let nestedArray = [1, [2, [3, [4]]]];
        let flatArray = nestedArray.flat(Infinity);

23. 用一元加法轉換為數字

使用一元加運算子快速將字串或其他值轉換為數字。

        let str = "123";
        let num = +str; // 123 as a number

24. HTML 片段的模板字串

使用模板字串建立 HTML 片段，使動態 HTML 生成更加清晰。

        let items = ['apple', 'orange', 'banana'];
        let html = `<ul>${items.map(item => `<li>${item}</li>`).join('')}</ul>`;

25. 使用 Object.assign() 合併物件

將多個來源物件合併到一個目標物件中，有效地組合它們的屬性。

        let obj1 = { a: 1 }, obj2 = { b: 2 };
        let merged = Object.assign({}, obj1, obj2);

使用符合人體工學的滑鼠優化您的編程設置，專為舒適和長時間的編碼會話而定制。

26. 預設值短路

處理潛在的未定義或空變數時，使用邏輯運算子指派預設值。

        let options = userOptions || defaultOptions;

27. 使用括號表示法動態存取物件屬性

使用括號表示法動態存取物件的屬性，當屬性名稱儲存在變數中時非常有用。

        let property = "name";
        let value = person[property]; // Equivalent to person.name

28. 使用 Array.includes() 進行存在檢查

使用includes() 檢查陣列是否包含某個值，它是indexOf 的更清晰的替代方法。

        if (myArray.includes("value")) {
            // Do something
        }

29. Function.prototype.bind() 的強大功能

將函數綁定到上下文（此值）並部分套用參數，以建立更多可重複使用和模組化的程式碼。

        const greet = function(greeting, punctuation) {
            return `${greeting}, ${this.name}${punctuation}`;
        };
        const greetJohn = greet.bind({name: 'John'}, 'Hello');
        console.log(greetJohn('!')); // "Hello, John!"

30.防止物件修改

使用Object.freeze()防止物件進行修改，使其不可變。對於更深層的不變性，請考慮更徹底地強制不變性的函式庫。

        let obj = { name: "Immutable" };
        Object.freeze(obj);
        obj.name = "Mutable"; // Fails silently in non-strict mode

我希望這些 JavaScript 技巧為您提供如何進行JavaScript 程式設計的新視角。

從利用模板文字的簡潔功能到掌握map 、 filter和reduce的效率，這些 JavaScript 技巧將豐富您的開發工作流程並激發您的下一個專案。

讓這些 JavaScript 技巧不僅可以完善您目前的專案，還可以在您的程式設計之旅中激發未來創新的靈感。

支持我們的技術見解

注意：此頁面上的某些連結可能是附屬連結。如果您透過這些連結進行購買，我可能會賺取少量佣金，而無需您支付額外費用。感謝您的支持！

原文出處：https://dev.to/mmainulhasan/30-javascript-tricky-hacks-gfc