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

當你要在數組中查看是否有找到滿足條件的元素的時候

總結

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

發表評論
所有評論
還沒有人評論,想成為第一個評論的人麼? 請在上方評論欄輸入並且點擊發布.
相關文章