Một số thủ thuật JavaScript hữu ích

Cũng giống như những ngôn ngữ lập trình khác, JavaScript sở hữu nhiều thủ thuật hữu ích để việc thực hiện các task trở nên dễ dàng hơn. Hãy cùng Tự Học Lập Trình điểm qua và note lại mình những thủ thuật cần thiết dành cho công việc của bạn ngay nhé!

Chuyển đổi kiểu dữ liệu sang number sử dụng toán tử +

Đây là một thủ thuật đơn giản, dễ học nhưng công dụng lại vô cùng tuyệt vời. Tuy nhiên, nó chỉ thực hiện trên chuỗi những con số, ngược lại thì đưa về NaN (Not a Number). Bên cạnh đó, chuyển đổi kiểu dữ liệu sang number bằng cách sử dụng toán tử + cùng thao tác với Date để trả về timestamp.

Ví dụ điển hình như sau:

Ngoài ra, thủ thuật này cũng có khả năng chuyển đổi booleans thành số, như:

Nếu trong trường hợp hiểu dấu + là toán tử ghép thay vì toán tử cộng, hãy sử dụng hai dấu ngã (~ ~) để thay vào đó.

Ở đây, nó còn được gọi là toán tử "bitwise NOT operator", là toán tử tương đương với -n - 1, ví dụ, ~ 20 bằng -21. 

Tuy nhiên, nếu sử dụng liền kề hai dấu ngã, một số hoạt động sẽ được khai trừ, bởi vì - (- n - 1) - 1 = n + 1 - 1 = n. Nói cách khác, ~ - 21 bằng 20. 

Cẩn thận mỗi khi sử dụng typeof, instanceof và constructor

Constructor có thể bị ghi đè, do đây là thuộc tính phía trong của prototype.

Typeof là tên kiểu nguyên thủy của một biến. Nó còn là một toán tử JavaScript dùng để trả về đối tượng. Trong đó, những đối tượng khác như Array, Date... cũng trả về kiểu "object".

Instanceof cho phép kiểm tra hết mọi prototypes. Nó cũng là một toán tử JavaScript, sẽ trả về kết quả đúng chỉ khi tìm thấy hàm, hoặc ngược lại.

Quick Powers

Từ khi xuất hiện ES7, lập trình viên đã có thể ứng dụng toán tử lũy thừa cho các quyền hạn bằng cách viết gọn lại, nhanh hơn so với phương pháp viết Math.pow(2, 3). Nó được đánh giá là một công cụ đơn giản, nhưng lại phải luôn cập nhật để hiển thị toán tử vì thủ thuật này không sở hữu nhiều danh sách.

Tuy nhiên, đừng nhầm lẫn với biểu tượng ^ hay dùng trong biểu thị số mũ, đối với JavaScript đây là toán tử XOR bitwise. 

Trước ES7, shorthand chỉ tồn tại các quyền hạn với cơ sở 2, sử dụng toán tử dịch chuyển trái bitwise.

Object destructuring

Biểu thức này của JavaScript cho phép lập trình viên trích xuất dữ liệu từ mảng, đối tượng... Sau đó chuyển thành biến riêng. Đặc biệt, trong cùng một thời điểm, bạn có thể trích xuất các thuộc tính từ một đối tượng hoặc nhiều mục cùng một mảng.

Hãy xem ví dụ khi chúng ta có một đối tượng người dùng. Nếu bạn muốn lưu trữ tên người dùng trong một biến, bạn phải gán tên lên một biến trên dòng mới. Còn muốn lưu trữ giới tính theo một biến, bạn sẽ thực hiện như sau:

Với Object destructuring, bạn có thể trực tiếp lấy các biến cho thuộc tính của đối tượng thông qua cú pháp sau:

Sử dụng === thay vì ==

Toán tử == (hoặc !=) sẽ tự động gán kiểu khi cần. Trong khi đó, toán tử === (hoặc !==) sẽ không tự động thực hiện bất kỳ chuyển đổi nào. Nó thực hiện so sánh trên giá trị và kiểu của dữ liệu. 

Gỡ lỗi tốt hơn bằng cách sử dụng Developer debugging

Bạn có biết rằng, Debugging không chỉ in ra một loạt các thông điệp tường trình trong bảng điều khiển bằng console.log. Mà đối tượng giao diện điều khiển dùng để phân tích hiệu suất của đoạn mã vô cùng tuyệt vời. Nhưng thật đáng buồn khi hầu hết các Developer ngày nay đều nghĩ rằng, debugging tiêu chuẩn là dùng console.log. 

Bên cạnh đó, đối tượng giao diện điều khiển còn sở hữu nhiều chức năng tuyệt vời như phân tích hiệu suất.  

Trước mã kiểm tra, còn gọi hàm console.time. Nó có một đối số, lấy một chuỗi mô tả những gì đã phân tích. Khi kết thúc mã mà muốn kiểm tra lại, hãy sử dụng hàm console.timeEnd. Sau đó cung cấp chuỗi với tham số đầu tiên. Cuối cùng, hãy dành chút thời gian để chạy mã trong bảng điều khiển. 

Định dạng mã JSON

Mặc dù đã từng tiếp xúc qua JSON.stringify, nhưng bạn có nhận ra nó cũng sở hữu khả năng thụt lề như JSON hay chưa?

Đối với phương thức stringify (), sẽ có hai tham số tùy chọn làm hàm thay thế, để lọc JSON được hiển thị và giá trị không gian.

Đối với giá trị không gian, hãy thử chọn một số nguyên tương ứng với số lượng khoảng trắng bạn muốn hoặc một chuỗi (chẳng hạn như "\ t" để chèn các tab) và nó sẽ giúp đọc dữ liệu JSON và tìm nạp dễ dàng một cách đơn giản.

Sử dụng dấu ";" để kết thúc câu lệnh

Hãy sử dụng dấu ; mỗi khi kết thúc câu lệnh, mặc dù không xuất hiện vấn đề gì. Nhưng nó sẽ góp phần nhỏ trong trình soạn thảo mỗi khi bạn tích hợp thêm tiện ích cho JavaScript.