JavaScript实用函数是有用的、可重用的部分，您可以在许多不同的项目中重用。它们的目的是为常见任务提供一致且高效的答案，并帮助提高代码一致性。在本文中，我想重点介绍我在许多项目中使用的7个实用函数并解释它们的用途。1.将数字转换为货币在JavaScript中处理货币时，事情变得复杂起来。特别是当您需要处理显示不同类型的货币时。JavaScript提供了Intl.NumberFormat对象，它允许您以语言敏感的方式格式化数字。它提供的选项之一是将数字格式化为货币。该函数接受3个参数：num-要格式化的数字。currency-要格式化的货币-默认为“欧元”，因为我主要需要处理基于欧元的价格。语言环境-默认为“nl-NL”，因为我经常处理显示为荷兰语的价格。您可以使用下面CodePen中的值。例如，您会看到将区域设置更改为“en-US”会将十进制表示法从逗号更改为点。functionconvertToCurrency(num,currency='EUR',locale='nl-NL'){constformatter=newIntl.NumberFormat(locale,{style:'currency',currency:currency});returnformatter.format(num);}2.将HTML字符串转换为DOM对象在许多情况下，您可能会收到HTML字符串而不是HTML元素。例如，当从API接收JSON响应中的HTML时，或者当通过像Nunjucks这样的模板解析器呈现模板时。您可以通过innerHTML属性将此HTML字符串直接注入到dom中，但有时您希望将此字符串转换为HTML对象以进行额外的转换、验证或更具体的DOM注入。该函数接受2个参数：content—要转换为对象的HTML字符串。选择器-您想要接收的选择器-DOMParser对象将创建一个完整的HTMLObject，包括和
标记。如果你只想要某个元素，你可以传入一个选择器，比如“section”，你就会收到那个元素。functionparseStringAsHtml(content,selector){constdomParser=newDOMParser();constparsed=domParser.parseFromString(content,'text/html');returnparsed.querySelector(selector);}3.Debounce在JavaScript中，debounce函数将确保您的函数仅针对每个用户输入触发一次，或者至少在wait参数指定的时间段内触发一次。例如，假设我们想根据搜索查询向用户显示建议，我们可以在用户键入时显示建议并在每个字母后刷新，但这可能会让用户感到厌烦。通常在输入一个键后等待至少300毫秒以显示建议以确保用户完成输入。这个函数有3个参数：fn-要执行的函数。wait—函数执行前等待的时间。immediate—一个布尔值，指示函数是否应在第一次调用时立即调用。functiondebounce(fn,wait,immediate){让超时；返回函数setDebounce(...args){constlater=()=>{timeout=null;if(!immediate){fn.apply(this,args);}};constcallNow=immediate&&!timeout;清除超时（超时）；timeout=setTimeout(later,wait||200);如果(callNow){fn.apply(this,args);}};}4.日期验证有时，您从代码、用户输入或API的某处接收到日期字符串，您将其转换为日期对象并尝试编辑或显示日期，但收到错误消息，指出日期是无效。使用这个简单的实用方法，您可以验证新构造的Date对象实际上是一个有效的Date对象。functionisDateValid(date){return!Number.isNaN(date.getTime());}5.将FormData转换为JSON创建FormData对象时，有时将其转换为类似JSON的对象很有用。例如，当您向其发布数据的API仅接受JSON请求时，它不会接受任何内容。在大多数情况下，一个FormData对象可以很容易地映射到一个对象，但是在处理多选复选框时，事情会变得一团糟。由于每个复选框都具有相同的名称，因此对象的键值对将相互覆盖。这个简单的实用方法将FormData转换为一个对象，并确保将多选值映射到一个数组，而不是每次都覆盖该值。函数convertFormdataToJsonObject(formData){常量数据={};for(const[key,value]offormData.entries()){if(Object.prototype.hasOwnProperty.call(data,key)){constoldValue=data[key];if(!Array.isArray(data[key])){data[key]=[];数据[键].推（旧值）；}数据[键].推(值);继续;}数据[键]=值；}returndata;}6.测量一个函数的性能有时你想知道你的应用程序的哪一部分正在减慢你的网站，调试一个函数的执行时间是很有用的。幸运的是，浏览器提供了本机支持来帮助您进行计算。但是，不必每次都将这些控制台方法添加到您要测试的每个函数中，您可以简单地调用这个有用的实用程序方法。此函数采用2个或更多参数：name—要在控制台中显示的标签的名称。fn-您要衡量其性能的函数。任何附加参数-您正在调用的函数的参数。functionmeasurePerformance(name,fn,...args){if(typeoffn!=="function"){console.error(`Provideavalidfunction,${typeoffn}provided`)return;}console.time(name)fn.bind(this,...args);console.timeEnd(name)}7.从数组中删除重复项我经常发现自己需要从数组中删除可能的重复项。在将数组转换为Set并返回后，此方法仅返回一个新数组。集合是一个简单的对象，它存储只能出现一次的值，这使其成为对数组进行去重的简单方法。functionremoveDuplicates(array){if(!Array.isArray(array)){console.error(`arrayexpected,${typeofarray}provided`)return}return[...newSet(array)]}结论我希望其中一些实用的方法对你很有用，希望你能从中学到新的知识。如果觉得有帮助，请点赞，关注我，分享给你的朋友，说不定能帮到他。最后，感谢阅读，祝编程愉快！