aDu28資訊網——每日最新資訊28at.com

JavaScript 實用函數是有用的、可重復使用的片段，您可以在許多不同的項目中重復使用。它們的目的是為常見任務提供一致且高效的輸出，并幫助提高代碼的一致性。因此在我們的日常開發中，經常整理和維護一套適合自己的函數工具庫還是很有必要的。aDu28資訊網——每日最新資訊28at.com

在本文中，我想重點介紹我在許多項目中使用的 7 個實用函數，并解釋它們的用途。aDu28資訊網——每日最新資訊28at.com

1、將數字轉換為貨幣

在 JavaScript 中處理貨幣時，事情會變得復雜。特別是當您需要處理顯示不同類型的貨幣時。aDu28資訊網——每日最新資訊28at.com

JavaScript 提供了 Intl.NumberFormat 對象，它允許您以本地化語言的方式格式化數字。它提供的選項之一是將數字格式化為貨幣。aDu28資訊網——每日最新資訊28at.com

此函數接受 3 個參數：aDu28資訊網——每日最新資訊28at.com

• num — 要格式化的數字。
• currency — 要格式化為的貨幣 — 默認設置為“CNY”，因為我們的業務主要需要處理基于人民幣的價格。
• locale — 默認設置為“zh-CN'”，因為我們的業務是人民幣的信息。

如下代碼所示：aDu28資訊網——每日最新資訊28at.com

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

如果運行上述代碼，界面將會輸出以逗號分隔，并帶有人民幣的貨幣數字，如下所示：aDu28資訊網——每日最新資訊28at.com

￥1,799.99

2、將 HTML 字符串轉換為 DOM 對象

在許多情況下，您可能會收到 HTML 字符串而不是 HTML 元素。例如，當從 API 接收 JSON 響應中的 HTML 時，或者當通過像 Nunjucks 這樣的模板解析器呈現模板時。aDu28資訊網——每日最新資訊28at.com

您可以通過 innerHTML 屬性將此 HTML 字符串直接注入到 dom 中，但有時您希望將此字符串轉換為 HTML 對象以進行額外的轉換、進行驗證或更具體的 DOM 注入。aDu28資訊網——每日最新資訊28at.com

此函數接受 2 個參數：aDu28資訊網——每日最新資訊28at.com

• 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調用這段函數示例：aDu28資訊網——每日最新資訊28at.com

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 參數指定的時間段內觸發一次。aDu28資訊網——每日最新資訊28at.com

例如，假設我們想根據搜索查詢向用戶顯示建議，我們可以在用戶鍵入時顯示建議，并在鍵入每個字母后刷新，但這對用戶來說可能很煩人。例如，在輸入一個鍵后至少等待 300 毫秒以顯示建議以確保用戶完成輸入是很常見的。aDu28資訊網——每日最新資訊28at.com

這個函數有 3 個參數：aDu28資訊網——每日最新資訊28at.com

• 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 中的某處收到日期字符串，將其轉換為日期對象并嘗試編輯或顯示日期并收到日期無效的錯誤。aDu28資訊網——每日最新資訊28at.com

使用這個簡單的實用方法，您可以驗證新構造的日期對象是否實際上是一個有效的日期對象。aDu28資訊網——每日最新資訊28at.com

function isDateValid(date) {    return !Number.isNaN(date.getTime());}

調用示例：aDu28資訊網——每日最新資訊28at.com

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 請求時。aDu28資訊網——每日最新資訊28at.com

在大多數情況下，一個 FormData 對象可以很容易地映射到一個對象，但是在處理多選復選框時，事情會變得混亂。由于每個復選框都具有相同的名稱，因此對象的鍵值對將相互覆蓋。aDu28資訊網——每日最新資訊28at.com

這個簡單的實用方法為您將 FormData 轉換為一個對象，并確保將多選值映射到一個數組，而不是每次都覆蓋該值。aDu28資訊網——每日最新資訊28at.com

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;}

調用示例：aDu28資訊網——每日最新資訊28at.com

HTML部分aDu28資訊網——每日最新資訊28at.com

<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調用部分aDu28資訊網——每日最新資訊28at.com

const form = document.querySelector('form');form.addEventListener('submit', (event) => {  event.preventDefault();  const formData = new FormData(form);  const json = convertFormdataToJsonObject(formData);  console.log(json);});

6、衡量一個函數的性能

有時您想知道您的應用程序的哪一部分正在減慢您的站點，并且調試函數執行，計算它們所花費的時間很有用。aDu28資訊網——每日最新資訊28at.com

幸運的是，瀏覽器提本身就原生支持。但是，不如針對特別的函數，您可以簡單地調用這個實用方法，靈活性會高些。aDu28資訊網——每日最新資訊28at.com

此函數需要 2 個或更多參數：aDu28資訊網——每日最新資訊28at.com

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

調用示例aDu28資訊網——每日最新資訊28at.com

measurePerformance('Multiply method', multiply, 7, 10);function multiply(a, b) {  return a * b;}

7、從數組中刪除重復項

我經常發現自己需要從數組中刪除可能的重復項。將數組轉換為 Set 并返回后，此方法返回一個新數組。aDu28資訊網——每日最新資訊28at.com

集合是一個簡單的對象，它存儲只能出現一次的值，使其成為刪除數組重復數據的簡單方法。aDu28資訊網——每日最新資訊28at.com

function removeDuplicates(array) {    if (!Array.isArray(array)) {        console.error(`array expected, ${typeof array} provided`)        return    }        return [...new Set(array)]}

結束

今天的分享就到這里，我希望其中一些實用方法對您有用。謝謝閱讀。aDu28資訊網——每日最新資訊28at.com

本文鏈接：http://m.www897cc.com/showinfo-26-70426-0.htmlJS小知識，分享七個高頻的工具函數，也許你用的上

聲明：本網頁內容旨在傳播知識，若有侵權等問題請及時與本網聯系，我們將在第一時間刪除處理。郵件：2376512515@qq.com

上一篇： 掌握Guava的并發工具：輕松應對復雜并發場景

下一篇： 聊聊項目實戰中的異步設計