我們今天構建的大多數應用程序都需要進行某種數據收集修改。您最常遇到的常見操作是處理集合中的項。不要再使用 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 技能有所提升！
最後，有需要前端資料的小夥伴可以私信我“前端”、“前端資料”最
閱讀更多 前端全棧開發學習 的文章
