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")); // NaNTrong trường hợp là kiểu Date, timestamp sẽ được trả về
console.log(+new Date()) // 1461288164385
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();
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ố begin và end. 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