Chào các bạn lập trình viên frontend, hôm nay mình sẽ chia sẻ một số hàm tiện ích giúp tránh việc lặp lại mã và tăng năng suất làm việc. Những đoạn mã nhỏ này thường được sử dụng trong nhiều dự án và giúp tiết kiệm rất nhiều thời gian khi phải làm đi làm lại cùng một việc ở nhiều tệp khác nhau.
1. Tạo số nguyên ngẫu nhiên trong khoảng min và max
Hữu ích khi bạn cần tạo một ID ngẫu nhiên cho đối tượng nào đó trong dữ liệu.
const randomInt = (min, max) => Math.floor(Math.random() * (max - min + 1)) + min;
scrib.show(randomInt(100,100000))
2. Lấy thời gian đã trôi qua
Dùng để hiển thị thời gian ai đó online lần cuối trong ứng dụng chat hoặc thời gian cập nhật cuối cùng của tệp.
const timeAgo = date => { const diff = (new Date() - new Date(date)) / 1000; const units = [ ['year', 31536000], ['month', 2592000], ['day', 86400], ['hour', 3600], ['minute', 60], ['second', 1] ]; for (let [unit, sec] of units) { const val = Math.floor(diff / sec); if (val >= 1) return `${val} ${unit}${val > 1 ? 's' : ''} ago`; } return 'just now';
};
scrib.show(timeAgo("2025/05/12"))
3. Định dạng ngày theo YYYY-MM-DD
Hữu ích để chuẩn hóa ngày từ API về dạng hiển thị chuẩn cho giao diện.
const formatDate = date => new Date(date).toISOString().split('T')[0];
scrib.show(formatDate("2025/05/12"))
4. Loại bỏ phần tử trùng lặp trong mảng
Giúp làm sạch dữ liệu mảng.
const unique = arr => [...new Set(arr)];
scrib.show(unique([1,1,2,2,2,3,4,5,5,9]))
5. Làm phẳng mảng lồng nhau
Chuyển mảng nhiều tầng thành mảng 1 tầng để dễ xử lý.
const flatten = arr => arr.flat(Infinity);
scrib.show(flatten([1,1,[2,2,2],[3,4,[5]],5,9]))
6. Xáo trộn mảng
Hữu ích khi bạn muốn hiển thị danh sách theo thứ tự ngẫu nhiên.
const shuffle = arr => arr.sort(() => Math.random() - 0.5);
scrib.show(shuffle([1,1,2,2,2,3,4,5,5,9]))
7. Lấy phần giao nhau giữa hai mảng
Dùng để so sánh và tìm phần tử chung.
const intersect = (a, b) => a.filter(x => b.includes(x));
scrib.show(intersect([1,2,3,4],[1,3,4,5]))
8. Viết hoa chữ cái đầu tiên
Dùng để định dạng văn bản hiển thị trên giao diện.
const capitalize = str => str.charAt(0).toUpperCase() + str.slice(1);
scrib.show(capitalize("mysterio"));
9. Tạo slug (chuỗi URL có dấu gạch ngang)
Chuyển chuỗi thành dạng slug dễ đọc và thân thiện với URL.
const slugify = str => str.toLowerCase().trim().replace(/\s+/g, '-').replace(/[^\w\-]+/g, '');
scrib.show(slugify("products and services")); // products-and-services
10. Rút gọn chuỗi
Thêm dấu "..." sau một số ký tự giới hạn.
const truncate = (str, len) => str.length > len ? str.slice(0, len) + '...' : str;
scrib.show(truncate("Web development has many frameworks", 25));
11. Kiểm tra định dạng email
Xác thực email hợp lệ hay không.
const isEmail = str => /^[^\s@]+@[^\s@]+\.[^\s@]+$/.test(str);
scrib.show(isEmail("mysterio09@gmail.com"));
12. Kiểm tra object rỗng
Dùng để kiểm tra trước khi xử lý object.
const isEmptyObject = obj => Object.keys(obj).length === 0;
scrib.show(isEmptyObject({})); // true
scrib.show(isEmptyObject({ name: "Mysterio" })); // false
13. Lấy tham số từ URL
Chuyển query string thành object.
const getQueryParams = url => Object.fromEntries(new URL(url).searchParams.entries());
const url = "https://example.com/user?name=mysterio&age=24&country=India";
scrib.show(getQueryParams(url));
14. Chuyển object thành query string
Làm ngược lại hàm số 13.
const toQueryString = obj => new URLSearchParams(obj).toString();
const person = { "name": "mysterio", "age": "24", "country": "India" };
scrib.show(`https://example.com/user?${toQueryString(person)}`);
15. Kiểm tra năm nhuận
Hữu ích khi áp dụng logic phụ thuộc vào số ngày.
const isLeapYear = year => new Date(year, 1, 29).getDate() === 29;
scrib.show(isLeapYear("2025-05-15"));
16. Loại bỏ giá trị "falsy"
Xóa các giá trị như false, undefined, null, 0, "",...
const compact = arr => arr.filter(Boolean);
scrib.show(compact([false, undefined, null, 0, 1, 2, 3]));
17. Đếm số lần xuất hiện trong mảng
Phân loại tần suất phần tử.
const countOccurrences = (arr, val) => arr.reduce((a, v) => (v === val ? a + 1 : a), 0);
scrib.show(countOccurrences([1,1,2,2,2,3,4,5,5,9], 2));
18. Tìm phần tử trùng lặp trong mảng
const findDuplicates = arr => { return [...new Set(arr.filter((item, index) => arr.indexOf(item) !== index))];
};
scrib.show(findDuplicates([1,1,2,2,2,3,4,5,5,9]));
19. Kiểm tra giá trị có phải số không
Hữu ích khi cần tính toán mà không gây lỗi.
const isNumeric = val => !isNaN(parseFloat(val)) && isFinite(val);
scrib.show(isNumeric(NaN)); // false
scrib.show(isNumeric("24s")); // false
scrib.show(isNumeric("24")); // true
scrib.show(isNumeric(24)); // true
scrib.show(isNumeric(24.45)); // true
20. Lấy các khóa cụ thể từ object
Chỉ lấy ra các thuộc tính bạn cần.
const pick = (obj, keys) => keys.reduce((acc, key) => { if (key in obj) acc[key] = obj[key]; return acc; }, {});
const person = { "name": "mysterio", "age": "24", "country": "India" };
scrib.show(pick(person, ["name", "age"]));
Vậy là xong! Hãy cho mình biết nếu bạn muốn mình cải thiện điều gì trong bài viết này nhé.