前端：分享JS中7个高频的工具函数

目录

◆1、将数字转换为货币

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

◆3、防抖

◆4、日期验证

◆5、将 FormData（表单数据）转换为 JSON

◆6、衡量一个函数的性能

◆7、从数组中删除重复项

---

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>
<header><h1>Article Heading</h1></header><div>
<p>Article main content</p>
</div><footer><small>Article footer</small></footer>
</article>
`;
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: Errorfunction 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部分

<form action="post">
<div class="row">
<label for="name">Name</label>
<input type="text" id="name" name="name" placeholder="John Doe">
</div><div class="row">
<label for="email">E-mail Address</label>
<input type="email" id="email" name="email" placeholder="[e-mail]">
</div><div class="row">
<label for="phone">Phone Number</label>
<input type="tel" id="phone" name="phone" placeholder="[phone]">
</div><div class="row">
<label for="interests1">Interests</label>
<div class="checkbox">
<input type="checkbox" name="interests" id="interests1" value="Programming">
<label for="interests1">Programming</label>
</div><div class="checkbox">
<input type="checkbox" name="interests" id="interests2" value="Golf">
<label for="interests2">Golf</label>
</div><div class="checkbox">
<input type="checkbox" name="interests" id="interests3" value="Traveling">
<label for="interests3">Traveling</label>
</div><div class="checkbox">
<input type="checkbox" name="interests" id="interests4" value="Reading">
<label for="interests4">Reading</label>
</div><div class="checkbox">
<input type="checkbox" name="interests" id="interests5" value="Writing">
<label for="interests5">Writing</label>
</div>
</div><div class="row">
<button type="submit">Submit</button>
</div>
</form>

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