前言

文本翻譯至 2021年您將需要的7種JS數(shù)組方法

JavaScript 為我們提供了大量處理數(shù)組的不同方法。我們將在短短幾分鐘內(nèi)為您介紹7個基本知識，以提高您的JS開發(fā)技能

正文

1.Array.map（）

當(dāng)我們在數(shù)組上使用該 .map() 方法時，它都會在原數(shù)組基礎(chǔ)尚返回一個新的修改版本。該 .map() 方法具有循環(huán)遍歷您的數(shù)組并且修改的功能。

.map() 每當(dāng)您要更新數(shù)組中的每一項并且需要返回新數(shù)組時，都可以使用該方法

假設(shè)我們有一個包含汽車品牌的數(shù)組：

const cars = ["Porsche", "Audi", "BMW", "Volkswagen"];

當(dāng)然，我們認(rèn)為所有的汽車品牌都很酷，我們需要給每個品牌來加以表達(dá)，我們可以使用 .map() 方法。

const coolCars = cars.map（car =>`$ {car}是一個非?？岬钠嚻放?！`）;
//結(jié)果：
[“保時捷是一個非?？岬钠嚻放?！”，“奧迪是一個非常酷的汽車品牌！”，“寶馬是一個非?？岬钠嚻放疲　?，“大眾汽車是一個非?？岬钠嚻放?！”]]

image

太棒了！該 .map() 方法創(chuàng)建了一個新數(shù)組并將描述文本添加到每個項目。

很高興的事，我們還知道如果使用 .map() 方法處理包含對象的數(shù)組

讓我們有一堆價格不含稅的汽車，然后使用加上含稅價格 .map()

const carsWithPrice = [
  {brand: "保時捷", price: 100000},
  {brand: "奧迪", price: 80000}
];
const carsWithPriceAndTax = cars.map(carObject => {
  return {
    // 返回原對象
    ...carObject,
    // 返回新的含稅的價格新值
    priceWithTax: carObject.price * 1.2
  }
});
// 結(jié)果:
[
  {brand: "保時捷", price: 100000, priceWithTax: 120000},
  {brand: "奧迪", price: 80000, priceWithTax: 96000}
];

image

總而言之，該.map() 方法是創(chuàng)建新數(shù)組，修改其內(nèi)容并保持原始數(shù)組完整的一種極其通用的方法。

何時使用Array.map（）？

當(dāng)您想要修改現(xiàn)有數(shù)組的內(nèi)容并將結(jié)果存儲為新變量時。

2. Array.filter（）

您幾乎猜不到該方法會做什么。

該.filter()方法允許您根據(jù)特定條件獲取數(shù)組中的項目。

就像該.map()方法一樣，它將返回一個新數(shù)組，并保持原始數(shù)組不變。

例如，使用汽車示例，我們可以基于汽車的價格高于特定值來過濾數(shù)組。

在這里，我們有所有可用的汽車：

const cars = [
  {brand: "保時捷", price: 100000},
  {brand: "奧迪", price: 80000},
  {brand: "豐田", price: 30000}
];

現(xiàn)在，假設(shè)所有價值40,000或以上的汽車都非常昂貴。

我們可以使用該 .filter() 方法以兩個不同的數(shù)組獲取所有“便宜”和“昂貴”的汽車。

const expensiveCars = cars.filter(car => car.price >= 40000);
const cheapCars = cars.filter(car => car.price < 40000);
// 結(jié)果 - 昂貴的
[
  {brand: "保時捷", price: 100000},
  {brand: "奧迪", price: 80000}
];
// 結(jié)果 - 便宜的
[
  {brand: "豐田", price: 30000}
];

image

檢查數(shù)組的每個項目是否符合條件，如果通過測試，則將其返回到新數(shù)組中-太棒了！

何時使用 Array.filter（）？

當(dāng)您要從數(shù)組中刪除不符合特定條件/條件的項目時。

3. Array.reduce（）

就現(xiàn)在而言，理解這一點可能有點困難

簡單地說，在數(shù)組的每個項目上執(zhí)行函數(shù)后，在數(shù)組上調(diào)用 .reduce（）會將其減小為單個值。

該 .reduce() 方法將回調(diào)函數(shù)作為其第一個參數(shù)，并將可選的初始值作為其第二個參數(shù)。如果未提供初始值，則使用第一個數(shù)組值。回調(diào)函數(shù)提供了accumulator和 currentValue 參數(shù)，用于執(zhí)行簡單計算。

