Giới Thiệu
Tiếp nối phần một của bài viết về các thủ thuật JavaScript, bài viết này sẽ đưa ra thêm những mẹo cực kỳ hữu ích giúp bạn tối ưu hóa và nâng cao hiệu suất trong việc lập trình với JavaScript. Hãy cùng khám phá!
6. Sử Dụng Tagged Template Literals - Tăng Tốc Định Dạng Chuỗi
Vấn đề
Bạn muốn tạo ra các chuỗi có cấu trúc tốt hơn và dễ dàng hơn trong việc định dạng.
Giải pháp cũ
Trước đây, bạn thường phải sử dụng những phương pháp phức tạp để thực hiện điều này, như nối chuỗi hoặc hàm trợ giúp.
Giải pháp mới
Với các chuỗi ký tự mẫu được gắn thẻ, bạn có thể định nghĩa các hàm tùy chỉnh để xử lý những chuỗi này một cách linh hoạt hơn. Ví dụ:
javascript
function highlight(strings, ...values) {
let result = '';
for (let i = 0; i < strings.length; i++) {
result += strings[i];
if (values[i]) {
result += `<span class="highlight">${values[i]}</span>`;
}
}
return result;
}
const name = "Alice";
const message = highlight`Welcome, ${name}!`;
console.log(message); // "Welcome, <span class=\"highlight\">Alice</span>!"Ứng Dụng
- Tạo ngôn ngữ riêng cho từng miền.
- Hỗ trợ quốc tế hóa (i18n).
- Bảo mật dữ liệu người dùng.
7. Sử Dụng Proxy Objects - Kiểm Soát Đối Tượng Tốt Hơn
Vấn đề
Bạn cần kiểm soát các hoạt động của đối tượng như truy cập thuộc tính hoặc gọi hàm.
Giải pháp cũ
Cách cũ thường gặp là sử dụng wrapper functions hoặc sửa đổi prototype, rất dễ dẫn đến lỗi.
Giải pháp mới
Proxy Objects cho phép bạn chặn các hoạt động và tùy chỉnh hành vi của đối tượng mà không cần sửa mã gốc. Ví dụ:
javascript
const user = { name: "Alice", age: 30 };
const userProxy = new Proxy(user, {
set: function (target, property, value) {
if (property === "age" && (value < 0 || value > 120)) {
throw new Error("Invalid age value!");
}
target[property] = value;
return true;
}
});
userProxy.age = 35; // Hoạt động bình thường
userProxy.age = -5; // LỗiỨng Dụng
- Xác thực và vệ sinh dữ liệu.
- Theo dõi thay đổi thuộc tính.
- Tối ưu hóa tải dữ liệu.
8. Áp Dụng reduce() Để Thực Hiện Các Tính Toán Phức Tạp
Vấn đề
Cần kế thừa hoặc tính toán phức tạp hơn, hơn cả việc đơn giản là tìm tổng.
Giải pháp cũ
Bạn phải viết nhiều vòng lặp phức tạp làm mã khó hiểu hơn.
Giải pháp mới
reduce() rất linh hoạt và giúp giảm mã:
javascript
const orders = [
{ product: "Shirt", quantity: 2, price: 15 },
{ product: "Shoes", quantity: 1, price: 50 },
{ product: "Hat", quantity: 3, price: 10 },
];
const totalValue = orders.reduce((accumulator, order) => {
return accumulator + order.quantity * order.price;
}, 0);
console.log(totalValue); // Output: 110Ứng Dụng
- Nhóm dữ liệu theo thuộc tính cụ thể.
- Làm phẳng mảng lồng nhau.
- Tạo danh sách duy nhất từ mảng.
9. Sử Dụng Spread Syntax - Thao Tác Mảng & Đối Tượng Dễ Dàng
Vấn đề
Cần sao chép hoặc kết hợp mảng và đối tượng đơn giản hơn.
Giải pháp cũ
Bạn thường dùng hàm như slice(), concat() hay Object.assign().
Giải pháp mới
Spread syntax (...) giúp bạn làm điều này dễ dàng hơn:
javascript
const numbers1 = [1, 2, 3, 4];
const numbers2 = [5, 6, 7];
const combinedArray = [...numbers1, ...numbers2];Ứng Dụng
- Sửa đổi trạng thái trong React mà không làm mất dữ liệu cũ.
10. Sử Dụng Hàm Arrow - Viết Hàm Ngắn Gọn Hơn
Vấn đề
Cần viết các hàm ngắn cho các trình xử lý sự kiện hay lệnh gọi lại.
Giải pháp cũ
Cần dùng từ khóa function tạo nên mã dài dòng:
javascript
const doubledNumbers = numbers.map(function(number) {
return number * 2;
});Giải pháp mới
Hàm Arrow cho phép viết ngắn gọn hơn:
javascript
const doubledNumbers = numbers.map(number => number * 2);Ứng Dụng
- Trình xử lý sự kiện như sau:
javascript
button.addEventListener("click", () => {
console.log("Button clicked!");
});Kết Luận
Những thủ thuật này sẽ giúp bạn viết mã JavaScript hiệu quả và dễ đọc hơn. Đừng ngần ngại thử nghiệm và khám phá để tìm ra phương pháp tối ưu nhất cho bản thân bạn. Cảm ơn bạn đã theo dõi bài viết của chúng tôi!
source: viblo
