14 mẹo tối ưu hóa code Javascript tốt nhất mới nhất

Văn Anh Đào

Javascript là một trong những ngôn ngữ lập trình phổ biến nhất hiện hay, nó có mặt trong hầu hết các trang web từ frontend đến backend … bài viết sau đây mình sẽ cung cấp đến các bạn những mẹo nhỏ để tối ưu hóa code Javascript của bạn nhanh hơn,gọn hơn và tối ưu hơn nhé .

Kiểm-tra-kiểu-dữ-liệu-trong-javascript.jpg

1. Chuyển đổi thanh number bằng các sử dụng toán tử +

Với mẹo đơn giản sau đây sẽ giúp bạn chuyển đổi một số dạng chuỗi thành number , mẹo này chỉ áp dụng với các dạng chuỗi như ( “13”,”123”, Date( ),…) nếu không sẽ trả về NaN(Not a number),xem ví dụ dưới đây để áp dụng nhé :

function subNumber(strNumber) {
    return +strNumber;
}

console.log(subNumber("324")); // 324
console.log(subNumber("ACB")); // NaN

// Toán tử + cũng hoạt động với định dạng Date
// Trong trường hợp này nó sẽ trả về timestamp
console.log(+new Date()) // 1461288164385

2. Sử dụng toan tử && để rút ngắn code
Nếu bạn thấy đoạn code sau :

if (conected) {
    login();
}

Để rút ngắn đoạn code trên ta có thể sử dụng kết hợp 1 biến ( sẽ được xác minh ) và một hàm toán tử && :

conected && login();

Tương tự bạn với cách trên bạn có thể kiểm tra một số thuộc tinh hoặc function có tồn tại trong đối tượng nào đó hay không .
VD :

user && user.login();

3. Sử dụng toán tử | | ( or) để thiết đặt giá trị mặc định

Hiện nay ,trong ES6 đã có đối số mặc định . Để mô phỏng tinh năng này trên các trình duyệt cũ , bằng cách đặt giá trị mặc định bằng tham số thứ 2 và sử dụng || ( toán tử OR) , nếu giá trị đầu trả về False thì giá trị tham số thứ 2 sẽ được đặt làm tham số mặc định
Bạn có thể xem ví dụ sau :

function User(name, age) {
    this.name = name || "NIIT";
    this.age = age || 23;
}

var user1 = new User();
console.log(user1.name); // NIIT
console.log(user1.age); // 23

var user2 = new User("Anh", 21);
console.log(user2.name); // Anh
console.log(user2.age); // 21

Bạn có thể thấy ở user1, chúng ta tạo đối tượng nhưng không truyền đối số. Do đó đối tượng này sẽ lấy giá trị mặc định.

4. Cách lấy item cuối cùng trong một mảng bằng Slice

Như các bạn đã biết hàm Array.prototype.slice(begin, end) có tác dụng cắt các mảng khi bạn thiết đặt các đối số index đầu và cuối , những nếu không đắt đối số end thì hàm sẽ tự động cắt từ đối số begin đến cuối mảng . Với việc đặt số âm làm đối số của begin thì sẽ nhận được các phần tử cuối cùng của mảng .
Ví dụ :

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

5. Cắt ngắn mảng với array.length

Bằng cách gán giá trị cho array.length bạn có thể giới hạn số phần từ của mảng đó , hãy xem ví dụ sau đây để hiểu hơn nhé .

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]

6. Cách để hợp nhất mảng

Để hợp nhất 2 mảng với nhau bạn có thể sử dụng hàm array.concat( ) , hàm này có tác dụng tạo ra một mảng mới gồm các phần tử được kế thừa từ 2 mảng mới .
VD :

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

Tuy nhiên với hàm trên sẽ không phù hợp với các mảng lớn , vì nó sẽ tốn nhiều dung lượng do hàm này tạo ra một mảng mới . để tối ưu hóa công việc trên ta có thể dùng Array.push.apply(Array1, Array2) , với cách này thay vì tạo ra một mảng mới thì bạn có thể hợp nhất mảng thứ 2 vào mảng thứ nhất , hãy xem ví dụ sau để hiểu rõ hơn nhé :

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

7. Xáo trộn phần tử của mảng

Để xáo trộn các phần tử mảng mà không sử dụng bất kỳ thư viện bên ngoài nào như Lodash, chỉ cần sử dụng mẹo này:

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

8. Gọi hàm tắt với Switch case

Thay vì sử dụng Switch Case một cách máy móc , chúng ta có lưu thể điều kiện của switch case trong một object với key là giá trị case và value là hàm được gọi.

// Thông thường
switch (data) {
case 1:
test1();
break;
case 2:
test2();
break;
case 3:
test();
break;
// And so on...
}
// Viết lại như thế này
var data = {
1: test1,
2: test2,
3: test
};
data[anything] && data[anything]();

9. Cách rút gọn return

Bạn có thể return trực tiếp mà không cần thông qua lệnh return khi đang sử dụng arrow function

Longhand:
//thông thường
function getArea(diameter) {
return Math.PI * diameter
}
// cú pháp rút gọn
getArea = diameter => (
Math.PI * diameter;
)

10. Repeat String

Thông thường ta thường sử dụng vòng lặp để lặp lại một chuỗi String , nhưng với hàm repeat chúng ta có thể làm điều đó một cách ngắn gọn và đơn giản .

Ví dụ :

//Thông thường
let test = ''; 
for(let i = 0; i < 5; i ++) { 
test += 'test '; 
} 
console.log(str); // test test test test test 
//repeate
'test '.repeat(5);

11. Numeric Separators

Với mẹo này mã nguồn của bạn sẽ dễ phân tích , dễ đọc một số hơn .

let number = 935234567
//new syntax
let number = 935_234_567

12. If condition

Thông thường chúng ta có một loạt các điều kiện || trong một mệnh đề điều kiện thì chúng ta viết như thế này :

if (x === 'abc' || x === 'def' || x === 'ghi' || x ==='jkl') {
//logic
}

Thay vào đó chúng ta có thể lưu chúng trong một mảng và sử dụng Array#includes

if (['abc', 'def', 'ghi', 'jkl'].includes(x)) {
//logic
}

13. Sử dụng this keyword

Khi sử dụng this chúng ta có thể giảm sự phụ thuộc vào các biến toàn cục cũng như closures trong các chuỗi phạm vi cao hơn .

Chúng ta có ví dụ sau :

var Car = Object.create({
    init: function(brand) {
        this.brand = brand;
    },
    do: function(callback) {
        callback.apply(this);
    }
});


var audi = new Car('audi');
audi.do(function() {
    alert(this.brand); // 'audi' is alerted because 'this' was rewired
});

14. Trim HTML

Thời gian tải của một truy vấn và các đối tượng DOM được sửa đổi chủ yếu phụ thuộc vào trang web HTML HTML. Giảm một nửa HTML của một ứng dụng có thể tăng gấp đôi tốc độ DOM. Việc loại bỏ những thứ không cần thiết và các thẻ sẽ tối ưu web site của các bạn hơn.

Kết luận
Sau bài này mình hy vọng với 14 mẹo trên sẽ giúp ích tối ưu code Javascript của bạn tốt hơn , chúc các bạn thanh công !