JavaScript là một ngôn ngữ mạnh mẽ và linh hoạt. Và việc nắm vững một vài thủ thuật hay ho có thể giúp code của bạn sạch hơn, nhanh hơn và hiệu quả hơn. Dưới đây là 20 mẹo và thủ thuật JavaScript thực tế mà bạn có thể sử dụng trong các ứng dụng thực tế để nâng cao quy trình phát triển 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 trong quá trình phân rã đối tượng, điều này rất hữu ích khi xảy ra xung đột tên.
const user = { name: 'Alice', age: 25 };
const { name: userName, age: userAge } = user;
console.log(userName); // Alice
console.log(userAge); // 25
2. Chuỗi tùy chọn với gọi hàm
Chuỗi tùy chọn có thể được sử dụng với các hàm, đảm bảo hàm tồn tại trước khi được gọi.
const user = { getName: () => 'Alice',
};
console.log(user.getName?.()); // Alice
console.log(user.getAge?.()); // undefined
3. Sử dụng toán tử ||= để gán giá trị mặc định
Toán tử gán OR logic (||=) chỉ gán giá trị nếu biến là null, undefined hoặc giá trị falsey như 0.
let count;
count ||= 10;
console.log(count); // 10
4. Chuyển đổi NodeList thành mảng sử dụng toán tử Spread
Toán tử spread cung cấp một cách nhanh chóng để chuyển đổi NodeList thành mảng.
const divs = document.querySelectorAll('div');
const divArray = [...divs];
console.log(Array.isArray(divArray)); // true
5. Phân rã mảng/đối tượng với giá trị mặc định
Gán giá trị mặc định trong quá trình phân rã để tránh undefined khi thiếu key.
const user = { name: 'Alice' };
const { name, age = 25 } = user;
console.log(age); // 25
6. Xóa các giá trị sai khỏi một mảng
Sử dụng filter() để loại bỏ các giá trị falsy (như 0, null, undefined, false) khỏi mảng.
const arr = [0, 'hello', null, 42, false, 'world'];
const filtered = arr.filter(Boolean);
console.log(filtered); // ["hello", 42, "world"]
7. Sắp xếp các mảng đối tượng theo thuộc tính
Dễ dàng sắp xếp mảng các đối tượng theo một thuộc tính cụ thể.
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. Import động để tải Lazy Loading
Import động cho phép bạn chỉ tải các module khi cần, giảm thời gian tải ban đầu.
const loadModule = async () => { const module = await import('./myModule.js'); module.default(); // Calls the default export function
};
loadModule();
9. Tham số mặc định với Object Destructuring
Khi sử dụng tham số mặc định, bạn cũng có thể phân rã và đặt mặc định cho các thuộc tính cụ thể.
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
Object.assign() rất tiện lợi để sao chép nông các đối tượng mà không làm thay đổi bản gốc.
const original = { a: 1, b: 2 };
const copy = Object.assign({}, original);
copy.a = 3;
console.log(original.a); // 1 (unchanged)
11. Ghi nhớ các hàm để tăng hiệu suất
Memoization lưu trữ kết quả của các lệnh gọi hàm tốn kém dựa trên các đối số, hữu ích cho các hàm tính toán nặng.
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. Sử dụng reduceđể nhóm các mục mảng
reduce() có thể nhóm các mục mảng dựa trên một thuộc tính, thường cần thiết trong xử lý dữ liệu.
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 các mảng lồng nhau với Array.flat(Infinity)
Việc làm phẳng mảng lồng nhau nhiều cấp trở nên đơn giản với Array.flat(Infinity).
const nested = [1, [2, [3, [4]]]];
console.log(nested.flat(Infinity)); // [1, 2, 3, 4]
14. Chuyển đổi giá trị Boolean với !
Chuyển đổi giá trị boolean dễ dàng như áp dụng toán tử NOT hai lần.
let isVisible = false;
isVisible = !isVisible;
console.log(isVisible); // true
15. Hợp nhất nhiều mảng với concat()
concat() hữu ích để hợp nhất nhiều mảng trong một câu lệnh duy nhất.
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. Lặp lại mảng không đồng bộ với for...of và await
Khi lặp qua mảng các promises, for...of với await đảm bảo rằng mỗi promise được giải quyết trước khi promise tiếp theo chạy.
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 trong mảng một cách nhanh chóng
Truy xuất mục cuối cùng trong mảng mà không cần biết độ dài.
const arr = [1, 2, 3, 4];
console.log(arr.at(-1)); // 4
18. Sử dụng Intlđể định dạng ngày tháng
Intl.DateTimeFormat cung cấp một cách mạnh mẽ để định dạng ngày tháng trên các locale.
const date = new Date();
const formatted = new Intl.DateTimeFormat('en-GB', { dateStyle: 'full',
}).format(date);
console.log(formatted); // e.g., "Monday, 25 October 2021"
19. Làm tròn Số với Math.round() và Template Literals
Template literals có thể định dạng trực tiếp các số đã làm tròn.
const num = 3.14159;
console.log(`${Math.round(num * 100) / 100}`); // 3.14
20. Chuyển đổi Đối tượng giống Mảng thành Mảng sử dụng Array.from()
Sử dụng Array.from() để chuyển đổi các đối tượng giống mảng (ví dụ: arguments) thành mảng thực.
function example() { const argsArray = Array.from(arguments); console.log(argsArray);
}
example(1, 2, 3); // [1, 2, 3]
Mỗi thủ thuật này đơn giản hóa các mẫu mã hóa phổ biến trong JavaScript. Tích hợp chúng vào quy trình làm việc của bạn để viết mã vừa hiệu quả vừa biểu cảm. Cảm ơn các bạn đã theo dõi.