JavaScript 實用函數是有用的、可重復使用的片段,您可以在許多不同的項目中重復使用。它們的目的是為常見任務提供一致且高效的輸出,并幫助提高代碼的一致性。因此在我們的日常開發中,經常整理和維護一套適合自己的函數工具庫還是很有必要的。
在本文中,我想重點介紹我在許多項目中使用的 7 個實用函數,并解釋它們的用途。
在 JavaScript 中處理貨幣時,事情會變得復雜。特別是當您需要處理顯示不同類型的貨幣時。
JavaScript 提供了 Intl.NumberFormat 對象,它允許您以本地化語言的方式格式化數字。它提供的選項之一是將數字格式化為貨幣。
此函數接受 3 個參數:
如下代碼所示:
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
在許多情況下,您可能會收到 HTML 字符串而不是 HTML 元素。例如,當從 API 接收 JSON 響應中的 HTML 時,或者當通過像 Nunjucks 這樣的模板解析器呈現模板時。
您可以通過 innerHTML 屬性將此 HTML 字符串直接注入到 dom 中,但有時您希望將此字符串轉換為 HTML 對象以進行額外的轉換、進行驗證或更具體的 DOM 注入。
此函數接受 2 個參數:
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);
在 JavaScript 中,防抖函數將確保您的函數僅在每次用戶輸入時觸發一次,或者至少在 wait 參數指定的時間段內觸發一次。
例如,假設我們想根據搜索查詢向用戶顯示建議,我們可以在用戶鍵入時顯示建議,并在鍵入每個字母后刷新,但這對用戶來說可能很煩人。例如,在輸入一個鍵后至少等待 300 毫秒以顯示建議以確保用戶完成輸入是很常見的。
這個函數有 3 個參數:
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); } };}
有時您從代碼、用戶輸入或 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());}
創建 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);});
有時您想知道您的應用程序的哪一部分正在減慢您的站點,并且調試函數執行,計算它們所花費的時間很有用。
幸運的是,瀏覽器提本身就原生支持。但是,不如針對特別的函數,您可以簡單地調用這個實用方法,靈活性會高些。
此函數需要 2 個或更多參數:
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;}
我經常發現自己需要從數組中刪除可能的重復項。將數組轉換為 Set 并返回后,此方法返回一個新數組。
集合是一個簡單的對象,它存儲只能出現一次的值,使其成為刪除數組重復數據的簡單方法。
function removeDuplicates(array) { if (!Array.isArray(array)) { console.error(`array expected, ${typeof array} provided`) return } return [...new Set(array)]}
今天的分享就到這里,我希望其中一些實用方法對您有用。謝謝閱讀。
本文鏈接:http://www.www897cc.com/showinfo-26-70426-0.htmlJS小知識,分享七個高頻的工具函數,也許你用的上
聲明:本網頁內容旨在傳播知識,若有侵權等問題請及時與本網聯系,我們將在第一時間刪除處理。郵件:2376512515@qq.com
下一篇: 聊聊項目實戰中的異步設計