前端：分享JS中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: 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部分

<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="johndoe@gmail.com">

</div>

 

<div class="row">

<label for="phone">Phone Number</label>

<input type="tel" id="phone" name="phone" placeholder="+316-12345678">

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

}