2021年你需要的7个JS Array方法

前言

文本翻译至 2021年您将需要的7种JS数组方法

JavaScript 为我们提供了大量处理数组的不同方法。我们将在短短几分钟内为您介绍7个基本知识，以提高您的JS开发技能

正文

1.Array.map（）

当我们在数组上使用该 .map() 方法时，它都会在原数组基础尚返回一个新的修改版本。该 .map() 方法具有循环遍历您的数组并且修改的功能。

.map() 每当您要更新数组中的每一项并且需要返回新数组时，都可以使用该方法

假设我们有一个包含汽车品牌的数组：

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

当然，我们认为所有的汽车品牌都很酷，我们需要给每个品牌来加以表达，我们可以使用 .map() 方法。

const coolCars = cars.map（car =>`$ {car}是一个非常酷的汽车品牌！`）;
//结果：
[“保时捷是一个非常酷的汽车品牌！”，“奥迪是一个非常酷的汽车品牌！”，“宝马是一个非常酷的汽车品牌！”，“大众汽车是一个非常酷的汽车品牌！”]]

image

太棒了！该 .map() 方法创建了一个新数组并将描述文本添加到每个项目。

很高兴的事，我们还知道如果使用 .map() 方法处理包含对象的数组

让我们有一堆价格不含税的汽车，然后使用加上含税价格 .map()

const carsWithPrice = [
  {brand: "保时捷", price: 100000},
  {brand: "奥迪", price: 80000}
];
const carsWithPriceAndTax = cars.map(carObject => {
  return {
    // 返回原对象
    ...carObject,
    // 返回新的含税的价格新值
    priceWithTax: carObject.price * 1.2
  }
});
// 结果:
[
  {brand: "保时捷", price: 100000, priceWithTax: 120000},
  {brand: "奥迪", price: 80000, priceWithTax: 96000}
];

image

总而言之，该.map() 方法是创建新数组，修改其内容并保持原始数组完整的一种极其通用的方法。

何时使用Array.map（）？

当您想要修改现有数组的内容并将结果存储为新变量时。

2. Array.filter（）

您几乎猜不到该方法会做什么。

该.filter()方法允许您根据特定条件获取数组中的项目。

就像该.map()方法一样，它将返回一个新数组，并保持原始数组不变。

例如，使用汽车示例，我们可以基于汽车的价格高于特定值来过滤数组。

在这里，我们有所有可用的汽车：

const cars = [
  {brand: "保时捷", price: 100000},
  {brand: "奥迪", price: 80000},
  {brand: "丰田", price: 30000}
];

现在，假设所有价值40,000或以上的汽车都非常昂贵。

我们可以使用该 .filter() 方法以两个不同的数组获取所有“便宜”和“昂贵”的汽车。

const expensiveCars = cars.filter(car => car.price >= 40000);
const cheapCars = cars.filter(car => car.price < 40000);
// 结果 - 昂贵的
[
  {brand: "保时捷", price: 100000},
  {brand: "奥迪", price: 80000}
];
// 结果 - 便宜的
[
  {brand: "丰田", price: 30000}
];

image

检查数组的每个项目是否符合条件，如果通过测试，则将其返回到新数组中-太棒了！

何时使用 Array.filter（）？

当您要从数组中删除不符合特定条件/条件的项目时。

3. Array.reduce（）

就现在而言，理解这一点可能有点困难

简单地说，在数组的每个项目上执行函数后，在数组上调用 .reduce（）会将其减小为单个值。

该 .reduce() 方法将回调函数作为其第一个参数，并将可选的初始值作为其第二个参数。如果未提供初始值，则使用第一个数组值。回调函数提供了accumulator和 currentValue 参数，用于执行简单计算。

我知道这可能有点复杂，但是没关系。

下面用一个简单的事例来展示 .reduce() 方法的使用

假设我们要获取数组中所有数字的总和。

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

然后，我们可以使用 .reduce（）方法将所有这些值加在一起。

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

image

使用该 .reduce() 方法的另一种用处是展平数组。已经有很多方法可以做到这一点，这就是其中一种。

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

image

何时使用该方法

当您想要改变数组的值将数组转换为单个值时。

4. Array.forEach（）

这是一个经典的方法

该 .forEach() 方法非常类似于常规 for 循环。

它遍历一个数组并在每个项目上执行一个函数。 .forEach（） 的第一个参数是一个回调函数，其中包括循环的当前值和索引。

让我们看一个使用我们的汽车的例子：

const cars = [
  {brand: "保时捷", price: 100000},
  {brand: "奥迪", price: 80000},
  {brand: "丰田", price: 30000}
];

我们可以遍历所有内容，并 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（）？

当您只想遍历任何数组的每个项目而无需构造新数组时。

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);
// Result - Expensive Car:
{brand: "Porsche", price: 100000}

image

何时使用Array.find（）？

当需要获取通过显式定义的测试的数组的第一项时

6. Array.every（）

也许您已经可以猜到此方法会做什么。

该 .every()方法将检查数组中的每个元素是否通过提供的条件。

如果数组中的所有元素都符合条件，则该方法将返回 true。如果没有，它将返回 false。

例如，我们可以使用该方法检查过去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

image

何时使用Array.every（）？

当您要确认数组的每个项目都通过显式定义的条件时。

7. Array.some（）

该 .some() 方法与方法.every()类似，但是如果数组中的所有元素都通过测试，则返回 true，而不是如果数组中的至少一个元素通过测试，则返回 true 。
如果该 .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);
// Result - Older than 5 Years:
false

image

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

当需要获取通过显式定义的测试的数组的第一项时。

结论

JavaScript 给我们提供了很多处理数组的不同方法。使用这些方法，您将能够升级JS开发技能，并使您的代码库更具可维护性。

哎呀，也许您再也不需要碰for循环了。

希望您今天学到了新东西！

关于

本文首发于 2021年你需要的7个JS Array方法