這些JavaScript方法將會在幾分鐘內提升你的技能

這些JavaScript方法將會在幾分鐘內提升你的技能

如今建立的大多數應用都會須要對一些數據集合作修改。處理集合中的元素是你最可能遇到的操做。不要再使用常規的像是(const i; i < value.length; i++ )的for-loop方式。
若是你想要展現一個商品列表，而且對這個數據集合作分類、篩選、搜索、修改和更新。或者你想作一些快速計算好比求和，相乘等等。實現這些操做的最佳方式是什麼？
可能你不喜歡箭頭函數，你也不想花費太多時間去學習這些新東西，或者它們跟你沒有關係。放心，並非只有你這樣。我會同時在ES5（普通函數）和ES6（箭頭函數）中展現給你看怎麼實現。
注意：箭頭函數和函數聲明/表達式不是等價的，並且也不能盲目替換。你要記得this關鍵字在二者之間的做用不同的。

這些方法將會被使用

1. Spread operator（擴展運算符，三個點）
2. for…of iterator
3. includes()
4. some()
5. every()
6. filter()
7. map()
8. reduce()

1. 擴展操做符

擴展運算符用於把一個數組展開變爲一個數組元素序列（一系列逗號隔開的值）。也能夠展開對象字面量。

爲何我應該用它？

• 簡單且快速的方式列出數組元素
• 同時用於數組和對象
• 快速且直觀的方式傳遞參數
• 只須要寫三個點

例子：

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

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

console.log(...favoriteFood);
//Pizza Fries Swedish-meatballs

2. for…of 迭代器

for...of利用循環/迭代器表達式遍歷集合，爲你提供了修改特定元素的能力。它能夠替代常規的for-loop方式。

爲何我應該用它？

• 一種簡單的方式添加、更新一個元素
• 執行計算（累加、相乘）
• 代碼簡單，可讀性高

例子：

若是你有一個工具箱，你想要展現裏面全部的工具。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方法有幾分類似，可是參數是一個函數，而不是一個字符串。

爲何我應該用它？

• 能夠確保某些項測試經過
• 用函數執行條件表達式
• 使你的代碼更直觀
• 它很是好用

例子：

假如你是一個酒吧老闆，也不在意誰進入這家酒吧。可是某些人是不容許進來的，由於他們已經喝了不少酒了。下面分別用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()方法用來把一個數組轉化爲一個int值，一個對象，一個promises串（順序執行的promises）等等。實際上，一個簡單的用例就是對一系列int值求和。簡單來講，它就是把數組中的全部值最終"縮短"爲一個值。

爲何我應該用它？

• 合併計算爲一個值
• 重複執行計算
• 把對象按照屬性分組
• 順序執行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

原文連接：These JavaScript methods will boost your skills in just a few minutes