Nếu bạn tối ưu code JavaScript của mình bằng các thủ thuật này, nó có thể giúp bạn viết code sạch hơn, tiết kiệm tài nguyên và tối ưu hóa thời gian lập trình của bạn.
Theo RedMonk, JavaScript là ngôn ngữ lập trình phổ biến nhất. Hơn nữa, SlashData ước tính rằng khoảng 12,4 triệu lập trình viên đang sử dụng JavaScript, bao gồm cả CoffeeScript và Microsoft’s TypeScript.
Điều này có nghĩa là hàng triệu người đang sử dụng JavaScript hàng ngày để làm việc với tư cách là lập trình viên.
Họ có thể đang làm việc tại các team nhỏ cho đến các doanh nghiệp hàng đầu hoặc làm freelancer thông qua các trang web như UpWork và Freelancer, hoặc thậm chí bắt đầu kinh doanh riêng với nghề lập trình web của họ.
NIIT - ICT Hà Nội có một hướng dẫn JavaScript cơ bản (ĐỦ DÙNG). Tuy nhiên, nếu bạn đã quen thuộc với các nguyên tắc cơ bản và muốn nâng cao độ thông thạo JavaScript của mình, thì đây là 10 Thủ thuật JavaScript bạn nên học và tích hợp vào quá trình code của bạn ngay.
Thủ thuật JS #1: Viết tắt câu điều kiện trong JavaScript
JavaScript cho phép bạn sử dụng một số phím tắt nhất định để làm cho code của bạn dễ nhìn hơn. Trong một số trường hợp đơn giản, bạn có thể sử dụng toán tử logic && và || thay vì if và else.
Hãy xem toán tử && hoạt động thế nào qua ví dụ sau:
// Thay vì
if (x) {
console.log(x);
}
// Thì chúng ta viết tắt như sau:
x && console.log(x);
Còn toán tử || hoạt động như một mệnh đề “hoặc”. Sử dụng toán tử này phức tạp hơn một chút vì nó có thể ngăn ứng dụng thực thi.
Tuy nhiên, để tránh điều này, chúng ta có thể thêm một điều kiện để vượt qua nó.
Ví dụ:
// Thay vì
if (x) {
return x;
} else {
return "Không thấy x ở đâu ợ";
}
// Thì chúng ta viết tắt như sau:
return (x || "Không thấy x ở đâu ợ");
Thủ thuật JS #2: Sử dụng toán tử ~~ để chuyển đổi thành số nguyên
Bạn có thể loại bỏ số thập phân để trả về một số nguyên bằng cách sử dụng math.floor hoặc math.round . Nhưng cách này sẽ chiếm nhiều tài nguyên.
Một cách hiệu quả hơn là sử dụng toán tử ~~
Ví dụ:
// Thay vì sử dụng
math.round(math.random * 50)
// Ta sử dụng toán tử ~~ để làm tròn
~~(math.random * 50)
Bạn cũng có thể sử dụng toán tử ~~ để chuyển đổi bất kỳ thứ gì thành giá trị số.
~~("niithanoi.edu.vn") // 0
~~(NaN) // 0
Thủ thuật JS #3: Thay đổi kích thước hoặc làm trống mảng bằng array.length
Đôi khi bạn cần điều chỉnh kích thước mảng của mình hoặc làm trống nó. Cách hiệu quả nhất để làm điều này là sử dụng array.length.
Ví dụ:
// Ta có một mảng đơn giản
var array = [1, 2, 3, 4, 5, 6];
// Độ dài của mảng hiện tại
console.log(array.length); // Kết quả: 6
// Điều chỉnh độ dài của mảng về 4
array.length = 4;
// Kiểm tra lại độ dài của mảng
console.log(array.length); // Kết quả: 4
// Lúc này thử in ra mảng
console.log(array); // Kết quả: [1, 2, 3, 4]
Bạn cũng có thể sử dụng array.length để xóa tất cả các giá trị khỏi một mảng được chỉ định.
Đoạn code ví dụ:
// Ta có một mảng đơn giản
var array = [1, 2, 3, 4, 5, 6];
// Làm trống mảng với array.length
array.length = 0;
// Độ dài mảng hiện tại là:
console.log(array.length); // Kết quả: 0
// Thử in ra mảng hiện tại:
console.log(array); // Không có gì
Thủ thuật JS #4: Cách hợp nhất mảng mà không gây quá tải cho máy chủ
Khi hợp nhất các mảng, nó có thể gây quá tải cho máy chủ, đặc biệt nếu bạn đang xử lý các tập dữ liệu lớn.
Để giữ mọi thứ đơn giản và duy trì mức hiệu suất, hãy sử dụng các hàm array.concat() và array.push.apply(arr1, arr2).
Việc sử dụng một trong hai hàm này tùy thuộc vào kích thước mảng của bạn.
Hãy xem cách xử lý các mảng nhỏ.
Đoạn code ví dụ:
// Ta có 2 mảng đơn giản
var list1 = [1, 2, 3, 4];
var list2 = [5, 6, 7, 8];
// Hợp nhất mảng và in ra console
console.log(list1.concat(list2));
// Kết quả trả về là một mảng mới
// [1, 2, 3, 4, 5, 6, 7, 8]
Khi sử dụng hàm array.concat() trên các tập dữ liệu lớn hơn, nó sẽ tiêu tốn rất nhiều bộ nhớ trong khi tạo một mảng mới.
Để khắc phục sự sụt giảm hiệu suất, hãy sử dụng array.push.apply(arr1, arr2) để hợp nhất mảng thứ hai vào mảng đầu tiên mà không cần tạo mảng mới.
Đoạn code ví dụ:
// Ta có 2 mảng đơn giản
var list1 = [1, 2, 3, 4];
var list2 = [5, 6, 7, 8];
// Hợp nhất list2 vào list1
list1.push.apply(list1, list2);
// Thử kiểm tra list1 hiện tại
console.log(list1);
// [1, 2, 3, 4, 5, 6, 7, 8]
Thủ thuật JS #5: Cách sử dụng hàm filter với mảng
Khi làm việc với nhiều cột dữ liệu bạn sẽ cần phải lọc theo các đặc điểm để lấy được dữ liệu cần thiết.
Để lọc một mảng trong JavaScript, hãy sử dụng hàm filter()
Đoạn code ví dụ:
const sinhVien = [
{ ten: "Khánh", tuoi: 18 },
{ ten: "Đức", tuoi: 20 },
{ ten: "Thoa", tuoi: 21 },
{ ten: "Hà", tuoi: 18 },
{ ten: "Hương", tuoi: 18 }
]
// Lọc sinh viên có tuổi bằng 18
const sinhVien18Tuoi = sinhVien.filter(sv => sv.tuoi === 18);
// In ra kết quả ở dạng bảng
console.table(sinhVien18Tuoi);
> Tìm hiểu chi tiết hơn về filter() trong JavaScript
Thủ thuật JS #6: Trích xuất giá trị duy nhất
Giả sử bạn có một tập dữ liệu gồm các giá trị lặp lại và bạn cần tạo ra các giá trị duy nhất từ tập hợp này.
Bạn có thể làm như vậy với sự kết hợp của toán tử spread ... và kiểu đối tượng set. Cách tiếp cận này hoạt động với cả từ và số.
Đoạn code ví dụ:
const hangOto = [
'Vinfast',
'BMW',
'Kia',
'Vinfast',
'Vinfast',
'Kia'
];
// Trích xuất giá trị duy nhất
var hangOtoDuyNhat = [...new Set(hangOto)];
// In ra để kiểm tra kết quả
console.log(hangOtoDuyNhat);
> Tìm hiểu chi tiết hơn về toán tử Spread trong JavaScript
Thủ thuật JS #7: Cách viết tắt hàm replace()
Bạn nên làm quen cách sử dụng hàm string.replace(). Tuy nhiên, nó chỉ thay thế một chuỗi bằng một dòng được chỉ định một lần và dừng lại từ đó.
Giả sử bạn có tập dữ liệu lớn hơn và bạn cần nhập hàm này nhiều lần thì sao?
Nó sẽ rất mất công.
Để làm cho công việc của bạn dễ dàng hơn, bạn có thể thêm /g vào cuối regex, để hàm chạy và thay thế tất cả các điều kiện phù hợp mà không dừng lại ở điều kiện đầu tiên.
Ví dụ:
var textMau = "Học lập trình wed để làm wedsite";
// Thay thế 1 lần
console.log(textMau.replace(/wed/, "web"));
// Thay thế tất cả các từ được tìm thấy
console.log(textMau.replace(/wed/g, "web"));
Thủ thuật JS #8: Lưu biến vào bộ nhớ đệm để tối ưu hiệu suất
Khi bạn đang làm việc với các mảng lớn và cần lấy các phần tử theo ID bằng getElementById() hoặc theo tên lớp bằng getElementsByClassName(), thì JavaScript phải chạy qua mảng trên một vòng lặp với mỗi câu lệnh tương tự.
Điều này có thể chiếm rất nhiều tài nguyên của bạn.
Để tránh điều này và tăng hiệu suất, bạn có thể lưu vào bộ nhớ đệm một biến nếu bạn biết mình thường xuyên sử dụng.
Đoạn code ví dụ:
var carSerial = serials.getElementById('serial1234');
carSerial.addClass('cached-serial1234');
Thủ thuật JS #9: Cách kiểm tra xem một đối tượng có giá trị hay không
Khi bạn đang làm việc với nhiều đối tượng, sẽ khó theo dõi xem đối tượng nào chứa giá trị thực và đối tượng nào bạn có thể xóa.
Dưới đây là một thủ thuật nhanh về cách kiểm tra xem một đối tượng trống hay có giá trị bằng hàm Object.keys().
Đoạn code ví dụ:
// Nếu nó trả về 0 thì đối tượng trống
// Nếu không nó sẽ hiển thị số lượng giá trị
Object.keys(objectName).length;
Thủ thuật JS #10: Cách thu nhỏ tệp JavaScript của bạn
Các tệp JS lớn ảnh hưởng đến hiệu suất tải và thời gian phản hồi trang.
Trong khi lập trình của bạn, bạn có thể đã bỏ lại các dòng, nhận xét và code không cần thiết. Tùy thuộc vào kích thước tệp của bạn nó có trở thành một nút thắt cổ chai.
Nhưng đừng lo, có một số công cụ giúp bạn làm sạch code và làm cho các tệp JS nhẹ hơn - hoặc giảm thiểu chúng, theo điều kiện.
Mặc dù việc thu nhỏ tệp JS không phải là mẹo gì cả, nhưng điều này vẫn có lợi cho các lập trình viên khi biết và triển khai.
Một là Google Closure Compiler, phân tích cú pháp JavaScript của bạn, phân tích nó, loại bỏ code chết, viết lại và giảm thiểu code.
Cái thứ hai là Microsoft Ajax Minifier, cho phép bạn cải thiện hiệu suất của ứng dụng web bằng cách giảm kích thước tệp JavaScript của bạn.
Tổng kết
Trên đây là 10 Mẹo JavaScript giúp bạn nâng cấp độ thông thạo JS của mình. Sử dụng 10 Mẹo này một cách phù hợp hi vọng sẽ giúp cho code của bạn sạch hơn, tiết kiệm tài nguyên và thời gian hơn.
Chúc bạn code tốt!
> Nếu kỹ năng Front end của bạn đã đủ dùng, bạn có thể tham khảo khóa học LẬP TRÌNH JAVA WEB hoặc LẬP TRÌNH WEB PHP để bổ sung kiến thức Back end cho mình, hướng tới trình độ Full stack với nhiều cơ hội hơn.
---
HỌC VIỆN ĐÀO TẠO CNTT NIIT - ICT HÀ NỘI
Học Lập trình chất lượng cao (Since 2002). Học thực tế + Tuyển dụng ngay!
Đc: Tầng 3, 25T2, N05, Nguyễn Thị Thập, Cầu Giấy, Hà Nội
SĐT: 02435574074 - 0968051561
Email: hello@niithanoi.edu.vn
Fanpage: https://facebook.com/NIIT.ICT/
#niit #niithanoi #niiticthanoi #hoclaptrinh #khoahoclaptrinh #hoclaptrinhjava #hoclaptrinhphp