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

英文 | https://Javascript.plainenglish.io/my-7-most-used-Javascript-utility-functions-86afd61ad76c

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

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

1.将数字转换为货币

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

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

该函数接受 3 个参数&＃xff1a;

• num - 要格式化的数字。

• currency——要格式化的货币——默认设置为“欧元”&＃xff0c;因为我主要需要处理基于欧元的价格。

• locale — 默认设置为“nl-NL”&＃xff0c;因为我经常处理显示为荷兰的价格。

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

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

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

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

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

该函数接受 2 个参数&＃xff1a;

• content — 要转换为对象的 HTML 字符串。

• selector——你想要接收的选择器——DOMParser 对象将创建一个完整的 HTMLObject&＃xff0c;包括一个 和 标记。如果你只想要某个元素&＃xff0c;你可以传入选择器&＃xff0c;例如“section”&＃xff0c;你将收到该元素。

function parseStringAsHtml(content,selector
) {const domParser &＃61; new DOMParser();const parsed &＃61; domParser.parseFromString(content, &＃39;text/html&＃39;);return parsed.querySelector(selector);
}

3.去抖

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

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

这个函数有 3 个参数&＃xff1a;

• fn - 要执行的函数。

• wait — 函数执行前的等待时间。

• immediate — 一个布尔值&＃xff0c;指示第一次调用函数时是否应立即调用。

function debounce(fn, wait, immediate) {let timeout;return function setDebounce(...args) {const later &＃61; () &＃61;> {timeout &＃61; null;if (!immediate) {fn.apply(this, args);}};const callNow &＃61; immediate && !timeout;clearTimeout(timeout);timeout &＃61; setTimeout(later, wait || 200);if (callNow) {fn.apply(this, args);}};
}

4. 日期验证

有时&＃xff0c;你从代码、用户输入或 API 中的某处收到日期字符串&＃xff0c;你将其转换为日期对象并尝试编辑或显示日期并收到日期无效的错误。

使用这个简单的实用方法&＃xff0c;你可以验证新构建的日期对象是否实际上是有效的日期对象。

function isDateValid(date) {return !Number.isNaN(date.getTime());
}

5. 将 FormData 转换为 JSON

创建 FormData 对象时&＃xff0c;有时将其转换为类似 JSON 的对象很有用。例如&＃xff0c;当你向其发布数据的 API 只接受 JSON 请求时&＃xff0c;它不接受任何内容。

在大多数情况下&＃xff0c;一个 FormData 对象可以很容易地映射到一个对象&＃xff0c;但是在处理多选复选框时&＃xff0c;事情会变得混乱。由于每个复选框都具有相同的名称&＃xff0c;因此对象的键值对将相互覆盖。

这个简单的实用方法为FormData 转换为一个对象&＃xff0c;并确保将多选值映射到一个数组&＃xff0c;而不是每次都覆盖该值。

function convertFormdataToJsonObject(formData) {const data &＃61; {};for (const [key, value] of formData.entries()) {if (Object.prototype.hasOwnProperty.call(data, key)) {const oldValue &＃61; data[key];if (!Array.isArray(data[key])) {data[key] &＃61; [];data[key].push(oldValue);}data[key].push(value);continue;}data[key] &＃61; value;}return data;
}

6. 衡量一个函数的性能

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

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

此函数需要 2 个或更多参数&＃xff1a;

• name — 标签的名称显示在控制台中。

• fn - 您要衡量其性能的函数。

• 任何附加参数——你正在调用的函数的参数。

function measurePerformance(name, fn, ...args) {if (typeof fn !&＃61;&＃61; "function") {console.error(&＃96;Provide a valid function, ${typeof fn} provided&＃96;)return;}console.time(name)fn.bind(this, ...args);console.timeEnd(name)
}

7.从数组中删除重复项

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

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

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

结论

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

最后感谢你的阅读&＃xff0c;祝编程愉快&＃xff01;

学习更多技能

请点击下方公众号