vue forEach循环数组拿到自己想要的数据方法

我来为您详细讲解vue forEach循环数组拿到自己想要的数据方法的完整攻略。

内容概述

1. 什么是forEach循环
2. forEach方法与for循环的区别
3. 遍历普通数组获取数据
4. 遍历对象数组获取数据
5. 示例说明

什么是forEach循环

forEach是一个数组方法，它会遍历数组中的每一个元素，并对其执行指定的回调函数。它可以替代常用的for循环，在遍历数组的时候更为方便。

forEach方法与for循环的区别

使用for循环遍历数组时，需要通过数组的索引来获取元素值并进行操作。而使用forEach方法则可以直接获取元素值并进行操作，离开了索引，大大简化了代码。此外，forEach方法本身不会返回任何结果，它只是对数组进行遍历操作，并通过回调函数来处理每个元素。

遍历普通数组获取数据

首先，我们来看一种遍历普通数组获取数据的方法。假设我们有一个由数字组成的数组，我们想要抽取其中大于10的数字。代码如下所示：

const arr = [3, 15, 8, 20, 10, 18];

arr.forEach((item, index) => {
  if (item > 10) {
    console.log(`第${index + 1}个元素:${item}`);
  }
});

在上面的代码中，我们先定义了一个由数字组成的数组，然后执行了forEach方法，传入了一个回调函数。回调函数中的item表示当前遍历到的元素值，index表示当前元素在数组中的索引。通过判断item是否大于10，我们就可以抽取出我们想要的数字并输出到控制台上。

遍历对象数组获取数据

接下来，我们看一下如何遍历对象数组获取到我们的数据。假设我们有一个对象数组，数组中的元素都是对象，每个对象都有相同的几个属性，我们想要把这些属性都输出到控制台上。代码如下所示：

const arr = [
  { name: "张三", age: 22 },
  { name: "李四", age: 20 },
  { name: "王五", age: 25 },
];

arr.forEach((item, index) => {
  console.log(
    `第${index + 1}个元素的name是：${item.name}，age是：${item.age}`
  );
});

在上面的代码中，我们使用forEach方法遍历对象数组arr，定义回调函数，通过item.name和item.age获取到每个对象的对应属性并输出到控制台上。

示例说明

下面简单说明一下例子中forEach遍历数组的代码逻辑:

• 遍历数字数组arr的每一个元素，通过一个if判断，判断当前元素是否大于10.
• 如果大于10，则输出第X个元素:Y，其中X表示元素在数组中的索引，Y表示该元素的值。
• 遍历对象数组arr2的每一个元素，通过console.log方法输出每个元素的属性值。

以上就是vue forEach循环数组拿到自己想要的数据方法的完整攻略。