JavaScript 最初是為了給網(wǎng)站添加一些功能而被設(shè)計(jì)出來的簡單語言。但是時(shí)至今日，它無處不在，而且還更加復(fù)雜了。隨著 Web 應(yīng)用程序越來越復(fù)雜，JavaScript 也發(fā)展得越來越快。編寫簡潔、可讀且可維護(hù)的 JavaScript 程序不再像以前那么容易了。今天我們總結(jié) 9 個(gè)實(shí)用的 JavaScript 技巧，幫助你更優(yōu)雅的編寫前端代碼

1. 以 JavaScript 方式打破嵌套循環(huán)

許多編程語言都有用于跳出循環(huán)的break關(guān)鍵字。然而，該關(guān)鍵字僅用于跳出當(dāng)前循環(huán)。如果您必須打破嵌套循環(huán)，則可能很難保持代碼整潔。

例如，如何實(shí)現(xiàn)以下代碼？

在其他語言中，您可能需要將布爾變量聲明為外部循環(huán)的“flags”，并在進(jìn)入相應(yīng)循環(huán)時(shí)檢查中斷的“標(biāo)志”。此方法有效，但如果有很多布爾標(biāo)志，會(huì)使您的代碼有點(diǎn)混亂。

JavaScript 針對(duì)這種場景提供了語法級(jí)的解決方案——label。

您可以使用標(biāo)簽來標(biāo)識(shí)循環(huán)，然后參考該標(biāo)簽來打破相應(yīng)的循環(huán)。

因此，上述代碼的JavaScript實(shí)現(xiàn)方式如下：

Loop1 和 Loop2 是這兩個(gè)外部循環(huán)的標(biāo)簽，因此使用其標(biāo)簽可以輕松打破匹配的循環(huán)。無需將其他變量聲明為“flags”。

2. 利用擴(kuò)展運(yùn)算符進(jìn)行解構(gòu)賦值

擴(kuò)展運(yùn)算符是整潔 JavaScript 程序的關(guān)鍵。

如上面的示例所示，我們使用了一個(gè)簡單的三個(gè)點(diǎn)的擴(kuò)展運(yùn)算符，將leader[“me”]的值分配給名為me的變量，并將其他鍵值對(duì)分配給數(shù)組others。

在 React 中，此技巧通常用于在構(gòu)建 UI 組件時(shí)從 props 接收多個(gè)值。

3. 淺復(fù)制對(duì)象或數(shù)組的幾種方法

眾所周知，JavaScript 中的對(duì)象和數(shù)組等非原始數(shù)據(jù)類型是通過引用傳遞的。

因此，如下例所示，更改“新”數(shù)組也會(huì)更改原始數(shù)組：

要真正將數(shù)組 a 復(fù)制到新數(shù)組 b，JavaScript 中至少有 4 種方法。

使用 slice() 方法

slice()方法是提取數(shù)組的一部分。鑒于它在新數(shù)組中返回提取的部分，我們可以提取整個(gè)數(shù)組并將返回的數(shù)組作為副本：

使用擴(kuò)展運(yùn)算符

擴(kuò)展運(yùn)算符不僅擅長解構(gòu)賦值，還能夠從數(shù)組或?qū)ο笾薪獍?xiàng)目：

使用內(nèi)置的 Array.from() 方法

事實(shí)上，有一個(gè)專門設(shè)計(jì)的方法來進(jìn)行復(fù)制——Array.from()：

使用 concat() 方法

concat() 方法用于合并兩個(gè)或多個(gè)數(shù)組。由于此方法返回一個(gè)新數(shù)組而不更改現(xiàn)有數(shù)組，因此我們也可以利用它進(jìn)行復(fù)制：

另一種方法是使用內(nèi)置的 Object.assign() 方法：

這種類型的復(fù)制實(shí)際上稱為淺復(fù)制，這意味著它只有一層深。它僅復(fù)制元素的引用，而不復(fù)制元素本身。因此，如果元素是對(duì)象或數(shù)組，復(fù)制的數(shù)組仍將引用相同的對(duì)象或數(shù)組。

例如，如果數(shù)組 a 包含一個(gè)內(nèi)部數(shù)組（兩級(jí)深），則淺拷貝無法真正復(fù)制它們，并且編輯數(shù)組 b 的內(nèi)部數(shù)組也會(huì)更改 a 的：

4. 使用 JSON 技巧進(jìn)行深度復(fù)制

要實(shí)現(xiàn)深度復(fù)制，一個(gè)流行的技巧是結(jié)合使用 JSON.stringify() 和 JSON.parse()。

這個(gè)想法是將對(duì)象（或數(shù)組）序列化為 JSON 格式的字符串，然后將其解析回新對(duì)象。此過程有效且優(yōu)雅地創(chuàng)建原始數(shù)組或?qū)ο蟮纳顚痈北荆?/p>

基于 JSON 的技巧在大多數(shù)簡單情況下都很有用。但是，我們需要知道，要使該方法有效，對(duì)象必須是 JSON 可序列化的。

我們看一個(gè)反例：

obj['func'] 的值是一個(gè)函數(shù)。它不能再通過 JSON 技巧進(jìn)行復(fù)制。

