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}是一个非常酷的汽车品牌!`);
//结果:
[“保时捷是一个非常酷的汽车品牌!”,“奥迪是一个非常酷的汽车品牌!”,“宝马是一个非常酷的汽车品牌!”,“大众汽车是一个非常酷的汽车品牌!”]]

太棒了!该 .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}
];

总而言之,该.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}
];

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

何时使用 Array.filter()

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

3. Array.reduce()

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

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

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

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

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

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

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

然后,我们可以使用 .reduce()方法将所有这些值加在一起。

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

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

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

何时使用该方法

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

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"

何时使用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}

何时使用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

何时使用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

什么时候使用Array.some()?

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

结论

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

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

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

关于

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

本文采用 CC BY-NC-SA 3.0 Unported 协议进行许可
本文链接: https://www.ahwgs.cn/2021niannixuyaode7gejs-arrayfangfa.html