2023 年,分享10個(gè)有用的 JavaScript 單行代碼
英文 | https://blog.devgenius.io/10-useful-javascript-one-liners-that-you-should-use-in-2023-f0966d968e19
在過(guò)去幾年中，JavaScript 已成為開(kāi)發(fā)人員和工程師使用的最流行的編程語(yǔ)言之一。此外，JavaScript 的好處在于我們可以將它用于不同的用例和目的。
Web 開(kāi)發(fā)、移動(dòng)開(kāi)發(fā)、游戲開(kāi)發(fā)、機(jī)器學(xué)習(xí)、人工智能，它可以在框架和庫(kù)的幫助下完成所有這些。但是，Web 開(kāi)發(fā)人員更多地使用 JavaScript，使他們能夠使 Web 更具動(dòng)態(tài)性和交互性。
JavaScript 的偉大之處在于它有很多我們可以使用的很酷的特性。因此，這使我們能夠用更少的代碼完成許多事情，從而節(jié)省時(shí)間。
在 JavaScript 中編寫(xiě)更少代碼并加快開(kāi)發(fā)速度的方法之一是使用單行代碼和短代碼片段。
您應(yīng)該在 JavaScript 代碼中使用單行代碼的原因有很多。那是因?yàn)樗鼈兛梢允鼓拇a更短并且易于重構(gòu)。除此之外，它們更加簡(jiǎn)潔易讀。
因此，在本文中，我將與您分享一些有用的 JavaScript 單行代碼列表，您可以作為 Web 開(kāi)發(fā)人員在代碼中使用它們。讓我們開(kāi)始吧。
1.輕松滾動(dòng)到頂部
如果您想使用 JavaScript 代碼創(chuàng)建一個(gè)滾動(dòng)到頂部的按鈕，方法 scrollTo() 將幫助您實(shí)現(xiàn)這一點(diǎn)。
該方法可以接受兩個(gè)坐標(biāo)作為參數(shù)，即水平軸的像素（“x”）和垂直軸的像素（“y”）。
因此，為了使該方法允許我們滾動(dòng)到文檔的頂部，您只需將兩個(gè)坐標(biāo)的值都設(shè)置為 0。
就像下面的代碼示例一樣：
const scrollTop = () => window.scrollTo(0, 0);
此外，如果你想添加一些平滑的滾動(dòng)，你可以添加下面的對(duì)象作為方法 scrollTo() 的參數(shù)。
const smoothTop =() => window.scrollTo({top: 0, behavior: 'smooth'});
2. 展平數(shù)組數(shù)組
下面的一行代碼使用方法 concat() 和展開(kāi)運(yùn)算符來(lái)展平一組數(shù)組。
這是代碼示例：
const flattenedArray = [].concat(...array);
因此，在使用嵌套數(shù)組時(shí)，這是一項(xiàng)非常有用的技術(shù)。
3. 查找數(shù)組中的最大值和最小值
如果您想在數(shù)組中找到最大值和最小值，可以使用一些方法和功能來(lái)實(shí)現(xiàn)。
如您所見(jiàn)，下面的一行代碼使用展開(kāi)運(yùn)算符以及“Math.max”和“Math.min”方法分別查找數(shù)組中的最大值和最小值。
這是代碼示例：
let max = Math.max(...array); //max value of the array
let min = Math.min(...array); //min value of the array
4.獲取網(wǎng)頁(yè)上選中的文字
作為開(kāi)發(fā)人員，有時(shí)您可能希望獲取用戶(hù)在網(wǎng)頁(yè)上選擇或突出顯示的文本。幸運(yùn)的是，JavaScript 方法 getSelection() 允許您這樣做。
您只需要將方法 toString() 與它一起使用，以便您可以將選定的文本作為字符串獲取。
看看下面的代碼：
const getSelectedTxt = () => window.getSelection().toString();
console.log(getSelectedTxt()); // "lorem ipsum"
如您所見(jiàn)，該方法將所選文本作為字符串返回。您可以使用 console.log() 方法來(lái)檢查。
5.輕松克隆對(duì)象
如果您想在 JavaScript 中輕松創(chuàng)建對(duì)象的淺表副本，方法 Object.assign() 可以幫助您。
這是代碼示例：
let cloneObject = Object.assign({}, object);
正如您所看到的，這是一種非常有用的技術(shù)，可以讓您了解何時(shí)需要在不更改原始對(duì)象的情況下制作對(duì)象的副本。
6.求一個(gè)字符串中特定字符的個(gè)數(shù)
為了找到字符串中特定字符或字母的總數(shù)，您需要使用方法 split() 和屬性 length 。
因此，您需要?jiǎng)?chuàng)建一個(gè)名為 charCount() 的函數(shù)，它帶有兩個(gè)參數(shù)：字符串本身和字符參數(shù) ( char )。然后您必須使用字符參數(shù)和長(zhǎng)度屬性拆分字符串。
下面是代碼示例，以便更好地理解：
const str = "elephant";
const charCount = (str, char) => str.split(char).length - 1;
charCount(str, "e"); //returns 2 (there are two "e" in the string "elephant").
請(qǐng)記住，當(dāng)我們使用方法 split() 時(shí)，字符串會(huì)轉(zhuǎn)換為數(shù)組，以便我們可以使用 length 屬性計(jì)算字符數(shù)。
另請(qǐng)注意，我們使用長(zhǎng)度減 1，因?yàn)樗饕?jì)數(shù)從 0 開(kāi)始，而不是眾所周知的 1。
7. 從數(shù)組中刪除重復(fù)項(xiàng)
下面的單行代碼使用展開(kāi)運(yùn)算符和 Set 對(duì)象從數(shù)組中刪除重復(fù)項(xiàng)。
這是代碼示例：
let arr = [5, 7, 5, 7, 4];
let unique = [...new Set(arr)];
console.log(unique); //returns [5, 7, 4]
Set 對(duì)象僅存儲(chǔ)唯一值，因此，以這種方式使用它是刪除重復(fù)項(xiàng)的有效方法。
8. 將用戶(hù)重定向到一個(gè)新的 URL
有時(shí)，當(dāng)用戶(hù)嘗試訪問(wèn)您的網(wǎng)站或 Web 應(yīng)用程序上的特定頁(yè)面時(shí)，您可能希望將他們重定向到另一個(gè) URL。
下面的 JavaScript 單行代碼可以幫助您完成此任務(wù)：
let urlRedirect = url => location.href = url;
urlRedirect("https://medium.com");
正如您在代碼中看到的，只需使用位置對(duì)象的屬性 href 并將 URL 參數(shù)分配給它。
9.輕松合并兩個(gè)對(duì)象
如果你想在 JavaScript 中合并兩個(gè)對(duì)象，methodObject.assign 可以讓您實(shí)現(xiàn)這一點(diǎn)。
此方法將一個(gè)對(duì)象的屬性復(fù)制到另一個(gè)對(duì)象，如您在下面的單行代碼中所見(jiàn)：
let merged = Object.assign({}, object1, object2);
10.將文本復(fù)制到剪貼板
如今，將文本復(fù)制到剪貼板是許多網(wǎng)站和網(wǎng)絡(luò)應(yīng)用程序的常見(jiàn)功能。好處是您可以在 JavaScript 中輕松做到這一點(diǎn)。
因此，下面的一行代碼允許您使用 JavaScript 輕松地將文本復(fù)制到剪貼板。
這是代碼示例：
const copyClipboard = (text) =>
navigator.clipboard?.writeText && navigator.clipboard.writeText(text);
copyClipboard("Hello World!"); //copies "hello world" to the clipboard.
總結(jié)
正如您在上面看到的，這些 JavaScript 單行代碼簡(jiǎn)單但功能強(qiáng)大，可以在您從事 Web 開(kāi)發(fā)項(xiàng)目時(shí)節(jié)省大量時(shí)間和精力。因此，只需一行代碼，您就可以實(shí)現(xiàn)很多很酷的事情。
如果您覺(jué)得我今天的內(nèi)容對(duì)您有幫助的話，請(qǐng)記得給我點(diǎn)個(gè)贊，如果你想閱讀更多關(guān)于前端技術(shù)的文章，請(qǐng)記得關(guān)注我。
學(xué)習(xí)更多技能
請(qǐng)點(diǎn)擊下方公眾號(hào)
