- Aug 8, 2020

Những thủ thuật JavaScript có thể làm bạn bất ngờ

JavaScript là một ngôn ngữ lập trình cực kỳ phổ biến ở thời điểm hiện tại. Cũng giống như bất kỳ ngôn ngữ lập trình nào khác, JavaScript cung cấp rất nhiều cách khác nhau để giải quyết các vấn đề nhất định trong code của bạn. Có nhiều ví dụ về các thủ thuật nhỏ gọn mà bạn có thể bắt đầu sử dụng để giải quyết những vấn đề này hiệu quả hơn.

Hãy tìm hiểu danh sách các thủ thuật sẽ tăng cường kỹ năng JavaScript của bạn nhé:

1. The spread operator

Nếu bạn đã có kinh nghiệm với JavaScript, bạn có thể đã nghe nói về the spread operator và biết nó hữu dụng đến mức nào. Một trong những điều bạn có thể làm với the spread operator là nối nhiều mảng với nhau. Đây là những gì nó trông giống như trong mã:

Lưu ý rằng ngoài rải ở đầu hoặc cuối mảng, bạn còn có thể linh hoạt khi xây dựng mảng mới của mình. Trong ví dụ sau, tôi đã sử dụng the spread operator ở giữa mảng mới.

2. Giá trị duy nhất

Sẽ có lúc bạn cần xóa các giá trị trùng lặp khỏi một mảng. Có thể làm việc này bằng cách lặp lại các giá trị và theo dõi các mục đã lặp lại. Tuy nhiên, điều này nghe có vẻ phức tạp và quá nhiều mã cho một thứ dễ dàng. Có một mẹo đơn giản hơn mà bạn có thể sử dụng để lấy các giá trị duy nhất từ một mảng.

Thủ thuật này hoạt động tương tự đối với các mảng có chứa giá trị chuỗi hoặc thậm chí các giá trị hỗn hợp.

Nguyên nhân cho điều này là các giá trị trong một đối tượng Set chỉ có thể xuất hiện một lần mà điều này có nghĩa là một Bộ chỉ hoạt động với các giá trị duy nhất. Nhờ thủ thuật nhỏ này, chúng ta ép mảng ban đầu thành một Tập hợp và sau đó chuyển đổi nó trở lại một mảng nên các giá trị trùng lặp sẽ được lọc ra.

Nếu bạn không thích hàm Array.from, bạn cũng có thể sử dụng the spread operator. Đây là đoạn mã giống nhau nhưng sử dụng the spread operator:

Ví dụ đầu tiên sẽ hợp lý hơn nếu bạn không có nhiều kinh nghiệm với JavaScript hoặc the spread operator vì nó cụ thể hơn, nhưng nếu bạn đã có kinh nghiệm hthì có thể chọn phương pháp cuối cùng vì nó ngắn gọn.

3. Đếm giá trị

Giả sử chúng ta có một mảng chứa các order giống như sau:

Chúng ta muốn biết tổng số order là bao nhiêu để tổng kết xem mình có bao nhiêu doanh thu thì một cách để làm điều này là sử dụng vòng lặp for.

Mặc dù điều này hiệu quả, nhưng vấn đề của vòng lặp for là nó quá rườm rà. Có một cách thuận tiện để giải quyết vấn đề này là sử dụng ít dòng mã hơn bằng phương thức Reduce.

Phương thức Reduce giảm một mảng thành một giá trị duy nhất và đối số đầu tiên là lệnh gọi lại có hai đối số: bộ tích lũy và giá trị hiện tại. Để có được tổng giá trị của tất cả các đơn đặt hàng, chúng ta có thể sử dụng phương pháp Reduce như chúng tôi đã làm bằng cách thêm tổng số của mỗi đơn đặt hàng vào bộ tích lũy.

Trong ví dụ này, đối số cuối cùng là giá trị ban đầu của bộ tích lũy, giá trị này là 0. Nếu bạn không chỉ định giá trị ban đầu, phần tử đầu tiên trong mảng sẽ được sử dụng làm giá trị ban đầu.

4. Template literals: ký tự mẫu

Mẹo cuối cùng mà chúng ta sẽ tìm hiểu trong bài viết này là về các ký tự mẫu. Các ký tự mẫu cho phép bạn nối các chuỗi thay vì dùng dấu cộng.

Bạn có thể đã nối các chuỗi bằng cách sử dụng dấu cộng, trông giống như sau:

Đây không phải là cách tốt nhất mà bạn có thể nối các chuỗi này. Thay vào đó, có một giải pháp thay thế.

Lưu ý rằng điều này yêu cầu bạn đặt chuỗi của mình bằng dấu gạch ngược ` thay vì dấu ngoặc kép hoặc dấu nháy đơn mà bạn sử dụng khi nối các chuỗi theo cách cũ.

Và bạn có thể làm được nhiều việc hơn với các ký tự mẫu. Khi một ký tự mẫu được mở bằng backtick, bạn chỉ cần nhấn enter để tạo một dòng mới. Không cần ký tự đặc biệt và chuỗi sẽ được hiển thị như cũ: