11 cách viết tắt JavaScript và TypeScript cần biết để mã hóa hiệu quả

JavaScript và TypeScript là những ngôn ngữ lập trình rất phổ biến trong lĩnh vực phát triển web. Cả hai đều có bộ tính năng mở rộng và nhiều lối tắt cú pháp góp phần đáng kể vào việc cải thiện hiệu quả viết mã.

Tìm hiểu cách thắt chặt mã của bạn và tận dụng tối đa các ngôn ngữ này bằng một số phím tắt hữu ích.

1. Toán tử bậc ba

Toán tử bậc ba cung cấp một cú pháp ngắn gọn và hiệu quả để diễn đạt các câu điều kiện. Nó có ba phần: một điều kiện, một biểu thức để chạy nếu điều kiện đánh giá là đúng và một biểu thức để chạy nếu nó sai.

Toán tử này tỏ ra đặc biệt hữu ích khi đưa ra quyết định dựa trên các điều kiện và gán các giá trị khác nhau tương ứng.

Hãy xem xét ví dụ sau:

 const age = 20;
const ageType = age >= 18 ? "Adult" : "Child";
console.log(ageType);  

Ví dụ này sử dụng toán tử bậc ba để kiểm tra xem biến tuổi là lớn hơn hoặc bằng 18. Nếu có, mã sẽ gán giá trị người lớn đến biến loại tuổinếu không nó sẽ gán giá trị “Con”.

2. Chữ mẫu

