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 个参数：

1. content — 要转换为对象的 HTML 字符串。
2. 选择器——您想要接收的内容的选择器——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 个参数：

1. fn — 要执行的函数。
2. wait — 函数执行前等待的时间。
3. 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 个或更多参数：

1. name — 标签的名称显示在控制台中。
2. fn — 您要衡量其性能的函数。
3. 任何额外的参数——你正在调用的函数的参数。

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

结束

今天的分享就到这里，我希望其中一些实用方法对您有用。谢谢阅读。如果您什么建议或有其他更常用的方法分享，欢迎在评论区分享。感谢你的阅读，如果你喜欢我的分享，别忘了点赞转发，让更多的人看到，最后别忘记点个关注，你的支持将是我分享最大的动力，后续我会持续输出更多内容，敬请期待。

原文：https://javascript.plainenglish.io/my-7-most-used-javascript-utility-functions-86afd61ad76c

作者：Wesley Smits

非直接翻译，有自行改编和添加部分。