JavaScript 实用函数是有用的、可重复使用的片段,您可以在许多不同的项目中重复使用。它们的目的是为常见任务提供一致且高效的输出,并帮助提高代码的一致性。因此在我们的日常开发中,经常整理和维护一套适合自己的函数工具库还是很有必要的。
在本文中,我想重点介绍我在许多项目中使用的 7 个实用函数,并解释它们的用途。
1、将数字转换为货币
在 JavaScript 中处理货币时,事情会变得复杂。特别是当您需要处理显示不同类型的货币时。
JavaScript 提供了 Intl.NumberFormat 对象,它允许您以本地化语言的方式格式化数字。它提供的选项之一是将数字格式化为货币。
此函数接受 3 个参数:
- num — 要格式化的数字。
- currency — 要格式化为的货币 — 默认设置为“CNY”,因为我们的业务主要需要处理基于人民币的价格。
- locale — 默认设置为“zh-CN'”,因为我们的业务是人民币的信息。
如下代码所示:
const value = convertToCurrency('1799.99');
const holder = document.getElementById('holder');
holder.innerText = value;
function convertToCurrency(num, currency = 'CNY', locale = 'zh-CN') {
const formatter = new Intl.NumberFormat(locale, {
style: 'currency',
currency: currency
});
return formatter.format(num);
}
如果运行上述代码,界面将会输出以逗号分隔,并带有人民币的货币数字,如下所示:
¥1,799.99
2、将 HTML 字符串转换为 DOM 对象
在许多情况下,您可能会收到 HTML 字符串而不是 HTML 元素。例如,当从 API 接收 JSON 响应中的 HTML 时,或者当通过像 Nunjucks 这样的模板解析器呈现模板时。
您可以通过 innerHTML 属性将此 HTML 字符串直接注入到 dom 中,但有时您希望将此字符串转换为 HTML 对象以进行额外的转换、进行验证或更具体的 DOM 注入。
此函数接受 2 个参数:
- content — 要转换为对象的 HTML 字符串。
- 选择器——您想要接收的内容的选择器——DOMParser 对象将创建一个完整的 HTML Object。如果您只想要某个元素,您可以传入选择器,例如“section”,您将收到该元素。
function parseStringAsHtml(
content,
selector
) {
const domParser = new DOMParser();
const parsed = domParser.parseFromString(content, 'text/html');
return parsed.querySelector(selector);
}
JS调用这段函数示例:
const htmlString = `
Article Heading
Article main content
Article footer
`;
const html = parseStringAsHtml(htmlString, 'article');
const holder = document.getElementById('holder');
holder.appendChild(html);
3、防抖
在 JavaScript 中,防抖函数将确保您的函数仅在每次用户输入时触发一次,或者至少在 wait 参数指定的时间段内触发一次。
例如,假设我们想根据搜索查询向用户显示建议,我们可以在用户键入时显示建议,并在键入每个字母后刷新,但这对用户来说可能很烦人。例如,在输入一个键后至少等待 300 毫秒以显示建议以确保用户完成输入是很常见的。
这个函数有 3 个参数:
- fn — 要执行的函数。
- wait — 函数执行前等待的时间。
- immediate — 一个布尔值,指示是否应立即调用函数的第一次调用。
function debounce(fn, wait, immediate) {
let timeout;
return function setDebounce(...args) {
const later = () => {
timeout = null;
if (!immediate) {
fn.apply(this, args);
}
};
const callNow = immediate && !timeout;
clearTimeout(timeout);
timeout = setTimeout(later, wait || 200);
if (callNow) {
fn.apply(this, args);
}
};
}
4、日期验证
有时您从代码、用户输入或 API 中的某处收到日期字符串,将其转换为日期对象并尝试编辑或显示日期并收到日期无效的错误。
使用这个简单的实用方法,您可以验证新构造的日期对象是否实际上是一个有效的日期对象。
function isDateValid(date) {
return !Number.isNaN(date.getTime());
}
调用示例:
const date1 = new Date('2022-09-05');
const date2 = new Date('not valid date string');
console.log(getDayOfWeek(date1)); // Outputs: Monday
console.log(getDayOfWeek(date2)); // Outputs: Error
function getDayOfWeek(date) {
if (isDateValid(date) === false) {
throw new Error('Invalid date submitted');
}
return date.toLocaleString(
'default', {weekday: 'long'}
);
}
function isDateValid(date) {
return !Number.isNaN(date.getTime());
}
5、将 FormData(表单数据)转换为 JSON
创建 FormData 对象时,有时将其转换为类似 JSON 的对象,这个需求在我们的业务中很常见。例如,当您将数据发布到的 API 只接受 JSON 请求时。
在大多数情况下,一个 FormData 对象可以很容易地映射到一个对象,但是在处理多选复选框时,事情会变得混乱。由于每个复选框都具有相同的名称,因此对象的键值对将相互覆盖。
这个简单的实用方法为您将 FormData 转换为一个对象,并确保将多选值映射到一个数组,而不是每次都覆盖该值。
function convertFormdataToJsonObject(formData) {
const data = {};
for (const [key, value] of formData.entries()) {
if (Object.prototype.hasOwnProperty.call(data, key)) {
const oldValue = data[key];
if (!Array.isArray(data[key])) {
data[key] = [];
data[key].push(oldValue);
}
data[key].push(value);
continue;
}
data[key] = value;
}
return data;
}
调用示例:
HTML部分
Name
E-mail Address
Phone Number
Interests
Programming
Golf
Traveling
Reading
Writing
Submit
JS调用部分
const form = document.querySelector('form');
form.addEventListener('submit', (event) => {
event.preventDefault();
const formData = new FormData(form);
const json = convertFormdataToJsonObject(formData);
console.log(json);
});
6、衡量一个函数的性能
有时您想知道您的应用程序的哪一部分正在减慢您的站点,并且调试函数执行,计算它们所花费的时间很有用。
幸运的是,浏览器提本身就原生支持。但是,不如针对特别的函数,您可以简单地调用这个实用方法,灵活性会高些。
此函数需要 2 个或更多参数:
- name — 标签的名称显示在控制台中。
- fn — 您要衡量其性能的函数。
- 任何额外的参数——你正在调用的函数的参数。
function measurePerformance(name, fn, ...args) {
if (typeof fn !== "function") {
console.error(`Provide a valid function, ${typeof fn} provided`)
return;
}
console.time(name)
fn.bind(this, ...args);
console.timeEnd(name)
}
调用示例
measurePerformance('Multiply method', multiply, 7, 10);
function multiply(a, b) {
return a * b;
}
7、从数组中删除重复项
我经常发现自己需要从数组中删除可能的重复项。将数组转换为 Set 并返回后,此方法返回一个新数组。
集合是一个简单的对象,它存储只能出现一次的值,使其成为删除数组重复数据的简单方法。
function removeDuplicates(array) {
if (!Array.isArray(array)) {
console.error(`array expected, ${typeof array} provided`)
return
}
return [...new Set(array)]
}
结束
今天的分享就到这里,我希望其中一些实用方法对您有用。谢谢阅读。