一加Ace2 Pro官宣：普及16G內(nèi)存 引領(lǐng)24G
一加官方今天繼續(xù)為本月發(fā)布的新機(jī)一加Ace2 Pro帶來預(yù)熱，公布了內(nèi)存方面的信息。“淘汰 8GB ，12GB 起步，16GB 普及，24GB 引領(lǐng)，還有呢？#一加Ace2Pro#，2023 年 8 月，敬請期待。”同時(shí)
JavaScript 實(shí)用函數(shù)是有用的、可重復(fù)使用的片段，您可以在許多不同的項(xiàng)目中重復(fù)使用。它們的目的是為常見任務(wù)提供一致且高效的輸出，并幫助提高代碼的一致性。因此在我們的日常開發(fā)中，經(jīng)常整理和維護(hù)一套適合自己的函數(shù)工具庫還是很有必要的。
在本文中，我想重點(diǎn)介紹我在許多項(xiàng)目中使用的 7 個(gè)實(shí)用函數(shù)，并解釋它們的用途。
在 JavaScript 中處理貨幣時(shí)，事情會(huì)變得復(fù)雜。特別是當(dāng)您需要處理顯示不同類型的貨幣時(shí)。
JavaScript 提供了 Intl.NumberFormat 對象，它允許您以本地化語言的方式格式化數(shù)字。它提供的選項(xiàng)之一是將數(shù)字格式化為貨幣。
此函數(shù)接受 3 個(gè)參數(shù)：
如下代碼所示：
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);}如果運(yùn)行上述代碼，界面將會(huì)輸出以逗號分隔，并帶有人民幣的貨幣數(shù)字，如下所示：
￥1,799.99在許多情況下，您可能會(huì)收到 HTML 字符串而不是 HTML 元素。例如，當(dāng)從 API 接收 JSON 響應(yīng)中的 HTML 時(shí)，或者當(dāng)通過像 Nunjucks 這樣的模板解析器呈現(xiàn)模板時(shí)。
您可以通過 innerHTML 屬性將此 HTML 字符串直接注入到 dom 中，但有時(shí)您希望將此字符串轉(zhuǎn)換為 HTML 對象以進(jìn)行額外的轉(zhuǎn)換、進(jìn)行驗(yàn)證或更具體的 DOM 注入。
此函數(shù)接受 2 個(gè)參數(shù)：
function parseStringAsHtml( content, selector) { const domParser = new DOMParser(); const parsed = domParser.parseFromString(content, 'text/html'); return parsed.querySelector(selector);}JS調(diào)用這段函數(shù)示例：
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 中，防抖函數(shù)將確保您的函數(shù)僅在每次用戶輸入時(shí)觸發(fā)一次，或者至少在 wait 參數(shù)指定的時(shí)間段內(nèi)觸發(fā)一次。
例如，假設(shè)我們想根據(jù)搜索查詢向用戶顯示建議，我們可以在用戶鍵入時(shí)顯示建議，并在鍵入每個(gè)字母后刷新，但這對用戶來說可能很煩人。例如，在輸入一個(gè)鍵后至少等待 300 毫秒以顯示建議以確保用戶完成輸入是很常見的。
這個(gè)函數(shù)有 3 個(gè)參數(shù)：
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); } };}有時(shí)您從代碼、用戶輸入或 API 中的某處收到日期字符串，將其轉(zhuǎn)換為日期對象并嘗試編輯或顯示日期并收到日期無效的錯(cuò)誤。
使用這個(gè)簡單的實(shí)用方法，您可以驗(yàn)證新構(gòu)造的日期對象是否實(shí)際上是一個(gè)有效的日期對象。
function isDateValid(date) { return !Number.isNaN(date.getTime());}調(diào)用示例：
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());}創(chuàng)建 FormData 對象時(shí)，有時(shí)將其轉(zhuǎn)換為類似 JSON 的對象，這個(gè)需求在我們的業(yè)務(wù)中很常見。例如，當(dāng)您將數(shù)據(jù)發(fā)布到的 API 只接受 JSON 請求時(shí)。
在大多數(shù)情況下，一個(gè) FormData 對象可以很容易地映射到一個(gè)對象，但是在處理多選復(fù)選框時(shí)，事情會(huì)變得混亂。由于每個(gè)復(fù)選框都具有相同的名稱，因此對象的鍵值對將相互覆蓋。
這個(gè)簡單的實(shí)用方法為您將 FormData 轉(zhuǎn)換為一個(gè)對象，并確保將多選值映射到一個(gè)數(shù)組，而不是每次都覆蓋該值。
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;}調(diào)用示例：
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調(diào)用部分
const form = document.querySelector('form');form.addEventListener('submit', (event) => { event.preventDefault(); const formData = new FormData(form); const json = convertFormdataToJsonObject(formData); console.log(json);});有時(shí)您想知道您的應(yīng)用程序的哪一部分正在減慢您的站點(diǎn)，并且調(diào)試函數(shù)執(zhí)行，計(jì)算它們所花費(fèi)的時(shí)間很有用。
幸運(yùn)的是，瀏覽器提本身就原生支持。但是，不如針對特別的函數(shù)，您可以簡單地調(diào)用這個(gè)實(shí)用方法，靈活性會(huì)高些。
此函數(shù)需要 2 個(gè)或更多參數(shù)：
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)}調(diào)用示例
measurePerformance('Multiply method', multiply, 7, 10);function multiply(a, b) { return a * b;}我經(jīng)常發(fā)現(xiàn)自己需要從數(shù)組中刪除可能的重復(fù)項(xiàng)。將數(shù)組轉(zhuǎn)換為 Set 并返回后，此方法返回一個(gè)新數(shù)組。
集合是一個(gè)簡單的對象，它存儲(chǔ)只能出現(xiàn)一次的值，使其成為刪除數(shù)組重復(fù)數(shù)據(jù)的簡單方法。
function removeDuplicates(array) { if (!Array.isArray(array)) { console.error(`array expected, ${typeof array} provided`) return } return [...new Set(array)]}今天的分享就到這里，我希望其中一些實(shí)用方法對您有用。謝謝閱讀。
本文鏈接：http://www.www897cc.com/showinfo-26-70426-0.htmlJS小知識(shí)，分享七個(gè)高頻的工具函數(shù)，也許你用的上
聲明：本網(wǎng)頁內(nèi)容旨在傳播知識(shí)，若有侵權(quán)等問題請及時(shí)與本網(wǎng)聯(lián)系，我們將在第一時(shí)間刪除處理。郵件：2376512515@qq.com
Copyright ? 2016-2023 天津谷騏科技有限公司 版權(quán)所有 sitemap.xml
違法及侵權(quán)請聯(lián)系：2376512515@qq.com 津ICP備18001702號
津公網(wǎng)安備 12010102000574號