在過(guò)去幾年中，JavaScript 已成為開發(fā)人員和工程師使用的最流行的編程語(yǔ)言之一。此外，JavaScript 的好處在于我們可以將它用于不同的用例和目的。

Web 開發(fā)、移動(dòng)開發(fā)、游戲開發(fā)、機(jī)器學(xué)習(xí)、人工智能，它可以在框架和庫(kù)的幫助下完成所有這些。但是，Web 開發(fā)人員更多地使用 JavaScript，使他們能夠使 Web 更具動(dòng)態(tài)性和交互性。

JavaScript 的偉大之處在于它有很多我們可以使用的很酷的特性。因此，這使我們能夠用更少的代碼完成許多事情，從而節(jié)省時(shí)間。

在 JavaScript 中編寫更少代碼并加快開發(fā)速度的方法之一是使用單行代碼和短代碼片段。

您應(yīng)該在 JavaScript 代碼中使用單行代碼的原因有很多。那是因?yàn)樗鼈兛梢允鼓拇a更短并且易于重構(gòu)。除此之外，它們更加簡(jiǎn)潔易讀。

因此，在本文中，我將與您分享一些有用的 JavaScript 單行代碼列表，您可以作為 Web 開發(fā)人員在代碼中使用它們。讓我們開始吧。

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() 和展開運(yùn)算符來(lái)展平一組數(shù)組。

這是代碼示例：

const flattenedArray = [].concat(...array);

因此，在使用嵌套數(shù)組時(shí)，這是一項(xiàng)非常有用的技術(shù)。

3. 查找數(shù)組中的最大值和最小值

如果您想在數(shù)組中找到最大值和最小值，可以使用一些方法和功能來(lái)實(shí)現(xiàn)。

如您所見，下面的一行代碼使用展開運(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è)上選中的文字

作為開發(fā)人員，有時(shí)您可能希望獲取用戶在網(wǎng)頁(yè)上選擇或突出顯示的文本。幸運(yùn)的是，JavaScript 方法 getSelection() 允許您這樣做。

您只需要將方法 toString() 與它一起使用，以便您可以將選定的文本作為字符串獲取。

看看下面的代碼：

const getSelectedTxt = () window.getSelection().toString();
console.log(getSelectedTxt()); // "lorem ipsum"

如您所見，該方法將所選文本作為字符串返回。您可以使用 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 開始，而不是眾所周知的 1。

7. 從數(shù)組中刪除重復(fù)項(xiàng)

下面的單行代碼使用展開運(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. 將用戶重定向到一個(gè)新的 URL

有時(shí)，當(dāng)用戶嘗試訪問(wèn)您的網(wǎng)站或 Web 應(yīng)用程序上的特定頁(yè)面時(shí)，您可能希望將他們重定向到另一個(gè) URL。

下面的 JavaScript 單行代碼可以幫助您完成此任務(wù)：

let urlRedirect = 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ì)象，如您在下面的單行代碼中所見：

let merged = Object.assign({}, object1, object2);

10.將文本復(fù)制到剪貼板

如今，將文本復(fù)制到剪貼板是許多網(wǎng)站和網(wǎng)絡(luò)應(yīng)用程序的常見功能。好處是您可以在 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 開發(fā)項(xiàng)目時(shí)節(jié)省大量時(shí)間和精力。因此，只需一行代碼，您就可以實(shí)現(xiàn)很多很酷的事情。