15 mẹo JavaScript hữu ích

Bài viết này thu thập một số Mẹo JavaScript phổ biến từ khắp nơi trên web. Tôi đã sử dụng tất cả các mẹo này trong các dự án của mình và giới thiệu chúng ngày hôm nay.

1. Dấu tách số

Để cải thiện khả năng đọc số, bạn có thể sử dụng dấu gạch dưới làm dấu phân cách.

const largeNumber = 1_000_000_000;

console.log(largeNumber); // 1000000000

Nếu bạn muốn thêm một trình lắng nghe sự kiện và chỉ chạy nó một lần, bạn có thể sử dụng tùy chọn một lần.

element.addEventListener('click', () => console.log('I run only once'), {
    once: true
});

Trong console.log(), đặt các đối số trong dấu ngoặc nhọn để bạn có thể thấy cả tên biến và giá trị biến.

const name = "Maxwell";
    console.log({ name });

      
                

                    
                    
                
            

Bạn có thể sử dụng KeyboardEvent.getModifierState()để phát hiện xem Caps Lock có đang bật hay không.

const passwordInput = document.getElementById('password');

passwordInput.addEventListener('keyup', function (event) {
    if (event.getModifierState('CapsLock')) {
        // CapsLock is open
    }
});

Bạn có thể sử dụng Math.min() hoặc Math.max()kết hợp với toán tử mở rộng để tìm giá trị nhỏ nhất hoặc lớn nhất trong một mảng.

const numbers = [5, 7, 1, 4, 9];

console.log(Math.max(...numbers)); // 9
console.log(Math.min(...numbers)); // 1

Bạn có thể sử dụng các giá trị của thuộc tính clientX và clientY thuộc tính của MouseEvent đối tượng để lấy thông tin về tọa độ của vị trí chuột hiện tại.

document.addEventListener('mousemove', (e) => {
    console.log(`Mouse X: ${e.clientX}, Mouse Y: ${e.clientY}`);
});

Bạn có thể sử dụng API Clipboard để tạo chức năng “Sao chép vào Clipboard”.

function copyToClipboard(text) {
    navigator.clipboard.writeText(text);
}

Nếu hàm chỉ được thực thi khi điều kiện đúng, bạn có thể sử dụng tốc ký &&.

// Common writing method
if (condition) {
    doSomething();
}

// Abbreviations
condition && doSomething();

Văn phạm:

console.table(data [, columns]);

• data Cho biết dữ liệu sẽ được hiển thị. Nó phải là một mảng hoặc một đối tượng.
• columns Đại diện cho một mảng chứa tên của các cột.

function Person(firstName, lastName) {
        this.firstName = firstName;
        this.lastName = lastName;
    }

    const p1 = new Person("Mark", "Smith");
    const p2 = new Person("Maxwell", "Siegrist");
    const p3 = new Person("Lucy", "Jones");

    console.table([p1, p2, p3], ["firstName"]);

       
                

                    
                    
                
            

const str = '508';

console.log(+str) // 508;

const numbers = [2, 3, 5, 5, 2];

console.log([...new Set(numbers)]); // [2, 3, 5]

const myArray = [1, undefined, NaN, 2, null, '@maxwell', true, 5, false];

console.log(myArray.filter(Boolean)); // [1, 2, "@maxwell", true, 5]

const myTech = 'JavaScript';
const techs = ['HTML', 'CSS', 'JavaScript'];

// Common writing method
if (myTech === 'HTML' || myTech === 'CSS' || myTech === 'JavaScript') {
    // do something
}

// includes writing method
if (techs.includes(myTech)) {
    // do something 
}

const myArray = [10, 20, 30, 40];
const reducer = (total, currentValue) => total + currentValue;

console.log(myArray.reduce(reducer)); // 100

<div id="user" data-name="Maxwell" data-age="32" data-something="Some Data">
    Hello Maxwell
</div>

<script>
    const user = document.getElementById('user');
  
    console.log(user.dataset); 
    // { name: "Maxwell", age: "32", something: "Some Data" }
  
    console.log(user.dataset.name); // "Maxwell"
    console.log(user.dataset.age); // "32"
    console.log(user.dataset.something); // "Some Data"
</script>

Quan tâm đến việc mở rộng quy mô khởi động phần mềm của bạn ? Kiểm tra mạch .