JS循环对象数组提取值 - Javascript

在Javascript中，我们经常使用对象数组存储数据。循环对象数组提取值是一个基本的操作，本文将介绍如何使用循环来提取对象数组的值。

1. for循环

for循环是JS中最基本的循环结构，可以用来依次访问对象数组中的每一个元素。下面是一个例子：

const arr = [
  { name: "Tom", age: 20 }, 
  { name: "Jack", age: 25 }, 
  { name: "Sara", age: 30 }
];

for (let i = 0; i < arr.length; i++) {
  console.log(arr[i].name, arr[i].age);
}

在上面的例子中，我们通过for循环遍历了对象数组arr中的每一个元素，并使用.操作符提取了每个元素的name和age属性值。运行上面的代码，我们可以依次打印出以下结果：

Tom 20
Jack 25
Sara 30

2. forEach循环

除了for循环，我们还可以使用forEach循环来遍历数组。forEach循环比for循环更加简洁易读，但其功能相比却更加有限。下面是一个例子：

const arr = [
  { name: "Tom", age: 20 },
  { name: "Jack", age: 25 },
  { name: "Sara", age: 30 }
];

arr.forEach((item) => {
  console.log(item.name, item.age);
});

在上面的例子中，我们使用forEach()函数来遍历了对象数组arr中的每一个元素，并打印出其name和age属性值。和for循环不同，这里的item即为数组中的每一个元素本身。运行上面的代码，我们可以依次打印出以下结果：

Tom 20
Jack 25
Sara 30

3. map循环

最后一个我们介绍的循环类型是map循环，它可以用来在遍历数组的同时，对每个数组元素进行一些操作处理，最后返回一个新的数组。下面是一个例子：

const arr = [
  { name: "Tom", age: 20 },
  { name: "Jack", age: 25 },
  { name: "Sara", age: 30 }
];

const newArr = arr.map((item) => {
  return item.name;
});

console.log(newArr);

在上面的例子中，我们又使用到了一个新的数组newArr，它是在遍历对象数组arr的过程中，将每一个数组元素的name属性值提取出来，最终组成一个新数组。运行上面的代码，我们可以打印出以下结果：

["Tom", "Jack", "Sara"]

总结

通过for循环、forEach循环和map循环这三种循环类型的介绍，我们不仅学会了如何循环对象数组提取值，还掌握了一些基础的循环使用技巧。在实际编程中，可根据具体需求来选择适当的循环类型，以达到最佳效果。