12 thủ thuật hữu ích khi sử dụng JavaScript

 

Dưới đây 12 thủ thuật hữu ích khi sử dụng JavaScript mà blog jscrambler.com đã đăng tải mà mình nghĩ khá là hữu ích cho những ai đang tìm hiểu về JavaScript.  Những thủ thuật JavaScript này sẽ giúp bạn giảm lượng code cũng như làm code chạy tối ưu hơn rất nhiều.

 

1. Chuyển đổi kiểu dữ liệu sang boolean sử dụng toán tử !!

Đôi khi chúng ta cần phải kiểm tra một số biến tồn tại hoặc một giá trị hợp lệ hay không. Để xác nhận như vậy, bạn có thể sử dụng !! (toán tử phủ định đôi). Nó sẽ tự động chuyển đổi mọi kiểu dữ liệu về boolean và biến này sẽ trả về false chỉ khi nó có những giá trị như: 0, null, “”, undefined hoặc NaN, ngược lại nó sẽ trả về true. Để hiểu hơn về cách nó hoạt động, hãy xem ví dụ đơn giản sau:

function Account(cash) {  
    this.cash = cash;
    this.hasMoney = !!cash;
}
var account = new Account(100.50);  
console.log(account.cash); // 100.50  
console.log(account.hasMoney); // true
var emptyAccount = new Account(0);  
console.log(emptyAccount.cash); // 0  
console.log(emptyAccount.hasMoney); // false

Lưu ý rằng nếu account.cash có giá trị lớn hơn 0 thì account.hasMoney sẽ có giá trị là true.

 

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

Phương pháp  này chỉ hoạt động với chuỗi những con số, nếu không phải nó sẽ trả về NaN (Not a Number). Xem ví dụ sau:

function toNumber(strNumber) {  
    return +strNumber;
}
console.log(toNumber("1234")); // 1234  
console.log(toNumber("ACB")); // NaN

Đối với Date nó sẽ trả về timestamp:

console.log(+new Date()) // 1461288164385

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

Đối với đoạn code ví dụ sau có thể được rút gọn nó bằng cách kết hợp một biến (sẽ được xác nhận) và một hàm sử dụng && (toán tử AND) ở giữa.

if (connected) {  
    login();
}

Sau khi áp dụng rút gọn

connected && login();

Bạn có thể làm tương tự để kiểm tra nếu một vài thuộc tính hay hàm tồn tại trong object. Ví dụ đoạn code dưới đây:

user && user.login();

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

Ngày nay trong ES6 đã hỗ trợ tham số mặc định. Trong trường hợp 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 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. Xem ví dụ sau:

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

5. Cache array.length trong vòng lặp

Sử dụng vòng lặp for như sau để duyệt qua mảng:

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

Nếu bạn làm việc với các 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 tình trạng delay. Bạn có thể cache array.length trong một biến để dùng nó thay vì gọi array.length trong mỗi lần lặp:

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

Đoạn code trên sau khi được làm gọn

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

 

6. 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 bạn cần kiểm tra nếu một vài thuộc tính tồn tại hay không và nó giúp tránh chạy các hàm hay thuộc tính chưa định nghĩa (undefined). Nếu bạn định viết code chạy trên đa trình duyệt thì bạn cũng có thể sử dụng kỹ thuật này. Ví dụ, hãy tưởng tượng rằng bạn cần viết code mà tương thích với IE6 và bạn muốn sử 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ệt này thì hàm đó không tồn tại, vậy nên để kiểm tra xem hàm này có tồn tại không bạn có thể sử dụng toán tử in, xem ví dụ:

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

 

Trong trường hợp này, nếu không có hàm querySelector trong document, chúng ta có thể sử dụng document.getElementById() thay thế.

7. Lấy phần tử cuối cùng trong mảng

Array.prototype.slice(begin, end) có thể cắt mảng khi bạn đặt tham số begin và end. Nhưng nếu bạn không nhập tham số end, hàm này sẽ tự động đặt giá trị lớn nhất cho mảng. Tôi nghĩ rằng ít người biết được hàm này có thể chấp nhận giá trị âm, và nếu bạn đặt tham số begin là một số âm thì bạn sẽ lấy ra các phần tử cuối cùng từ mảng:

var array = [1, 2, 3, 4, 5, 6];  
console.log(array.slice(-1)); // [6]  
console.log(array.slice(-2)); // [5,6]  
console.log(array.slice(-3)); // [4,5,6]

 

8. Cắt ngắn mảng

Kỹ thuật này có thể khóa kích cỡ mảng, điều này rất hữu ích để xóa một vài phần tử của mảng dựa trên số phần tử mà bạn muốn. Ví dụ, nếu bạn có một mảng với 10 phần tử nhưng bạn chỉ muốn lấy 5 phần tử đầu tiên thì bạn có thể cắt ngắn mảng, làm nó nhỏ hơn bằng cách đặt array.length = 5. Xem ví dụ sau:

var array = [1, 2, 3, 4, 5, 6];  
console.log(array.length); // 6  
array.length = 3;  
console.log(array.length); // 3  
console.log(array); // [1,2,3]

 

9. Thay thế toàn bộ

Hàm String.replace() cho phép sử dụng String và Regex để thay thế chuỗi, nhưng hàm này chỉ thay thế các chuỗi con xuất hiện đầu tiên. Nhưng bạn có thể giả lập một hàm replaceAll() bằng cách sử dụng /g ở cuối Regex:

var string = "john john";  
console.log(string.replace(/hn/, "ana")); // "joana john"  
console.log(string.replace(/hn/g, "ana")); // "joana joana"

 

10. Gộp các mảng

Nếu bạn cần gộp hai mảng thì có thể sử dụng hàm Array.concat():

var array1 = [1, 2, 3];  
var array2 = [4, 5, 6];  
console.log(array1.concat(array2)); // [1,2,3,4,5,6];

Tuy nhiên, hàm này không phải là cách thích hợp nhất để gộp các mảng lớn vì nó sẽ tốn rất nhiều bộ nhớ do tạo ra một mảng mới. Trong trường hợp này, bạn có thể sử dụng Array.push.apply(arr1, arr2). Thay vì tạo ra một mảng mới thì nó sẽ gộp mảng thứ hai vào mảng thứ nhất từ đó giảm việc sử dụng bộ nhớ:

var array1 = [1, 2, 3];  
var array2 = [4, 5, 6];  
console.log(array1.push.apply(array1, array2)); // [1,2,3,4,5,6];

 

11. Chuyển NodeList thành mảng

Nếu bạn chạy hàm document.querySelectorAll(“p”), nó sẽ trả về một mảng chứa các phần tử DOM – NodeList object. Nhưng object này không có toàn bộ các hàm của mảng như: sort(), reduce(), map(), filter(). Trong trường hợp bạn muốn sử dụng các hàm này và nhiều hàm sẵn có khác của mảng, bạn cần chuyển NodeList thành mảng. Để thực hiện kĩ thuật này bạn chỉ cần dùng hàm: [].slice.call(elements)

var elements = document.querySelectorAll("p"); // NodeList  
var arrayElements = [].slice.call(elements); // Now the NodeList is an array  
var arrayElements = Array.from(elements); // This is another way of converting NodeList to Array

 

12. Xáo trộn các phần tử trong mảng

Để xáo trộn các phần tử của mảng mà không cần sử dụng các thư viện riêng như Lodash, bạn chỉ cần sử dụng thủ thuật:

var list = [1, 2, 3];  
console.log(list.sort(function() {  
    return Math.random() - 0.5
})); // [2,1,3]