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

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

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

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

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

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

咱們將要關注的方法有：

1. Spread operator（展開操做符）
2. for…of 迭代器
3. includes()
4. some()
5. every()
6. filter()
7. map()
8. reduce()

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

1. Spread operator（展開操做符）

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

爲何我應該用它呢？

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

示例：

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

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 迭代器會讓它變得更簡單。

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() 能夠拯救你！

const garge = ['BMW', 'AUDI', 'VOLVO'];
const findCar = garge.includes('BMW');
console.log(findCar);
// true複製代碼

4. Some() 方法

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

爲何我應該用它呢？

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

示例：

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

ES5:

const age = [16, 14, 18];
age.some(function(person) {
return person >= 18;
});
// Output: true複製代碼

ES6:

const age = [16, 14, 18];
age.some((person) => person >= 18);
// true複製代碼

5. Every() 方法

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

爲何我應該用它呢？

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

示例：

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

ES5:

const age = [15, 20, 19];
age.every(function(person) {
return person >= 18;
})
// Output: false複製代碼

ES6:

const age = [15, 20, 19];
age.every((person)=> person >= 18);
// false複製代碼

6. Filter() 方法

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

爲何我應該用它呢？

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

示例：

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

ES5:

//array
const prices = [25, 30, 15, 55, 40, 10];
prices.filter(function(price){
return price >= 30;
})
// Output: [30, 55, 40]複製代碼

ES6:

const prices = [25, 30, 15, 55, 40, 10];
prices.filter((price) => price >= 30);
// [30, 55, 40]複製代碼

7. Map() 方法

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

爲何我應該用它呢？

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

示例：

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

ES5:

const productPriceList = [200, 356, 1500, 5000];
productPriceList.map(function(item){
return item * 0.75;
})
// [150, 267, 1125, 3750]複製代碼

ES6:

const productPriceList = [200, 356, 1500, 5000];
productPriceList.map((item) => item * 0.75);
// [150, 267, 1125, 3750]複製代碼

8. Reduce() 方法

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

爲何我應該用它呢？

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

示例：

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

ES5:

const weeklyExpenses = [200, 350, 1500, 5000, 450, 680, 350]
weeklyExpenses.reduce(function(first, last) {
return first + last;
})
// 8530複製代碼

ES6:

const weeklyExpenses = [200, 350, 1500, 5000, 450, 680, 350]
weeklyExpenses.reduce((first, last) => first + last);
// 8530複製代碼

但願你的 JavaScript 技能有所提高！