JS小知识，分享七个高频的工具函数，也许你用的上-28资讯网—

JS小知识，分享七个高频的工具函数，也许你用的上

2024-02-01 12:49:02 软件 174观看

摘要JavaScript 实用函数是有用的、可重复使用的片段，您可以在许多不同的项目中重复使用。它们的目的是为常见任务提供一致且高效的输出，并帮助提高代码的一致性。因此在我们的日常开发中，经常整理和维护一套适合自己的函数

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: Mondayconsole.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="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)]}

结束

今天的分享就到这里，我希望其中一些实用方法对您有用。谢谢阅读。

本文链接：http://www.28at.com/showinfo-26-70426-0.htmlJS小知识，分享七个高频的工具函数，也许你用的上

声明：本网页内容旨在传播知识，不代表本站观点，若有侵权等问题请及时与本网联系，我们将在第一时间删除处理。

显示全文

全部频道