0
0
Lập trình
Harry Tran
Harry Tran106580903228332612117

10 Thủ Thuật JavaScript Hữu Ích Bạn Nên Biết Sớm Hơn (Phần 2)

Đăng vào 3 tháng trước

• 4 phút đọc

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 Copy
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 Copy
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 Copy
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 Copy
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 Copy
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 Copy
const doubledNumbers = numbers.map(number => number * 2);

Ứng Dụng

  • Trình xử lý sự kiện như sau:
javascript Copy
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

Gợi ý câu hỏi phỏng vấn
Không có dữ liệu

Không có dữ liệu

Bài viết được đề xuất
Bài viết cùng tác giả

Bình luận

Chưa có bình luận nào

Chưa có bình luận nào