我知道這可能有點復(fù)雜，但是沒關(guān)系。

下面用一個簡單的事例來展示 .reduce() 方法的使用

假設(shè)我們要獲取數(shù)組中所有數(shù)字的總和。

const numbers = [13, 65, 29, 81, 47];

然后，我們可以使用 .reduce（）方法將所有這些值加在一起。

const total = numbers.reduce((accumulator, currentValue) => accumulator + currentValue, 0);
// Result - Total:
235

image

使用該 .reduce() 方法的另一種用處是展平數(shù)組。已經(jīng)有很多方法可以做到這一點，這就是其中一種。

const flattened = [[0, 1], [2, 3], [4, 5]].reduce(
  ( accumulator, currentValue ) => accumulator.concat(currentValue),
  []
)
// Result - Flattened:
[0, 1, 2, 3, 4, 5]

image

何時使用該方法

當(dāng)您想要改變數(shù)組的值將數(shù)組轉(zhuǎn)換為單個值時。

4. Array.forEach（）

這是一個經(jīng)典的方法

該 .forEach() 方法非常類似于常規(guī) for 循環(huán)。

它遍歷一個數(shù)組并在每個項目上執(zhí)行一個函數(shù)。 .forEach（） 的第一個參數(shù)是一個回調(diào)函數(shù)，其中包括循環(huán)的當(dāng)前值和索引。

讓我們看一個使用我們的汽車的例子：

const cars = [
  {brand: "保時捷", price: 100000},
  {brand: "奧迪", price: 80000},
  {brand: "豐田", price: 30000}
];

我們可以遍歷所有內(nèi)容，并 console.log 打印包含汽車品牌和價格的句子

cars.forEach(car => {
  console.log(`The ${car.brand} will cost you ${car.price} before taxes`);
});
// Result:
"The Porsche will cost you 100000 before taxes"
"The Audi will cost you 80000 before taxes"
"The Toyota will cost you 30000 before taxes"

image

何時使用Array.forEach（）？

當(dāng)您只想遍歷任何數(shù)組的每個項目而無需構(gòu)造新數(shù)組時。

5. Array.find（）

該 .find() 方法看起來與 .filter() 很類似

就像.filter（）方法一樣，您可以傳入數(shù)組符合條件的判斷

兩者之間的區(qū)別是，.find() 僅返回與您提供的條件匹配的第一個元素。

使用汽車示例，讓我們使用該 .find() 方法獲得數(shù)組中遇到的第一輛昂貴的汽車。

const cars = [
  {brand: "Porsche", price: 100000},
  {brand: "Audi", price: 80000},
  {brand: "Toyota", price: 30000}
];
const expensiveCar = cars.find(car => car.price >= 40000);
// Result - Expensive Car:
{brand: "Porsche", price: 100000}

image

何時使用Array.find（）？

當(dāng)需要獲取通過顯式定義的測試的數(shù)組的第一項時

6. Array.every（）

也許您已經(jīng)可以猜到此方法會做什么。

該 .every()方法將檢查數(shù)組中的每個元素是否通過提供的條件。

如果數(shù)組中的所有元素都符合條件，則該方法將返回 true。如果沒有，它將返回 false。

例如，我們可以使用該方法檢查過去5年內(nèi)是否制造了所有汽車。

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

image

何時使用Array.every（）？

當(dāng)您要確認(rèn)數(shù)組的每個項目都通過顯式定義的條件時。

7. Array.some（）

該 .some() 方法與方法.every()類似，但是如果數(shù)組中的所有元素都通過測試，則返回 true，而不是如果數(shù)組中的至少一個元素通過測試，則返回 true 。
如果該 .some() 方法找到成功的數(shù)組元素，它將停止并返回 true。否則返回 false

讓我們再次使用汽車數(shù)組，但是這次我們將檢查某些汽車是否超過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);
// Result - Older than 5 Years:
false

image

什么時候使用Array.some（）？

當(dāng)需要獲取通過顯式定義的測試的數(shù)組的第一項時。

結(jié)論

JavaScript 給我們提供了很多處理數(shù)組的不同方法。使用這些方法，您將能夠升級JS開發(fā)技能，并使您的代碼庫更具可維護性。

哎呀，也許您再也不需要碰for循環(huán)了。

希望您今天學(xué)到了新東西！

關(guān)于

本文首發(fā)于 2021年你需要的7個JS Array方法