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

sunshine楊小咩發表於2018-09-28

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

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

注意,在 使用for-loopconst報出一個錯誤。是因為它在每次執行期間重新宣告瞭值,因此ii++修改了。所以每當你想到使用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

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

for ... of iterator

for...of語句迴圈/遍歷集合,併為您提供修改特定項的功能。它取代了傳統的for-loop做法。

為什麼要用它?

  • 這是新增或更新元素的簡單方法
  • 執行計算(求和,乘法等)
  • 使用條件語句時(if,while,switch等)
  • 乾淨和可讀的程式碼

示例:

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

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

Includes()

includes()方法用於檢查集合中是否存在特定字串,並返回truefalse。請記住,它區分大小寫:如果集合中的專案是SCHOOL,而您搜尋school,它將返回false

我為什麼要用它?

  • 構建簡單的搜尋功能
  • 這是一種確定字串是否存在的直觀方法
  • 使用條件語句來修改,過濾等
  • 可讀程式碼

示例:

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

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

Some()

some()方法檢查陣列中是否存在某些元素,並返回truefalse。這有點類似於includes()方法的概念,除了引數是函式而不是字串。

為什麼要用它?

  • 確保某些專案通過測試
  • 使用函式執行條件語句
  • 使程式碼1清晰

示例:

假設您是俱樂部老闆,並不關心誰進入俱樂部。但有些人不允許進入,因為他們喝得太多。檢視以下ES5和ES6之間的差異:

ES5:

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

Every()

every()方法遍歷陣列,檢查每個項,並返回truefalse。概念和some()相同。除了每個項必須滿足條件語句,否則它將返回false

我為什麼要用它?

  • 確保每個項都通過測試
  • 可以使用函式執行條件語句
  • 使您的程式碼清晰

示例:

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

ES5

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

ES6

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

Filter()

filter()方法建立一個包含所有通過條件的元素的新陣列。

我為什麼要用它?

  • 可以避免更改原陣列
  • 可以過濾掉不需要的項
  • 提供更易讀的程式碼

示例:

假設想返回高於或等於30的價格。過濾掉所有其他價格......

ES5

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

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

Map()

map()方法在返回新陣列方面類似於filter()方法。但是,唯一的區別是它用於修改項。

我為什麼要用它?

  • 可以避免對原陣列進行更改
  • 可以修改所需的項
  • 提供更易讀的程式碼

示例:

假設有一個包含價格的產品列表。經理需要一個清單,以便在稅率減少25%後顯示新價格。map()方法可以完成。

ES5

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

Reduce()

reduce()方法可用於將陣列轉換為其他內容,可以是整數,物件,承諾鏈(承諾的順序執行)等。出於實際原因,一個簡單的用例是對整數列表求和。簡而言之,它將整個陣列“減少”為一個值。

我為什麼要用它?

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

示例:

假設您要查詢一週的總花銷,使用reduce()獲得該值。

ES5

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

相關文章