https://viblo.asia/

Trong bài viết này mình sẽ chia sẻ một số thủ thuật JavaScript vô cùng hữu ích mà lập trình viên JavaScript cần biết mà mình sưu tầm được.

Câu điều kiện rút gọn

Ta có một đoạn code giống như thế này

if (conected) {  
    login();
}

Và ta có thể viết ngắn gọn hơn như thế này bằng việc kết hợp toán tử &&

conected && login();

Đặt giá trị mặc định sử dụng toán tử ||

Ngày nay trong ES6 đã hỗ trợ tham số mặc định. Nếu bạn muốn giả lập tính năng này trong các trình duyệt cũ thì bạn có thể sử dụng || (toán tử OR) bằng cách chèn các giá trị mặc định như là tham số thứ hai để sử dụng. Nếu tham số đầu tiên trả về false thì tham số thứ hai sẽ được sử dụng như là một giá trị mặc định

function User(name, age) {  
    this.name = name || "Oliver Queen";
    this.age = age || 27;
}
var user1 = new User();  
console.log(user1.name); // Oliver Queen  
console.log(user1.age); // 27
var user2 = new User("Barry Allen", 25);  
console.log(user2.name); // Barry Allen  
console.log(user2.age); // 25

Cache array.length trong vòng lặp

Mẹo này khá đơn giản nhưng có hiệu suất khá lớn. Hầu hết mọi người đều sử dụng vòng lặp for để duyệt mảng sau:

for (var i = 0; i < array.length; i++) {  
    console.log(array[i]);
}

Nếu là mảng nhỏ thì không vấn đề gì cả, nhưng nếu xử lý với mảng lớn thì đoạn code này sẽ tính toán lại kích cỡ của mảng sau mỗi lần lặp và sẽ gây ra chậm chễ. ==> Vì thế bạn có thể đặt array.length trong một biến để dùng thày vì gọi array.length trong mỗi lần lặp.

Nhận diện các thuộc tính trong một object

Thủ thuật này vô cùng hữu ích khi cần kiểm tra một vài thuộc tính có tồn hay không giúp tránh chạy các hàm hay thuộc tính chưa được định nghĩa. Nếu viết code chạy trên đa trình duyệt thì bạn có thể sử dụng thủ thuật này. Ví dụ, bạn cần viết code mà tương thích trên IE6 và bạn muốn dùng document.querySelector() để lấy một vài phần tử bằng ID của chúng. Tuy nhiên, trong trình duyện thì hàm này không tồn tại, vây để kiểm tra xem hàm này có tồn tại hay không thì bạn có thể sử dụng toán tử in

if ('querySelector' in document) {  
    document.querySelector("#id");
} else {
    document.getElementById("id");
}

Nếu hàm querySelector trong document, ta có thể sử dụng hàm document.getElementById() để thay thế.

Dùng === thay cho ==

Trong JavaScript, có thể dùng hai lại toán tử so sánh bằng : ===(!==) và ==(!=). Củ thể hơn là, nếu cả hai toán hạng có cùng kiểu và giá trị thì === sẽ cho kết quả là true trong khi !== sẽ cho kết quả là false. == (!==) sẽ gặp nhiều vấn đề liên quan đến các kiểu toán hạng khác nhau, sẽ có ép giá trị một cách vô ích khi thực thi chuyển đổi kiểu tự đông.

[10] === 10 // is false
[10] == 10 // is true
'10' == 10 // is true
'10' === 10 // is false
[] == 0 // is true
[] === 0 // is false
'' == false // is true but true == "a" is false
'' === false // is false

Chuyển đổi kiểu dữ liệu sang number sử dụng toán tử +

Thủ thuật rất đơn giản và tuyệt vời, nhưng nó chỉ hoạt động với chuỗi những con số, còn ngược lại sẽ trả về NaN

+"1234" .----> 1234
+"ABC" ---> NaN

Dùng switch/case thì vì dùng nhiều if/else

Dùng switch/case sẽ nhanh hơn khi mà chúng ta có nhiều hơn 2 case và chúng có tổ chức code tốt hơn.

Dùng switch/case với các dãy số

Sử dụng switch/case với các dãy số có thể được thực hiện với thủ thuật này:

function getCategory(age) {  
    var category = "";  
    switch (true) {  
        case isNaN(age):  
            category = "not an age";  
            break;  
        case (age >= 50):  
            category = "Old";  
            break;  
        case (age <= 20):  
            category = "Baby";  
            break;  
        default:  
            category = "Young";  
            break;  
    };  
    return category;  
}  
getCategory(5);  // will return "Baby"

Đừng quên dùng từ khóa var khi gán giá trị của biến cho lần đầu tiên

Nếu bạn không khai báo với từ khóa var thì sẽ tự động tạo ra một biến global.

Lấy ngẫu nhiên phần tử của mảng

var items = [12, 548 , 'a' , 2 , 5478 , 'foo' , 8852, , 'Doe' , 2145 , 119];

var  randomItem = items[Math.floor(Math.random() * items.length)];