Văn bản mẫu cung cấp một cách mạnh mẽ và hiệu quả để định dạng các chuỗi JavaScript và kết hợp các biến hoặc biểu thức bên trong chúng. Không giống như cách nối chuỗi truyền thống sử dụng dấu ngoặc đơn hoặc dấu ngoặc kép, mẫu chữ sử dụng dấu gạch ngược (`).

Cú pháp độc đáo này cung cấp một số lợi thế khi làm việc với các chuỗi. Hãy xem xét ví dụ sau minh họa cách sử dụng chữ mẫu:

 const name = "Alice";
const greeting = `Hello, ${name}!`;
console.log(greeting);  

Ví dụ bao gồm các tên biến trong mẫu chữ bằng cách sử dụng ${}. Điều này cho phép bạn dễ dàng xây dựng các chuỗi động.

3. Toán tử hợp nhất Nullish

Toán tử kết hợp nullish (??) cung cấp một cách thuận tiện để gán các giá trị mặc định khi một biến là vô giá trị hoặc không xác định. Nó trả về toán hạng bên phải nếu toán hạng bên trái là vô giá trị hoặc không xác định.

Hãy xem xét ví dụ sau:

 const username = null;
const displayName = username ?? "Guest";
console.log(displayName);  

Trong ví dụ này, vì biến tên tài khoản là vô giá trịtoán tử kết hợp nullish gán giá trị mặc định Khách mời đến biến tên hiển thị.

4. Đánh giá ngắn mạch

Đánh giá ngắn mạch cho phép bạn viết các biểu thức điều kiện ngắn gọn bằng cách sử dụng các toán tử logic như && Và ||. Nó lợi dụng thực tế là một toán tử logic sẽ ngừng đánh giá các biểu thức ngay khi nó có thể xác định kết quả.

Hãy xem xét ví dụ sau:

 const name = "John";
const greeting = name && `Hello, ${name}`;
console.log(greeting);  

Ví dụ này sẽ chỉ đánh giá biểu thức `Xin chào, ${name}` nếu biến tên có giá trị trung thực. Nếu không, nó sẽ đoản mạch và gán giá trị của tên chính nó vào biến Lời chào.

5. Tốc ký gán thuộc tính đối tượng

Khi tạo các đối tượng, bạn có tùy chọn sử dụng ký hiệu tốc ký gán các biến làm thuộc tính có cùng tên.

Ký hiệu tốc ký này giúp loại bỏ nhu cầu nêu thừa cả tên thuộc tính và tên biến, dẫn đến mã sạch hơn và ngắn gọn hơn.

Hãy xem xét ví dụ sau:

 const firstName = "John";
const lastName = "Doe";
const person = { firstName, lastName };
console.log(person);  

Ví dụ này gán các thuộc tính tên đầu tiên Và họ sử dụng ký hiệu tốc ký.

6. Chuỗi tùy chọn

Chuỗi tùy chọn (?.) cho phép bạn truy cập các thuộc tính lồng nhau của một đối tượng mà không phải lo lắng về giá trị null hoặc giá trị không xác định trung gian. Nếu một thuộc tính trong chuỗi là null hoặc không xác định, biểu thức sẽ đoản mạch và trả về không xác định.

Hãy xem xét ví dụ sau:

 const user = { name: "Alice", address: { city: "New York", country: "USA" }};
const country = user.address?.country;
console.log(country);  

Trong ví dụ trên, toán tử chuỗi tùy chọn đảm bảo rằng mã không đưa ra lỗi nếu Địa chỉ tài sản hoặc quốc gia tài sản bị thiếu.

7. Phá hủy đối tượng

Phá hủy đối tượng là một tính năng mạnh mẽ trong JavaScript và TypeScript cho phép bạn trích xuất các thuộc tính từ các đối tượng và gán chúng cho các biến bằng cú pháp ngắn gọn.

Cách tiếp cận này đơn giản hóa quá trình truy cập và thao tác các thuộc tính đối tượng. Chúng ta hãy xem xét kỹ hơn cách hoạt động của tính năng hủy đối tượng với một ví dụ:

 const user = { name: "John", age: 30 };
const { name, age } = user;
console.log(name, age);  

Ví dụ này trích xuất các biến tên Và tuổi từ người dùng đối tượng thông qua phá hủy đối tượng.

8. Toán tử lây lan

Toán tử trải rộng (…) cho phép bạn mở rộng các phần tử của một lần lặp, chẳng hạn như một mảng hoặc đối tượng, thành các phần tử riêng lẻ. Nó rất hữu ích để kết hợp các mảng hoặc tạo các bản sao nông của chúng.

Hãy xem xét ví dụ sau:

 const numbers = [1, 2, 3];
const newNumbers = [...numbers, 4, 5];
console.log(newNumbers);  

Trong ví dụ trên, toán tử trải rộng mở rộng con số mảng thành các phần tử riêng lẻ, sau đó được kết hợp với 4 Và 5 để tạo một mảng mới, số mới.

9. Tốc ký vòng lặp đối tượng

Khi lặp qua các đối tượng, bạn có thể sử dụng tại vòng lặp kết hợp với phá hủy đối tượng để thuận tiện lặp lại các thuộc tính đối tượng.

Hãy xem xét ví dụ này:

 const user = { name: "John", age: 30 };
for (const [key, value] of Object.entries(user)) { 
    console.log(`${key}: ${value}`);
} 

Trong ví dụ trên, Object.entries(người dùng) trả về một mảng các cặp khóa-giá trị, mỗi lần lặp lại sau đó sẽ hủy cấu trúc thành các biến chìa khóa Và giá trị.

10. Tốc ký Array.indexOf Sử dụng Toán tử Bitwise

Bạn có thể thay thế các cuộc gọi đến Mảng.indexOf phương pháp với tốc ký sử dụng toán tử bitwise ~ để kiểm tra xem một phần tử có tồn tại trong một mảng hay không. Tốc ký trả về chỉ mục của phần tử nếu tìm thấy hoặc -1 nếu không tìm thấy.

Hãy xem xét ví dụ sau:

 const numbers = [1, 2, 3];
const index = ~numbers.indexOf(2);
console.log(index);  

Trong ví dụ trên, ~numbers.indexOf(2) lợi nhuận -2 bởi vì 2 đang ở chỉ mục 1và toán tử bitwise phủ định chỉ mục.

11. Truyền giá trị sang Boolean với !!

Để chuyển đổi rõ ràng một giá trị thành boolean, bạn có thể sử dụng toán tử phủ định kép (!!). Nó chuyển đổi một cách hiệu quả một giá trị trung thực thành ĐÚNG VẬY và một giá trị giả để SAI.

Hãy xem xét ví dụ sau:

 const value1 = "Hello";
const value2 = "";
console.log(!!value1); 
console.log(!!value2);  

Trong ví dụ trên, !!giá trị1 lợi nhuận ĐÚNG VẬY bởi vì chuỗi Xin chào là sự thật, trong khi !!giá trị2 lợi nhuận SAI bởi vì chuỗi rỗng là sai.

Mở khóa mã hiệu quả và dễ đọc

Bằng cách sử dụng các tốc ký này trong JavaScript và TypeScript, bạn có thể nâng cao hiệu quả viết mã của mình và tạo ra mã ngắn gọn và dễ đọc hơn. Cho dù đó là sử dụng toán tử bậc ba, đánh giá ngắn mạch hay tận dụng sức mạnh của các mẫu chữ, các tốc ký này đều cung cấp các công cụ có giá trị để viết mã hiệu quả.

Ngoài ra, tốc ký gán thuộc tính đối tượng, chuỗi tùy chọn và hủy đối tượng đơn giản hóa làm việc với các đối tượng, trong khi toán tử trải rộng và tốc ký mảng cho phép thao tác mảng hiệu quả. Nắm vững những cách viết tắt này sẽ giúp bạn trở thành nhà phát triển JavaScript và TypeScript năng suất và hiệu quả hơn.