在新的一年我們學習這些有用的方法
JavaScript 為我們提供了許多處理陣列的不同方法。我們將在幾分鐘內為您介紹 7 個基本且常用的資料方法，以提高您的 JS 開發技能。
1. Array.map()
當你在陣列上使用 map() 方法的時候，它將在原始的陣列建立一個新的陣列。
這個 map() 方法接受一個引數，這個引數是個函式，這個函式可以去迴圈或遍歷陣列中的每個元素，也可以對裡面的每個元素進行修改，然後組合返回出一個新的陣列。
當你想在一個陣列中把它的元素修改或更新，然後儲存成一個新的陣列的時候，這個 .map() 方法就會派上用場。
假設我們有一個包含汽車品牌的陣列:
const cars = ["Porsche", "Audi", "BMW", "Volkswagen"];當然，我們認為所有的車都很酷，我們想新增一些文字來表達這一點。 我們可以使用 .map() 方法:
const coolCars = cars.map((car) => `${car} is a pretty cool car brand!`);
// 結果:
[
"Porsche is a pretty cool car brand!",
"Audi is a pretty cool car brand!",
"BMW is a pretty cool car brand!",
"Volkswagen is a pretty cool car brand!",
];這裡, 這個 map() 方法用於建立新的修改後的陣列
太棒了! 那個 map() 方法建立了一個新陣列，並將文字新增到每個元素。
有時候陣列包含物件(object)，我們又應該如何操作呢？
讓我們看下面的例子，給這個汽車新增價格屬性，變成物件的情況：
const carsWithPrice = [
{ brand: "Porsche", price: 100000 },
{ brand: "Audi", price: 80000 },
];
const carsWithPriceAndTax = cars.map((carObject) => {
return {
// Return the original car object
...carObject,
// but also add a new value containing the price with tax
priceWithTax: carObject.price * 1.2,
};
});
// 結果:
[
{ brand: "Porsche", price: 100000, priceWithTax: 120000 },
{ brand: "Audi", price: 80000, priceWithTax: 96000 },
];使用 map() 方法以建立包含含稅價格的新陣列
總之，map() 方法是一種非常常用的方法，用於建立新陣列、修改其內容並保持原始陣列不變。
何時使用 Array.map()？
當您想要修改現有陣列的內容並將結果儲存為新陣列的時候。
2. Array.filter()
你幾乎猜到這個方法是什麼的。
這個 .filter() 方法允許您根據特定條件獲取陣列中的元素。
就像 map() 方法一樣，它將返回一個新陣列並保持原始陣列不變。
例如，使用汽車的例子，我們可以用基於汽車價格高於某個值來過濾陣列。
在這裡，我們有所有可用的汽車:
const cars = [
{ brand: "Porsche", price: 100000 },
{ brand: "Audi", price: 80000 },
{ brand: "Toyota", price: 30000 },
];現在，假設所有價值 40,000 或更多的汽車都很貴。
我們可以使用 filter() 方法所有 “便宜” 和 “昂貴” 的汽車。
const expensiveCars = cars.filter((car) => car.price >= 40000);
const cheapCars = cars.filter((car) => car.price < 40000);
// 結果 - 貴車
[
{ brand: "Porsche", price: 100000 },
{ brand: "Audi", price: 80000 },
];
// 結果 - 便宜車
[{ brand: "Toyota", price: 30000 }];使用過濾方法從陣列中過濾 “便宜”、”昂貴”的汽車
檢查陣列的每個元素，看它是否符合標準，如果通過測試，它將在新陣列中返回。
何時使用 Array.filter()?
當您想要從陣列中刪除不符合特定條件/條件的元素時。
3. Array.reduce()
現在這個可能有點難以理解。
簡而言之，在陣列中呼叫 .reduce() 方法，它會通過執行一個函式或方法來迴圈遍歷陣列中的每個元素，最終返回出一個值。
那個 reduce() 方法將回撥函式作為其第一個引數，並將可選的初始值作為其第二個引數。如果未提供初始值，則使用陣列的第一個值。這個回撥函式將提供 accumulator 和 currentValue 引數用於執行 reduce 計算。
我知道這可能有點複雜，但沒關係。
這裡有一個簡單的例子來展示 reduce() 方法:
假設我們想要獲取陣列中所有數字的總值。
const numbers = [13, 65, 29, 81, 47];然後，我們可以使用 reduce () 方法將所有這些值加在一起。
const total = numbers.reduce(
(accumulator, currentValue) => accumulator + currentValue,
0
);
// 結果 - 總數:
235;使用 reduce 方法將陣列的所有值相加
使用的另一種 reduce() 函式的方式是展平陣列，已經有很多方法可以做到這一點，這就是其中之一。
const flattened = [
[0, 1],
[2, 3],
[4, 5],
].reduce((accumulator, currentValue) => accumulator.concat(currentValue), [])[
// Result - Flattened:
(0, 1, 2, 3, 4, 5)
];使用 reduce 方法展平陣列
何時使用 Array.reduce()?
當您想要通過運算元組的值將陣列轉換為單個值的時候。
4. Array.forEach()
現在這是一個經典。
那個 forEach() 方法的工作原理很像常規 for 迴圈。
它在陣列上迴圈並對每個專案執行一個函式。 .forEach() 的第一個引數是個函式，這個函式的引數，包含陣列的元素的當前值和索引。
讓我們看一個汽車的例子:
const cars = [
{ brand: "Porsche", price: 100000 },
{ brand: "Audi", price: 80000 },
{ brand: "Toyota", price: 30000 },
];我們可以遍歷陣列中的元素汽車，用 console.log 語句把汽車的品牌名和價格輸出來。
cars.forEach((car) => {
console.log(`The ${car.brand} will cost you ${car.price} before taxes`);
});
// 結果:
("The Porsche will cost you 100000 before taxes");
("The Audi will cost you 80000 before taxes");
("The Toyota will cost you 30000 before taxes");使用 forEach 方法去迴圈所有的汽車，然後用文字輸出它的品牌名和價格。
何時使用 Array.forEach()?
當您想要簡單地迴圈任何陣列的每個元素而不構造新陣列時。
5. Array.find()
這個 .find() 方法很像我們之前說的 .filter() 方法。
就像 .filter() 方法，您將能夠傳遞陣列值必須匹配的條件。
兩者的區別在於 .find() 將僅返回與您提供的條件匹配的第一個元素。
以汽車為例, 讓我們使用 .find() 方法在陣列中找到第一個最貴的汽車：
const cars = [
{brand: "Porsche", price: 100000},
{brand: "Audi", price: 80000},
{brand: "Toyota", price: 30000}
];
const expensiveCar = cars.find(car => car.price >= 40000);
// 結果 - 貴車:
{brand: "Porsche", price: 100000}使用 .find() 方法查詢陣列中的第一輛 “昂貴” 汽車
何時使用 Array.find()?
當你想要找到滿足條件的陣列中的第一個值的時候
6. Array.every()
也許你已經可以猜測這種方法是做什麼的。
這個 .every() 方法將檢查陣列中的所有元素是否通過提供的條件。
如果陣列中的所有元素都通過條件，則該方法將返回 true。否則，它將返回 false。
例如，我們可以使用 .every() 方法檢查所有的車是否可以在 5 內年製造。
const cars = [
{ brand: "Porsche", price: 100000, builtIn: 2018 },
{ brand: "Audi", price: 80000, builtIn: 2019 },
{ brand: "Toyota", price: 30000, builtIn: 2019 },
];
const carsYoungerThanFiveYears = cars.every((car) => car.builtIn >= 2016);
// Result - Younger than 5 Years:
true;使用 .every() 方法來確定是否所有的汽車都是在 5 年內製造的
何時使用 Array.every()?
當您想要確定陣列中的所有元素滿足特定條件的時候。
7. Array.some()
.some() 方法有點像 .every() 方法，但並不是所有元素的條件都滿足後才通過測試，而是隻要有其中一個元素滿足條件，就會通過測試的。
只要 .some 方法找到成功的陣列元素，就會停止遍歷查詢，就會返回 true，然後，如果直到找最後一個元素還沒成功，就會返回 false。
讓我們再次使用我們的汽車陣列，但是這次我們將檢查一些汽車是否超過 5 年。
const cars = [
{ brand: "Porsche", price: 100000, builtIn: 2018 },
{ brand: "Audi", price: 80000, builtIn: 2019 },
{ brand: "Toyota", price: 30000, builtIn: 2019 },
];
const carsOlderThanFiveYears = cars.some((car) => car.builtIn < 2016);
// 結果 - 小於 5 年的:
false;何時使用 Array.some()?
當你要在陣列中檢視是否有找到滿足條件的元素的時候
總結
這些方法都很簡單學習與理解，只要多寫例子就好，我們可以經常在各種專案中應用到它們。
本作品採用《CC 協議》，轉載必須註明作者和本文連結