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

hfpp2012 發表於 2021-02-26
JavaScript

在 2021 年你需要掌握的 7 種關於 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() 方法將回撥函式作為其第一個引數,並將可選的初始值作為其第二個引數。如果未提供初始值,則使用陣列的第一個值。這個回撥函式將提供 accumulatorcurrentValue 引數用於執行 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()?

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

總結

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