JavaScript遍历对象数组获取属性值的四种常用方法

作者：函数茶馆时间：2026-10-30 19:55:50浏览：435

本文介绍在JavaScript中遍历对象数组并提取属性值的四种常用方式，包括for循环、for...of循环、forEach方法和map方法。通过具体代码示例，展示如何高效访问对象属性，并补充使用map直接返回指定值生成新数组的技巧。

前言

在JavaScript开发中，遍历对象数组以提取特定属性值是一项基础且高频的操作。本文主要介绍四种常用的实现方式：for循环、for...of循环、forEach方法以及map方法，重点展示如何在遍历过程中准确访问并获取对象的属性值。

for循环：

const objArray = [
  { id: 1, name: 'Alice' },
  { id: 2, name: 'Bob' },
  { id: 3, name: 'Charlie' },
];
for (let i = 0; i < objArray.length; i++) {
  const obj = objArray[i];
  console.log(obj.id, obj.name);
}

for...of循环：

const objArray = [
  { id: 1, name: 'Alice' },
  { id: 2, name: 'Bob' },
  { id: 3, name: 'Charlie' },
];

for (const obj of objArray) {
  console.log(obj.id, obj.name);
}

forEach方法：

const objArray = [
  { id: 1, name: 'Alice' },
  { id: 2, name: 'Bob' },
  { id: 3, name: 'Charlie' },
];

objArray.forEach((obj) => {
  console.log(obj.id, obj.name);
});

map方法（通常用于创建一个新数组，但也可以用于遍历）：

const objArray = [
  { id: 1, name: 'Alice' },
  { id: 2, name: 'Bob' },
  { id: 3, name: 'Charlie' },
];

objArray.map((obj) => {
  console.log(obj.id, obj.name);
  return obj;
});

上述几种方法均能有效实现遍历对象数组并提取属性值的需求，开发者可根据具体场景选择合适的方式。

附：js数组对象中提取每个对象里的某个值

利用map方法可以直接return所需的属性值（例如将res数组中的sn字段全部提取并生成一个新数组，如上图所示）。

最终返回的结果如下图所示。

总结

至此，关于JavaScript遍历对象数组并获取相应属性值的介绍已完成。如需了解更多相关JS数组处理技巧，建议查阅本站历史文章或继续阅读后续内容，感谢支持！

作者最新文章

JS split切割后出现空字符串怎么过滤

2026-11-05 16:00:30

在 React 或 Vue 项目中封装使用 JS 节流防抖

2026-11-05 15:27:29

JavaScript中怎么将带小数的字符串转为整数？

2026-11-05 14:32:38

怎么用JavaScript策略模式重构电商促销计算逻辑？

2026-11-05 14:01:09

JS使用constructor判断数据类型可靠吗

2026-11-05 13:49:41