[譯]這些Javascript方法幾分鐘內提高你的技能

原文地址：These JavaScript methods will boost your skills in just a few minutes

咱們今天構建的大多數應用程序都須要進行某種數據收集修改。會常常遇到對集合中的項進行處理。忘記for循環傳統方式(let i=0; i < value.length; i++ )。

注意，在 使用for-loop時const報出一個錯誤。是由於它在每次執行期間從新聲明瞭值，所以i被i++修改了。因此每當你想到使用const或者let時考慮一下 - 這個值會被從新聲明嗎？若是答案是確定的，請選擇let ，若是不是，請選擇const。更多信息。

假設您要顯示產品列表並對集合進行分類，過濾，搜索，修改或更新。或者您可能但願執行快速計算，例如求和，乘法等。實現這一目標的最佳方法是什麼？

也許你不喜歡箭頭函數，不想花太多時間學習新東西，或者它們與你無關。別擔憂，我將向您展現如何在ES5（功能降級）和ES6（箭頭函數）中完成它。

請注意：箭頭函數和函數聲明/表達式不是等效的，不能盲目替換。請注意，this關鍵字在二者之間的工做方式不一樣。

咱們將要關注的方法：

1. Spread operator
2. for…of iterator
3. includes()
4. some()
5. every()
6. filter()
7. map()
8. reduce()

若是您想成爲更好的Web開發人員，開始本身的事業，教別人或提升您的開發技能，我將每週發佈關於最新Web開發語言的技巧和竅門。

Spread operator

Spread Operator將數組擴展爲其元素。它也能夠用於對象字面量。

爲何要用它？

• 這是一種簡單快速的方式來顯示數組的項
• 適用於數組和對象字面量
• 這是一種快速直觀的傳遞參數的方法
• 它只須要上面三個緣由就足以說明問題了......

示例：

假設您想顯示喜歡的食物列表而不想建立循環函數。可使用這樣的Spread operator：

for ... of iterator

for...of語句循環/遍歷集合，併爲您提供修改特定項的功能。它取代了傳統的for-loop作法。

爲何要用它？

• 這是添加或更新元素的簡單方法
• 執行計算（求和，乘法等）
• 使用條件語句時（if，while，switch等）
• 乾淨和可讀的代碼

示例：

假設您有一個工具箱，而且要顯示其中的全部工具。for...of迭代器很容易實現。

Includes()

includes()方法用於檢查集合中是否存在特定字符串，並返回true或false。請記住，它區分大小寫：若是集合中的項目是SCHOOL，而您搜索school，它將返回false。

我爲何要用它？

• 構建簡單的搜索功能
• 這是一種肯定字符串是否存在的直觀方法
• 使用條件語句來修改，過濾等
• 可讀代碼

示例：

假設您不知道車庫中有哪些車輛，您須要一個系統來檢查您想要的車是否存在。includes()來完成！

Some()

some()方法檢查數組中是否存在某些元素，並返回true或false。這有點相似於includes()方法的概念，除了參數是函數而不是字符串。

爲何要用它？

• 確保某些項目經過測試
• 使用函數執行條件語句
• 使代碼1清晰

示例：

假設您是俱樂部老闆，並不關心誰進入俱樂部。但有些人不容許進入，由於他們喝得太多。查看如下ES5和ES6之間的差別：

ES5：

ES6：

Every()

every()方法遍歷數組，檢查每一個項，並返回true或false。概念和some()相同。除了每一個項必須知足條件語句，不然它將返回false。

我爲何要用它？

• 確保每一個項都經過測試
• 可使用函數執行條件語句
• 使您的代碼清晰

示例：

最後一次容許some()未成年學生進入俱樂部時，有人報告此事而且警察抓住了您。此次你不會讓這種狀況發生，你將確保每一個人every()都經過了年齡限制。

ES5

ES6

Filter()

filter()方法建立一個包含全部經過條件的元素的新數組。

我爲何要用它？

• 能夠避免更改原數組
• 能夠過濾掉不須要的項
• 提供更易讀的代碼

示例：

假設想返回高於或等於30的價格。過濾掉全部其餘價格......

ES5

ES6

Map()

map()方法在返回新數組方面相似於filter()方法。可是，惟一的區別是它用於修改項。

我爲何要用它？

• 能夠避免對原數組進行更改
• 能夠修改所需的項
• 提供更易讀的代碼

示例：

假設有一個包含價格的產品列表。經理須要一個清單，以便在稅率減小25％後顯示新價格。map()方法能夠完成。

ES5

ES6

Reduce()

reduce()方法可用於將數組轉換爲其餘內容，能夠是整數，對象，承諾鏈（承諾的順序執行）等。出於實際緣由，一個簡單的用例是對整數列表求和。簡而言之，它將整個數組「減小」爲一個值。

我爲何要用它？

• 執行計算
• 計算一個值
• 計算重複數
• 按屬性分組對象
• 按順序執行promises
• 這是一種快速執行計算的方法

示例：

假設您要查找一週的總花銷，使用reduce()得到該值。

ES5

ES6