幾分鐘內提高技能的8個 JavaScript 方法！

咱們今天構建的大多數應用程序都須要進行某種數據收集修改。您最常遇到的常見操做是處理集合中的項。不要再使用 for-loop 循環的傳統方式（ let i=0; i < value.length; i++ ）。

請注意，在 for 循環中使用 const 會報一個錯誤。緣由是由於它在每次執行期間從新賦值，所以 i 被 i++ 修改。因此每當你想到使用 const 或 let 時，問問本身 – 這個值會被從新聲明嗎？若是答案是確定的，請選擇 let ，若是不是，請選擇 const 。

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

也許你不喜歡箭頭功能，你不想花太多時間學習新東西，或者它們與你無關。放心，並非只有你這樣。我將向您展現如何在 ES5（普通函數）和 ES6（箭頭功能）中實現。

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

咱們將要關注的方法有：

• Spread operator（展開操做符）
• for…of 迭代器
• includes()
• some()
• every()
• filter()
• map()
• reduce()

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

1. Spread operator（展開操做符）
Spread operator（展開操做符）將數組展開爲其對應的元素。它也能夠用於對象字面量。

爲何我應該用它呢？

• 這是一種簡單且快速的方式來列出數組元素
• 同時適用於數組和對象
• 這是一種快速直觀的傳遞參數的方法
• 它只須要三個點 ...

示例：

假如你想展現一個喜好的水果列表，但不是經過一個循環函數的方式。你能夠用一個擴展操做符，像這樣：

JavaScript 代碼:

const favoriteFood = ['Pizza', 'Fries', 'Swedish-meatballs'];

console.log(...favoriteFood);

//Pizza Fries Swedish-meatballs

2. for…of 迭代器
for...of 語句循環/遍歷集合，爲你提供了修改特定元素的功能。 它取代傳統的 for-loop 方式。

爲何我應該用它呢？

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

示例：

假設你有一個工具箱，你想要展現裏面全部的工具。for...of 迭代器會讓它變得更簡單。

JavaScript 代碼:

const toolBox = ['Hammer', 'Screwdriver', 'Ruler']

for(const item of toolBox) {

console.log(item)

}

// Hammer

// Screwdriver

// Ruler

3. Includes() 方法
include() 方法被用來檢查數集合中是否包含指定的元素，若是存在則返回 true，不然返回 false。 請記住，它是區分大小寫的：若是集合中的某項元素是 SCHOOL，而且但你查詢的是 school ，那麼它將會返回 false。

爲何我應該用它呢？

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

示例：

好比，不管出於什麼緣由，你不知道車庫裏有什麼車，你須要一個系統檢查你想要的車是否在車庫裏。includes() 能夠拯救你！

JavaScript 代碼:

const garge = ['BMW', 'AUDI', 'VOLVO'];

const findCar = garge.includes('BMW');

console.log(findCar);

// true

4. Some() 方法
some() 方法檢查在數組中是否存在某些元素，若是存在返回true，不然返回 false 。這和 includes()方法類似，可是 some() 方法的參數是一個函數，而不是一個字符串。

爲何我應該用它呢？

• 它確保某些項目經過測試
• 它使用函數執行條件語句
• 使您的代碼更具聲明性
• 它足夠好用

示例：

假如你是一個俱樂部老闆，並不在意誰進入這俱樂部吧。可是有些人是不容許進來的，由於他們已經喝了不少酒（個人想象力很好）。查看如下 ES5 和 ES6 之間的差別：

ES5:

JavaScript 代碼:

const age = [16, 14, 18];

age.some(function(person) {

return person >= 18;

});

// Output: true

ES6:

JavaScript 代碼:

const age = [16, 14, 18];

age.some((person) => person >= 18);

// true

5. Every() 方法
every() 方法循環遍歷數組，檢查數組中的每一個元素項，並返回 true 或 false 。與 some() 概念類似。可是每一項都必須經過條件表達式，不然返回 false 。

爲何我應該用它呢？

• 它確保每一個項目都經過測試
• 您可使用函數執行條件語句
• 使您的代碼更具聲明性

示例：

上次你用 some()方法容許一些未成年學生進入俱樂部，有人舉報了這事，警察抓住了你。此次你不會讓這種狀況再次發生，你將用 every() 方法確保每個進來俱樂部的人都是知足年齡限制的。

ES5:

JavaScript 代碼:

const age = [15, 20, 19];

age.every(function(person) {

return person >= 18;

})

// Output: false

ES6:

JavaScript 代碼:

const age = [15, 20, 19];

age.every((person)=> person >= 18);

// false

6. Filter() 方法
filter() 方法建立一個包含全部經過測試的元素的新數組。

爲何我應該用它呢？

• 你能夠修改原始數組
• 你可讓你過濾掉那些你不須要的元素項
• 讓你的代碼可讀性更高

示例：

假如你只想要大於或者等於30的價格，過濾掉其餘價格。

ES5:

JavaScript 代碼:

//array

const prices = [25, 30, 15, 55, 40, 10];

prices.filter(function(price){

return price >= 30;

})

// Output: [30, 55, 40]

ES6:

JavaScript 代碼:

const prices = [25, 30, 15, 55, 40, 10];

prices.filter((price) => price >= 30);

// [30, 55, 40]

7. Map() 方法
在返回新數組方面，map() 方法跟 filter() 方法類似。可是，惟一的區別是它用於修改數組中的元素項。

爲何我應該用它呢？

• 它可讓你避免對原始數組進行修改
• 你能夠修改你所需的元素項
• 代碼可讀性更高

示例：

假如你有一份價格清單。 您的經理須要一個清單，以便展現在稅率增長25％後的新價格。 map()方法能夠幫助你。

ES5:

JavaScript 代碼:

const productPriceList = [200, 356, 1500, 5000];

productPriceList.map(function(item){

return item * 0.75;

})

// [150, 267, 1125, 3750]

ES6:

JavaScript 代碼:

const productPriceList = [200, 356, 1500, 5000];

productPriceList.map((item) => item * 0.75);

// [150, 267, 1125, 3750]

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

爲何我應該用它呢？

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

示例：

假如你想獲得這一週的消費總和，reduce()能夠幫你實。

ES5:

JavaScript 代碼:

const weeklyExpenses = [200, 350, 1500, 5000, 450, 680, 350]

weeklyExpenses.reduce(function(first, last) {

return first + last;

})

// 8530

ES6:

JavaScript 代碼:

const weeklyExpenses = [200, 350, 1500, 5000, 450, 680, 350]

weeklyExpenses.reduce((first, last) => first + last);

// 8530

但願你的 JavaScript 技能有所提高！
原文連接：https://www.jianshu.com/p/22f...