JavaScript là một ngôn ngữ lập trình mạnh mẽ và linh hoạt, được sử dụng rộng rãi trong phát triển web. Việc nắm vững một số thủ thuật hay giúp lập trình viên viết mã sạch hơn, hiệu quả hơn và dễ bảo trì hơn. Dưới đây là 20 thủ thuật JavaScript thực tiễn mà bạn nên áp dụng để tối ưu hóa quy trình phát triển phần mềm của mình.
1. Phân rã và Đổi tên Biến Trong Một Bước
Bạn có thể đổi tên biến ngay trong quá trình phân rã đối tượng, giúp xử lý các xung đột tên một cách hiệu quả.
javascript
const user = { name: 'Alice', age: 25 };
const { name: userName, age: userAge } = user;
console.log(userName); // Alice
console.log(userAge); // 25
2. Sử Dụng Chuỗi Tùy Chọn Với Gọi Hàm
Chuỗi tùy chọn giúp bạn bảo đảm rằng hàm tồn tại trước khi gọi nó, ngăn ngừa lỗi khi hàm không được định nghĩa.
javascript
const user = {
getName: () => 'Alice',
};
console.log(user.getName?.()); // Alice
console.log(user.getAge?.()); // undefined
3. Gán Giá Trị Mặc Định Sử Dụng Toán Tử ||=
Thay vì gán giá trị mặc định bằng cách kiểm tra từng trường hợp, bạn có thể sử dụng toán tử gán OR logic (||=).
javascript
let count;
count ||= 10;
console.log(count); // 10
4. Chuyển Đổi NodeList Thành Mảng Với Toán Tử Spread
Sử dụng toán tử spread để chuyển đổi nhanh chóng NodeList thành mảng thực tế để làm việc.
javascript
const divs = document.querySelectorAll('div');
const divArray = [...divs];
console.log(Array.isArray(divArray)); // true
5. Gán Giá Trị Mặc Định Khi Phân Rã Mảng/Đối Tượng
Khi bạn phân rã đối tượng mà một số thuộc tính có thể thiếu, việc gán giá trị mặc định giúp tránh được lỗi undefined.
javascript
const user = { name: 'Alice' };
const { name, age = 25 } = user;
console.log(age); // 25
6. Loại Bỏ Các Giá Trị Falsy Khỏi Mảng
Sử dụng phương thức filter() để loại bỏ những giá trị falsy (như 0, null, undefined, false) khỏi mảng.
javascript
const arr = [0, 'hello', null, 42, false, 'world'];
const filtered = arr.filter(Boolean);
console.log(filtered); // ["hello", 42, "world"]
7. Sắp Xếp Mảng Đối Tượng Theo Thuộc Tính
Để dễ dàng sắp xếp mảng chứa các đối tượng, bạn có thể sử dụng phương thức sort() dựa trên một thuộc tính cụ thể.
javascript
const users = [{ name: 'Alice', age: 25 }, { name: 'Bob', age: 20 }];
users.sort((a, b) => a.age - b.age);
console.log(users); // [{ name: 'Bob', age: 20 }, { name: 'Alice', age: 25 }]
8. Tải Động Module Với Lazy Loading
Khả năng import động giúp bạn chỉ tải các module khi cần thiết, từ đó giảm thời gian tải ban đầu của ứng dụng.
javascript
const loadModule = async () => {
const module = await import('./myModule.js');
module.default(); // Gọi hàm xuất mặc định
};
loadModule();
9. Tham Số Mặc Định Khi Phân Rã Đối Tượng
Khi định nghĩa hàm, bạn có thể áp dụng phân rã và đặt giá trị mặc định cho các thuộc tính để làm cho mã dễ đọc hơn.
javascript
function createUser({ name = 'Guest', age = 18 } = {}) {
console.log(name, age);
}
createUser(); // Guest 18
createUser({ name: 'Alice' }); // Alice 18
10. Sử Dụng Object.assign() Để Sao Chép Nông Đối Tượng
Object.assign() rất tiện lợi trong việc sao chép nông đối tượng mà không làm thay đổi đối tượng gốc.
javascript
const original = { a: 1, b: 2 };
const copy = Object.assign({}, original);
copy.a = 3;
console.log(original.a); // 1 (không thay đổi)
11. Tăng Hiệu Suất Với Ghi Nhớ Hàm
Thủ thuật ghi nhớ (memoization) giúp lưu trữ kết quả của hàm tốn kém dựa trên đối số, rất hữu ích cho các hàm tính toán nặng.
javascript
const memoize = (fn) => {
const cache = {};
return (...args) => {
const key = JSON.stringify(args);
if (!cache[key]) {
cache[key] = fn(...args);
}
return cache[key];
};
};
const slowSquare = (n) => n * n;
const memoizedSquare = memoize(slowSquare);
console.log(memoizedSquare(4)); // 16 (cached on second call)
12. Nhóm Các Mục Mảng Bằng reduce()
Giúp bạn nhóm các mục trong mảng dựa trên một thuộc tính bằng cách sử dụng phương thức reduce().
javascript
const people = [
{ name: 'Alice', role: 'admin' },
{ name: 'Bob', role: 'user' },
{ name: 'Charlie', role: 'admin' },
];
const grouped = people.reduce((acc, person) => {
(acc[person.role] = acc[person.role] || []).push(person);
return acc;
}, {});
console.log(grouped);
// { admin: [{ name: 'Alice' }, { name: 'Charlie' }], user: [{ name: 'Bob' }] }
13. Làm Phẳng Mảng Lồng Nhau Với Array.flat()
Đơn giản hóa việc làm phẳng mảng lồng nhau nhiều cấp bằng Array.flat().
javascript
const nested = [1, [2, [3, [4]]]];
console.log(nested.flat(Infinity)); // [1, 2, 3, 4]
14. Chuyển Đổi Giá Trị Boolean Dễ Dàng
Bạn có thể chuyển đổi giá trị boolean bằng cách sử dụng toán tử NOT (!).
javascript
let isVisible = false;
isVisible = !isVisible;
console.log(isVisible); // true
15. Hợp Nhất Nhiều Mảng Bằng concat()
Sử dụng concat() để kết hợp nhiều mảng trong một câu lệnh duy nhất, đơn giản và dễ hiểu.
javascript
const arr1 = [1, 2];
const arr2 = [3, 4];
const arr3 = [5, 6];
const merged = arr1.concat(arr2, arr3);
console.log(merged); // [1, 2, 3, 4, 5, 6]
16. Sử Dụng for...of Để Lặp Qua Mảng Không Đồng Bộ
Khi lặp qua các promise, sử dụng vòng lặp for...of cùng với await để đảm bảo rằng mỗi promise được giải quyết trước khi tiếp tục.
javascript
const fetchData = async () => {
const urls = ['url1', 'url2'];
for (const url of urls) {
const response = await fetch(url);
console.log(await response.json());
}
};
17. Lấy Phần Tử Cuối Cùng Của Mảng Dễ Dàng
Truy xuất phần tử cuối cùng trong mảng mà không cần biết chiều dài bằng phương thức at().
javascript
const arr = [1, 2, 3, 4];
console.log(arr.at(-1)); // 4
18. Định Dạng Ngày Tháng Với Intl
Intl.DateTimeFormat cung cấp một cách mạnh mẽ để định dạng ngày tháng theo các định dạng locale khác nhau.
javascript
const date = new Date();
const formatted = new Intl.DateTimeFormat('en-GB', {
dateStyle: 'full',
}).format(date);
console.log(formatted); // ví dụ: "Monday, 25 October 2021"
19. Làm Tròn Số Với Math.round() Kết Hợp Template Literals
Trực tiếp định dạng số đã làm tròn với template literals để tạo ra kết quả đẹp mắt.
javascript
const num = 3.14159;
console.log(`${Math.round(num * 100) / 100}`); // 3.14
20. Chuyển Đổi Đối Tượng Giống Mảng Sang Mảng Với Array.from()
Sử dụng Array.from() để chuyển đổi các đối tượng giống mảng, như arguments, thành một mảng thực sự.
javascript
function example() {
const argsArray = Array.from(arguments);
console.log(argsArray);
}
example(1, 2, 3); // [1, 2, 3]
Mỗi thủ thuật trên sẽ giúp bạn cải thiện quy trình làm việc và viết mã hiệu quả hơn. Hãy tích hợp chúng vào công việc hàng ngày để tối ưu hóa mã nguồn và nâng cao năng suất của bạn trong việc phát triển phần mềm. Cảm ơn bạn đã theo dõi bài viết này.
source: viblo