在這種情況下，我們可以利用一個(gè)著名的第三方 JS 庫 lodash：

如上所示，lodash 中的 cloneDeep 方法完美克隆了 obj 內(nèi)的函數(shù)，并且可以在新的 cp_obj 上成功執(zhí)行。

5. 熟練地實(shí)現(xiàn)For循環(huán)

如果您仍在 JavaScript 中使用 C/C++ 風(fēng)格的 for 循環(huán)，那么，您肯定需要提升您的技能。

當(dāng)然，下面的代碼是正確的，但它還不夠“JavaScript”。

在 JavaScript 中編寫上述代碼的慣用方法如下：

使用 forEach() 方法

forEach 方法非常適合迭代數(shù)組的元素：

使用map()函數(shù)

如果您閱讀開源 JavaScript 程序，您可能會(huì)遇到 map() 函數(shù)。它是 JavaScript 中最流行的方法之一：

map() 函數(shù)的行為與 forEach() 基本相似，但有一個(gè)顯著差異：

map() 方法返回一個(gè)與原始數(shù)組長度相同的新數(shù)組，其中每個(gè)元素都是對(duì)相應(yīng)元素調(diào)用函數(shù)的結(jié)果。原始數(shù)組保持不變。forEach() 方法不返回任何內(nèi)容。

以下代碼說明了如何使用map()函數(shù)獲取新數(shù)組：

但是，我們無法使用 forEach() 函數(shù)獲取新數(shù)組：

使用 for...of... 結(jié)構(gòu)

ES6 是 JavaScript 的一個(gè)里程碑。這個(gè)版本引入了許多好的功能。“for...of...”方法就是其中之一。

使用 for...in... 結(jié)構(gòu)

“for...in...”語法也能夠?qū)崿F(xiàn)與我們相同的功能。但我們應(yīng)該注意“for…in…”和“for…of…”之間的區(qū)別。下面的代碼片段對(duì)此進(jìn)行了解釋：

6. 刪除數(shù)組重復(fù)值的最快方法

ES6 為 JavaScrip 引入了一種新的數(shù)據(jù)結(jié)構(gòu)——集合。集合是唯一的項(xiàng)目的集合。

由于集合的特性，它使得刪除數(shù)組的重復(fù)值變得更加簡單。

如上面的程序所示，我們可以利用展開運(yùn)算符和 Set() 方法來方便地獲取數(shù)組的唯一元素。

7. 用一行代碼反轉(zhuǎn)字符串

要在 JavaScript 中反轉(zhuǎn)字符串，我們不需要編寫 for 循環(huán)。

執(zhí)行此操作需要 3 個(gè)步驟：

• 將字符串拆分為數(shù)組

• 反轉(zhuǎn)數(shù)組

• 將數(shù)組轉(zhuǎn)換為字符串

這 3 個(gè)步驟需要利用 3 種不同的內(nèi)置方法，如下所示：

這是一句不錯(cuò)的俏皮話，但說實(shí)話，JS 反轉(zhuǎn)字符串的方式并不像 Python 那樣優(yōu)雅。由于其優(yōu)美的切片語法，Python 可以更簡潔地完成同樣的事情：

順便說一句，檢查 JavaScript 字符串是否為回文的一個(gè)簡單方法是將字符串與其反轉(zhuǎn)版本進(jìn)行比較：

8.快速計(jì)算數(shù)組中的元素

如何計(jì)算 JavaScript 數(shù)組中的每個(gè)元素？

使用for循環(huán)一項(xiàng)一項(xiàng)地遍歷項(xiàng)目并在此過程中對(duì)它們進(jìn)行計(jì)數(shù)？

這是一個(gè)解決方案，但根本不是一個(gè)優(yōu)雅的解決方案。我想說 lodash 是一個(gè)超級(jí)有用的 JS 庫：

如果你不想使用第三方庫，自己實(shí)現(xiàn)類似的功能并不難：

如果您只需要計(jì)算一個(gè)特定項(xiàng)目，則 filter() 方法是一個(gè)不錯(cuò)的選擇：

9. 使用逗號(hào)運(yùn)算符簡化代碼

由于逗號(hào)運(yùn)算符的語法，逗號(hào)在 JavaScript 中更加強(qiáng)大。

逗號(hào) (,) 運(yùn)算符計(jì)算每個(gè)表達(dá)式（從左到右）并返回最后一個(gè)表達(dá)式的值。如果你能熟練地利用它的力量，這對(duì)簡化你的代碼將會(huì)非常有幫助。

例如，以下程序演示了如何利用逗號(hào)運(yùn)算符通過一行代碼實(shí)現(xiàn)兩個(gè)不同的目的：

鑒于逗號(hào)運(yùn)算符始終返回最后一個(gè)表達(dá)式的結(jié)果，我們可以利用此功能來避免編寫許多 return 關(guān)鍵字。

例如，以下代碼的 get_author() 函數(shù)返回更改后的 arr：

這是讓逗號(hào)運(yùn)算符炫耀的最佳：場景

這9個(gè)方法，無論你的新晉職場的小白，還是前端大神在實(shí)際的開發(fā)過程中都非常的實(shí)用，希望可以幫帶你！