在 2021 年你需要掌握的 7 種關於 JavaScript 的陣列方法

hfpp2012發表於2021-02-26
JavaScript陣列

在新的一年我們學習這些有用的方法

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()?

當你要在陣列中檢視是否有找到滿足條件的元素的時候

總結

這些方法都很簡單學習與理解，只要多寫例子就好，我們可以經常在各種專案中應用到它們。

相關文章