20 bí kíp JavaScript mà mọi lập trình vên đều nên biết
Thứ Hai, 05/08/2024 · 6 phút đọc
JavaScript là một ngôn ngữ mạnh mẽ và linh hoạt, nhưng nếu không hiểu rõ, bạn có thể gặp phải rất nhiều bất ngờ. Dưới đây là 20 bí kíp hữu ích mà mọi lập trình viên JavaScript nên biết để giúp mã nguồn của bạn trở nên sạch sẽ, dễ đọc và hiệu quả hơn.
1. Dùng ===
thay vì ==
===
so sánh cả giá trị và kiểu dữ liệu, giúp tránh lỗi do việc chuyển đổi kiểu ngầm định.
console.log(5 === '5'); // false console.log(5 == '5'); // true
2. Dùng const
và let
thay vì var
var
có phạm vi trong hàm, dễ gây lỗi không mong muốn.const
vàlet
giúp mã nguồn an toàn và dễ hiểu hơn.
3. Phân tách đối tượng (Object Destructuring)
- Phân tách đối tượng giúp bạn dễ dàng và nhanh chóng lấy các thuộc tính của đối tượng.
const user = { name: 'Tuan', age: 25 }; const { name, age } = user;
4. Phân tách mảng (Array Destructuring)
- Phân tách mảng là một cách nhanh chóng để gán giá trị mảng cho các biến.
const [first, second] = [10, 20];
5. Sử dụng Arrow Function
- Arrow function giúp mã nguồn ngắn gọn và dễ đọc hơn, đồng thời cung cấp một
this
cố định từ phạm vi bên ngoài.
const add = (a, b) => a + b;
6. Sử dụng Template Literals
- Template literals cho phép bạn dễ dàng chèn biến vào trong chuỗi.
const name = 'Tuan'; console.log(`Xin chao, ${name}!`);
7. Nullish Coalescing Operator (??
)
- Sử dụng
??
để thiết lập giá trị mặc định khi giá trị lànull
hoặcundefined
.
const value = null; const defaultValue = value ?? 'default';
8. Optional Chaining (?.
)
- Optional chaining giúp tránh lỗi khi truy cập các thuộc tính không tồn tại của đối tượng.
const user = {}; console.log(user?.address?.city); // undefined
9. Sử dụng Default Parameters
- Đặt giá trị mặc định cho tham số giúp hàm xử lý tốt hơn khi thiếu dữ liệu.
function greet(name = 'Guest') { return `Xin chao, ${name}`; }
10. Sử dụng Spread Operator
- Spread operator giúp sao chép và kết hợp các đối tượng hoặc mảng một cách nhanh chóng.
const arr1 = [1, 2]; const arr2 = [...arr1, 3, 4];
11. Sử dụng Rest Parameters
- Rest parameters thu thập các tham số còn lại thành một mảng.
function add(...numbers) { return numbers.reduce((a, b) => a + b); }
12. Chuyển đổi NodeList
thành Mảng với Array.from()
- Dùng
Array.from()
để chuyển mộtNodeList
từ DOM thành mảng.
const elements = Array.from(document.querySelectorAll('p'));
13. Xử lý mã bất đồng bộ với async
/ await
async
vàawait
giúp mã bất đồng bộ dễ đọc hơn so với callback hay chuỗithen
.
async function fetchData() { const response = await fetch('https://api.example.com/data'); const data = await response.json(); }
14. Sử dụng Promise.all
cho nhiều Promise
Promise.all
cho phép bạn thực thi nhiều promise cùng lúc và nhận kết quả khi tất cả hoàn thành.
const [data1, data2] = await Promise.all([fetchData1(), fetchData2()]);
15. Sử dụng Array.map
để xử lý dữ liệu mảng
map()
tạo một mảng mới bằng cách thực hiện một hàm trên mỗi phần tử.
const numbers = [1, 2, 3]; const doubled = numbers.map(num => num * 2);
16. Lọc mảng với Array.filter
filter()
tạo một mảng mới với các phần tử thỏa mãn điều kiện.
const numbers = [1, 2, 3, 4]; const evens = numbers.filter(num => num % 2 === 0);
17. Tính toán dữ liệu với Array.reduce
reduce()
giúp cộng dồn, đếm hoặc xử lý dữ liệu theo logic tùy chỉnh.
const numbers = [1, 2, 3]; const sum = numbers.reduce((acc, num) => acc + num, 0);
18. Sắp xếp mảng với Array.sort
sort()
sắp xếp mảng tại chỗ theo thứ tự tùy chỉnh.
const numbers = [3, 1, 2]; numbers.sort((a, b) => a - b);
19. Xóa phần tử khỏi mảng với splice
hoặc filter
splice()
thay đổi mảng gốc, trong khifilter()
tạo ra một mảng mới mà không thay đổi mảng gốc.
const numbers = [1, 2, 3]; numbers.splice(1, 1); // Xóa phần tử thứ hai const newArray = numbers.filter(num => num !== 2); // Không thay đổi mảng gốc
20. Dùng console.table
để debug dễ dàng hơn
console.table()
giúp hiển thị dữ liệu dễ đọc hơn theo dạng bảng, đặc biệt là với các mảng và đối tượng phức tạp.
const users = [ { name: 'Hoang', age: 25 }, { name: 'Anh', age: 30 } ]; console.table(users);
JavaScript rất phong phú và cung cấp vô số cách để viết mã nguồn sạch sẽ, ngắn gọn và hiệu quả. Hãy thử áp dụng những bí kíp này vào dự án của bạn và xem sự khác biệt trong quá trình phát triển.
Bài viết gốc đăng tại https://viblo.asia/p/20-bi-kip-javascript-ma-moi-lap-trinh-ven-deu-nen-biet-Yym401BAJ91
- Ảnh đại diện bài viết -