12 mẹo nhỏ hữu ích cho Javascript

12 mẹo nhỏ hữu ích cho Javascript

AWS Reserved Instance: tiết kiệm 3/4 chi phí cho AWS EC2/RDS
[Book Review] “Tôi tự học” – Nguyễn Duy Cần
Viết mail như 1 người chuyên nghiệp

Trong bài viết này mình sẽ chia sẻ 12 mẹo nhỏ hữu ích cho Javascript. Các mẹo này sẽ giúp bạn giảm kích cỡ source code, tối ưu hoá perfomance cho chương trình.

1. Convert sang kiểu Boolean bằng 2 dấu ! (!!)

Trong nhiều trường hợp ta cần kiểm tra xem 1 biến có tồn tại hay không, hoặc kiểm tra xem biến đó có giá trị hay không. Bạn có thể sử dụng dấu !!, hay ngắn gọn là !!ten_bien để trả về false nếu biến nhận 1 trong các giá trị: 0, null, “”, undefined hoặc NaN, trả về true trong các trường hợp còn lại

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

Trong trường hợp này, nếu giá trị của account.cash lớn hơn Zero, account.hasMoney sẽ trả về true.

2. Convert sang dạng số bằng toán tử +

Đặt dấu + trước 1 chuỗi số ta sẽ có ngay kiểu số của nó, bằng không thì kết quả sẽ là NaN

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

Trong trường hợp là kiểu Date, timestamp sẽ được trả về

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


3. Rút gọn điều kiện

Nếu bạn nghĩ đoạn code dưới đây là hết sức ngắn gọn rồi

if (conected) {  
    login();
}

Thì thật ra bạn có thể rút ngắn hơn nữa bằng toán tử &&

conected && login(); 


Tương tự khi kiểm tra 1 hàm hay thuộc tính có tồn tại trong 1 đối tượng hay không

user && user.login();  

4. Đặt giá trị mặc định với toán tử ||

Hiện tại ES6 đã hỗ trợ giá trị mặc định, tuy nhiên với các trình duyệt cũ bạn có thể giả lập tính năng này bằng cách sử dụng toán tử || với giá trị mặc định là tham số thứ 2. 

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 lại giá trị array.length trong vòng lặp

Mẹo nhỏ này rất đơn giản nhưng có thể cải thiện 1 phần lớn hiệu năng cho chương trình của bạn khi phải xử lý 1 vòng lặp với mảng lớn. Ví dụ, hầu hết mọi người sẽ sử dụng vòng for như dưới đây để duyệt mảng

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

Đoạn code trên sẽ liên tục tính toán lại kích cỡ của mảng trong mỗi lần lặp. Để khắc phục điều này, ta có thể sửa lại đơn giản như sau

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

Hoặc ngắn gọn hơn nữa

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

6. Kiểm tra sự tồn tại của 1 thuộc tính trong 1 đối tượng

Mẹo này rất hữu ích trong trường hợp chương trình của bạn phải chạy trên nhiều trình duyệt khác nhau. Ví dụ như bạn cần viết code để chạy trên IE6, và bạn không chắc hàm document.querySelector()  có hoạt động được không. Bạn có thể dùng cách sau 

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

Đoạn code trên sẽ sử dụng document.getElementById() nếu như querySelector() không tồn tại trong đối tượng document.

7. Lấy giá trị cuối trong mảng

Hàm Array.prototype.slice(begin, end) có khả năng cắt 1 mảng thành 1 mảng nhỏ hơn dựa vào 2 tham số beginend. Cái hay ở chỗ này là nếu bạn đặt giá trị begin là giá trị âm, và không đặt giá trị end thì mảng trả về sẽ được tính từ các phần tử cuối của mảng ban đầu

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 mảng

Bạn có 1 mảng 10 phần tử và muốn có 1 mảng 5 phần tử từ mảng ban đầu: tất cả những gì bạn phải làm là cài đặt lại chiều dài của mảng, array.length = 5.

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. Replace all

Hàm String.replace() có thể dùng để thay thế chuỗi, nhưng mặc định hàm này chỉ thay thế ký tự đầu tiên mà nó tìm thấy. Bạn có thể thêm tham số /g để mô phỏng hàm replaceAll() như sau

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

10. Ghép mảng

Khi bạn muốn ghép 2 mảng lại làm 1, bạn 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];  

Cách thức hoạt động của hàm này là từ 2 mảng cho trước tạo ra 1 mảng mới. Điều này có thể gây lãng phí bộ nhớ khi đầu vào là các mảng lớn. Vì thế, bạn có thể sử dụng hàm Array.push.apply(arr1, arr2): thay vì tạo mới 1 mảng khác, nó sẽ ghép mảng thứ 2 vào mảng thứ 1

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

11. Convert từ NodeList sang mảng

Khi bạn chạy hàm document.querySelectorAll(“p”), kết quả trả về thường là 1 mảng các phần tử DOM, hay còn gọi là NodeList. Với NodeList thì không thể sử dụng các hàm của mảng như sort(), reduce(), map() hay là filter(). Vì thế bạn cần phải convert NodeList sang mảng, 1 cách đơn giản như sau

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 mảng

Để xào (shuffle) 1 mảng mà không cần sử dụng thư viện ngoài nào thì có 1 cách đơn giản như sau

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

 

Tham khảo jscrambler.com

COMMENTS