JS小知識(shí)，分享七個(gè)高頻的工具函數(shù)，也許你用的上
JavaScript 實(shí)用函數(shù)是有用的、可重復(fù)使用的片段，您可以在許多不同的項(xiàng)目中重復(fù)使用。它們的目的是為常見任務(wù)提供一致且高效的輸出，并幫助提高代碼的一致性。因此在我們的日常開發(fā)中，經(jīng)常整理和維護(hù)一套適合自己的函數(shù)工具庫(kù)還是很有必要的。
在本文中，我想重點(diǎn)介紹我在許多項(xiàng)目中使用的 7 個(gè)實(shí)用函數(shù)，并解釋它們的用途。
1、將數(shù)字轉(zhuǎn)換為貨幣
在 JavaScript 中處理貨幣時(shí)，事情會(huì)變得復(fù)雜。特別是當(dāng)您需要處理顯示不同類型的貨幣時(shí)。
JavaScript 提供了 Intl.NumberFormat 對(duì)象，它允許您以本地化語(yǔ)言的方式格式化數(shù)字。它提供的選項(xiàng)之一是將數(shù)字格式化為貨幣。
此函數(shù)接受 3 個(gè)參數(shù)：
- num — 要格式化的數(shù)字。
- currency — 要格式化為的貨幣 — 默認(rèn)設(shè)置為“CNY”，因?yàn)槲覀兊臉I(yè)務(wù)主要需要處理基于人民幣的價(jià)格。
- locale — 默認(rèn)設(shè)置為“zh-CN'”，因?yàn)槲覀兊臉I(yè)務(wù)是人民幣的信息。
如下代碼所示：
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ì)輸出以逗號(hào)分隔，并帶有人民幣的貨幣數(shù)字，如下所示：
￥1,799.992、將 HTML 字符串轉(zhuǎn)換為 DOM 對(duì)象
在許多情況下，您可能會(huì)收到 HTML 字符串而不是 HTML 元素。例如，當(dāng)從 API 接收 JSON 響應(yīng)中的 HTML 時(shí)，或者當(dāng)通過像 Nunjucks 這樣的模板解析器呈現(xiàn)模板時(shí)。
您可以通過 innerHTML 屬性將此 HTML 字符串直接注入到 dom 中，但有時(shí)您希望將此字符串轉(zhuǎn)換為 HTML 對(duì)象以進(jìn)行額外的轉(zhuǎn)換、進(jìn)行驗(yàn)證或更具體的 DOM 注入。
此函數(shù)接受 2 個(gè)參數(shù)：
- content — 要轉(zhuǎn)換為對(duì)象的 HTML 字符串。
- 選擇器——您想要接收的內(nèi)容的選擇器——DOMParser 對(duì)象將創(chuàng)建一個(gè)完整的 HTML Object。如果您只想要某個(gè)元素，您可以傳入選擇器，例如“section”，您將收到該元素。
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);3、防抖
在 JavaScript 中，防抖函數(shù)將確保您的函數(shù)僅在每次用戶輸入時(shí)觸發(fā)一次，或者至少在 wait 參數(shù)指定的時(shí)間段內(nèi)觸發(fā)一次。
例如，假設(shè)我們想根據(jù)搜索查詢向用戶顯示建議，我們可以在用戶鍵入時(shí)顯示建議，并在鍵入每個(gè)字母后刷新，但這對(duì)用戶來說可能很煩人。例如，在輸入一個(gè)鍵后至少等待 300 毫秒以顯示建議以確保用戶完成輸入是很常見的。
這個(gè)函數(shù)有 3 個(gè)參數(shù)：
- fn — 要執(zhí)行的函數(shù)。
- wait — 函數(shù)執(zhí)行前等待的時(shí)間。
- immediate — 一個(gè)布爾值，指示是否應(yīng)立即調(diào)用函數(shù)的第一次調(diào)用。
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、日期驗(yàn)證
有時(shí)您從代碼、用戶輸入或 API 中的某處收到日期字符串，將其轉(zhuǎn)換為日期對(duì)象并嘗試編輯或顯示日期并收到日期無效的錯(cuò)誤。
使用這個(gè)簡(jiǎn)單的實(shí)用方法，您可以驗(yàn)證新構(gòu)造的日期對(duì)象是否實(shí)際上是一個(gè)有效的日期對(duì)象。
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: Monday
console.log(getDayOfWeek(date2)); // Outputs: Error
function 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（表單數(shù)據(jù)）轉(zhuǎn)換為 JSON
創(chuàng)建 FormData 對(duì)象時(shí)，有時(shí)將其轉(zhuǎn)換為類似 JSON 的對(duì)象，這個(gè)需求在我們的業(yè)務(wù)中很常見。例如，當(dāng)您將數(shù)據(jù)發(fā)布到的 API 只接受 JSON 請(qǐng)求時(shí)。
在大多數(shù)情況下，一個(gè) FormData 對(duì)象可以很容易地映射到一個(gè)對(duì)象，但是在處理多選復(fù)選框時(shí)，事情會(huì)變得混亂。由于每個(gè)復(fù)選框都具有相同的名稱，因此對(duì)象的鍵值對(duì)將相互覆蓋。
這個(gè)簡(jiǎn)單的實(shí)用方法為您將 FormData 轉(zhuǎn)換為一個(gè)對(duì)象，并確保將多選值映射到一個(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);
});6、衡量一個(gè)函數(shù)的性能
有時(shí)您想知道您的應(yīng)用程序的哪一部分正在減慢您的站點(diǎn)，并且調(diào)試函數(shù)執(zhí)行，計(jì)算它們所花費(fèi)的時(shí)間很有用。
幸運(yùn)的是，瀏覽器提本身就原生支持。但是，不如針對(duì)特別的函數(shù)，您可以簡(jiǎn)單地調(diào)用這個(gè)實(shí)用方法，靈活性會(huì)高些。
此函數(shù)需要 2 個(gè)或更多參數(shù)：
- name — 標(biāo)簽的名稱顯示在控制臺(tái)中。
- fn — 您要衡量其性能的函數(shù)。
- 任何額外的參數(shù)——你正在調(diào)用的函數(shù)的參數(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;
}7、從數(shù)組中刪除重復(fù)項(xiàng)
我經(jīng)常發(fā)現(xiàn)自己需要從數(shù)組中刪除可能的重復(fù)項(xiàng)。將數(shù)組轉(zhuǎn)換為 Set 并返回后，此方法返回一個(gè)新數(shù)組。
集合是一個(gè)簡(jiǎn)單的對(duì)象，它存儲(chǔ)只能出現(xiàn)一次的值，使其成為刪除數(shù)組重復(fù)數(shù)據(jù)的簡(jiǎn)單方法。
function removeDuplicates(array) {
if (!Array.isArray(array)) {
console.error(`array expected, ${typeof array} provided`)
return
}
return [...new Set(array)]
}結(jié)束
今天的分享就到這里，我希望其中一些實(shí)用方法對(duì)您有用。謝謝閱讀。
