文章详情

短信预约-IT技能 免费直播动态提醒

请输入下面的图形验证码

提交验证

短信预约提醒成功

七个我最常用的 JavaScript 实用程序函数

2024-12-01 14:33

关注

JavaScript 实用程序函数是有用的、可重用的片段,你可以在许多不同的项目中重用它们。它们的目的是为常见任务提供一致且有效的答案,并帮助提高代码的一致性。

在本文中,我想重点介绍我在许多项目中使用的 7 个实用函数并解释它们的用途。

1.将数字转换为货币

在 JavaScript 中处理货币时,事情会变得复杂。特别是当你需要处理显示不同类型的货币时。

JavaScript 提供了 Intl.NumberFormat 对象,它允许你以对语言敏感的方式格式化数字。它提供的选项之一是将数字格式化为货币。

该函数接受 3 个参数:

你可以使用下面 CodePen 中的值。例如,你会看到将语言环境更改为“en-US”会将十进制表示法从逗号更改为点。

function convertToCurrency(num, currency = 'EUR', locale = 'nl-NL') {
const formatter = new Intl.NumberFormat(locale, {
style: 'currency',
currency: currency
});
return formatter.format(num);
}

2. 将 HTML 字符串转换为 DOM 对象

在很多情况下,你可能会收到 HTML 字符串而不是 HTML 元素。例如,当接收来自 API 的 JSON 响应中的 HTML 或通过 Nunjucks 之类的模板解析器呈现模板时。

你可以通过 innerHTML 属性将此 HTML 字符串直接注入到 dom 中,但有时你希望将此字符串转换为 HTML 对象以进行额外的转换、验证或更具体的 DOM 注入。

该函数接受 2 个参数:

function parseStringAsHtml(
content,
selector
) {
const domParser = new DOMParser();
const parsed = domParser.parseFromString(content, 'text/html');
return parsed.querySelector(selector);
}

3.去抖

在 JavaScript 中,debounce 函数将确保你的函数只会在每次用户输入时触发一次,或者在等待参数中指定的时间段内至少触发一次。

例如,假设我们想根据搜索查询向用户显示建议,我们可以在用户输入时显示建议并在输入每个字母后刷新,但这可能会让用户感到烦恼。通常在输入一个键后等待至少 300 毫秒以显示建议以确保用户完成输入。

这个函数有 3 个参数:

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());
}

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;
}

6. 衡量一个函数的性能

有时你想知道你的应用程序的哪一部分正在减慢你的网站速度,调试函数的执行时间很有用。

幸运的是,浏览器提供了本地支持来帮助你计算这一点。但不是将这些控制台方法添加到每个函数中,而是每次都想测试,你可以简单地调用这个有用的实用程序方法。

此函数需要 2 个或更多参数:

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)
}

7.从数组中删除重复项

我经常发现自己需要从数组中删除可能的重复项。此方法只是在将数组转换为 Set 并返回后返回一个新数组。

集合是一个简单的对象,它存储只能出现一次的值,使其成为对数组进行重复数据删除的简单方法。

function removeDuplicates(array) {
if (!Array.isArray(array)) {
console.error(`array expected, ${typeof array} provided`)
return
}
return [...new Set(array)]
}

结论

我希望其中有一些实用方法对你有用, 也希望你能从中学到新知识,如果你觉得有帮助的话,请点赞我,关注我,并将它分享给你的朋友,也许能够帮助到他。

最后感谢你的阅读,祝编程愉快!

来源:web前端开发内容投诉

免责声明:

① 本站未注明“稿件来源”的信息均来自网络整理。其文字、图片和音视频稿件的所属权归原作者所有。本站收集整理出于非商业性的教育和科研之目的,并不意味着本站赞同其观点或证实其内容的真实性。仅作为临时的测试数据,供内部测试之用。本站并未授权任何人以任何方式主动获取本站任何信息。

② 本站未注明“稿件来源”的临时测试数据将在测试完成后最终做删除处理。有问题或投稿请发送至: 邮箱/279061341@qq.com QQ/279061341

软考中级精品资料免费领

  • 历年真题答案解析
  • 备考技巧名师总结
  • 高频考点精准押题
  • 2024年上半年信息系统项目管理师第二批次真题及答案解析(完整版)

    难度     813人已做
    查看
  • 【考后总结】2024年5月26日信息系统项目管理师第2批次考情分析

    难度     354人已做
    查看
  • 【考后总结】2024年5月25日信息系统项目管理师第1批次考情分析

    难度     318人已做
    查看
  • 2024年上半年软考高项第一、二批次真题考点汇总(完整版)

    难度     435人已做
    查看
  • 2024年上半年系统架构设计师考试综合知识真题

    难度     224人已做
    查看

相关文章

发现更多好内容

猜你喜欢

AI推送时光机
位置:首页-资讯-后端开发
咦!没有更多了?去看看其它编程学习网 内容吧
首页课程
资料下载
问答资讯