你需要知道的 5 个 JavaScript 数组方法！

在开发应用程序的过程中，你会发现自己经常使用数组。那么，让我们来看看数组的 5 个方法。

为了用示例向您展示所有方法，我将创建一个简单的数组，其中包含一些水果及其价格。

const fruits = [
   {
    name: "Mango",
    price: 3,
  },
  {
    name: "Apple",
    price: 5,
  },
  {
    name: "Banana",
    price: 10,
  },
];

map 函数类似于循环，如果你是一名 React 开发者，你可能已经经常看到这个函数被使用。那么，让我们通过一个例子来更好地理解它——

function getFruitNames() {
  return fruits.map((fruit) => fruit.name);
}

console.log(getFruitNames());

该getFruitNames函数遍历水果数组，并返回每种水果的名称。因此，如果我们运行该函数，它将返回一个包含所有水果名称的数组。

['Mango', 'Apple', 'Banana']

如果您想根据某些条件筛选出一些产品，例如只选择价格超过 4 的水果，那么我们将使用筛选功能。以下是筛选功能的使用方法：

function getCostlyFruits() {
  return fruits.filter((fruit) => fruit.price > 4);
}

console.log(getCostlyFruits());

此函数返回-

[
  { name: "Apple", quantity: 5 },
  { name: "Banana", quantity: 10 },
];

Reduce 函数可以让你以非常简单的方式将数组中的多个数字相加。

让我们看看它的实际应用——

function getTotalCost() {
  return fruits.reduce((acc, fruit) => acc + fruit.price, 0);
}

console.log(getTotalCost());

所以第一个参数是前面几个数字相加得到的数字，第二个参数是要加到第一个数字上的数值。末尾的 0 可以替换成你希望计数开始时的数字。

此函数输出一个数字，在本例中为：18

如果你想根据价格或名称查找水果，那么这就是你要找的方法。

function getFruitByName(name) {
  return fruits.find((fruit) => fruit.name === name);
}

console.log(getFruitByName("Mango"));

运行此命令后将返回 Mango 对象。

{ name: 'Mango', price: 3 }

这个方法可以让你检查数组中是否存在某个元素。假设我想检查水果数组中是否存在香蕉。如果存在，则返回 true，否则返回 false。你不能直接检查数组中对象内部的元素，所以我将使用getFruitNames函数中定义的数组。

const fruitNames = getFruitNames();

console.log(fruitNames.includes("Orange"));

这将返回false“橙子不在水果数组中”的错误信息，但如果我们尝试输入“苹果”，则会返回true“-”。

const fruitNames = getFruitNames();

console.log(fruitNames.includes("Apple"));

希望这篇文章对你有帮助。如有任何疑问，请在评论区留言。下次见！✌️

实用链接-

CodePen

菜单