五個很酷的 JavaScript 技巧

您好！
下面您將找到 5 個最近的 JavaScript 技巧，您現在就可以開始在專案中使用它們。初學者和經驗豐富的開發人員可能會覺得有趣：

1. 函數呼叫去抖

去抖動是一種限制函數回應滾動等事件而執行的次數的技術。這可以透過確保函數在事件停止後運行設定的時間來提高效能。

function debounce(func, delay) {
    let timeoutId;
    return function(...args) {
        if (timeoutId) {
            clearTimeout(timeoutId);
        }
        timeoutId = setTimeout(() => {
            func.apply(this, args);
        }, delay);
    };
}

// Usage Example
window.addEventListener('resize', debounce(() => {
    console.log('Window resized!');
}, 500));

2. 建立一個簡單的模態

您可以只使用 HTML 和 JavaScript 建立一個簡單的模式對話框。具體方法如下：

<!-- Modal HTML -->
<div id="myModal" style="display:none; position:fixed; top:0; left:0; width:100%; height:100%; background-color:rgba(0,0,0,0.5);">
    <div style="background:#fff; margin: 15% auto; padding: 20px; width: 80%;">
        <span id="closeModal" style="cursor:pointer; float:right;">&times;</span>
        <p>This is a simple modal!</p>
    </div>
</div>

<button id="openModal">Open Modal</button>

<script>
    const modal = document.getElementById('myModal');
    const openBtn = document.getElementById('openModal');
    const closeBtn = document.getElementById('closeModal');

    openBtn.onclick = function() {
        modal.style.display = 'block';
    };

    closeBtn.onclick = function() {
        modal.style.display = 'none';
    };

    window.onclick = function(event) {
        if (event.target === modal) {
            modal.style.display = 'none';
        }
    };
</script>

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

您可以在物件文字中使用計算屬性名稱來建立具有動態鍵的物件。

const key = 'name';
const value = 'John';

const obj = {
    [key]: value,
    age: 30
};

console.log(obj); // { name: 'John', age: 30 }

4. 使用效能 API 偵測效能

您可以使用 Performance API 來衡量程式碼不同部分的效能，這有助於識別瓶頸。

console.time("myFunction");

function myFunction() {
    for (let i = 0; i < 1e6; i++) {
        // Some time-consuming operation
    }
}

myFunction();
console.timeEnd("myFunction"); // Logs the time taken to execute `myFunction`

5. 原型繼承

您可以利用 JavaScript 的原型繼承來建立簡單的類別結構。

function Animal(name) {
    this.name = name;
}

Animal.prototype.speak = function() {
    console.log(`${this.name} makes a noise.`);
};

function Dog(name) {
    Animal.call(this, name); // Call parent constructor
}

// Inheriting from Animal
Dog.prototype = Object.create(Animal.prototype);
Dog.prototype.constructor = Dog;

Dog.prototype.speak = function() {
    console.log(`${this.name} barks.`);
};

const dog = new Dog('Rex');
dog.speak(); // "Rex barks."

希望您今天學到新東西了。

祝你有美好的一天！

以上是五個很酷的 JavaScript 技巧的詳細內容。更多資訊請關注PHP中文網其他相關文章！