翻译：分享 5 个很酷的 JavaScript 技巧

本文为翻译，原文地址：dev.to/fourhtyoz/f…

Hello, 大家好

在下面的文章中会介绍 5 个有趣的 JavaScript 小技巧，可以在你的项目中应用起来。初学者和经验丰富的开发人员都可能会在里面看到一些有趣的事情

1、使用防抖函数

这个不必说了，多次出现 😁

防抖函数（Debounce）用于限制函数的执行频率。它通常用于处理频繁触发的事件，例如窗口大小调整、滚动、键盘输入等。

防抖函数的工作原理是：在事件触发后，函数不会立即执行，而是等待一段时间。如果在等待期间再次触发事件，则重新开始计时。只有当等待时间结束且没有再次触发事件时，函数才会执行

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

// 使用示例
window.addEventListener('resize', debounce(() => {
    console.log('Window resized!');
}, 500));

2、创建一个简单的模态框(Modal)

你可以只使用 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 检测程序的性能

可以使用性能 API 来检测代码中不同部分性能表现，这有助于我们快速识别出程序的性能瓶颈

onsole.time("myFunction");

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

myFunction();
console.timeEnd("myFunction"); // 打印 `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."

Have a nice day!🚀

声明🤣🤣

1. 本文英文原文地址：dev.to/fourhtyoz/f… 由我随缘翻译
2. 翻译使用自己十几年英语功底，保证不保证准确
3. 大家天天开心