幾分鐘內提升技能的8個 JavaScript 方法
小編推薦： ofollow,noindex">掘金是一個面向程式員的高質量技術社群，從 一線大廠經驗分享到前端開發最佳實踐，無論是入門還是進階，來掘金你不會錯過前端開發的任何一個技術乾貨。
我們今天構建的大多數應用程式都需要進行某種資料收集修改。您最常遇到的常見操作是處理集合中的項。不要再使用 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（展開操作符）將陣列展開為其對應的元素。它也可以用於物件字面量。
為什麼我應該用它呢？
...
示例：
假如你想展示一個喜愛的水果列表，但不是通過一個迴圈函式的方式。你可以用一個擴充套件操作符，像這樣：
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 技能有所提升！