从 JavaScript 对象数组中提取指定属性值列表的实用指南

本文将介绍如何使用 JavaScript 的 map() 方法从对象数组中提取特定属性的值，并将其存储到一个新的数组中。map() 方法是一种强大的数组迭代工具，能够简洁地实现数据转换和提取，提高代码的可读性和效率。

使用 map() 方法提取属性值

假设我们有以下 JSON 数据，表示一个包含 id 和 wastageName 属性的对象数组：

{
  "data": [
    { "id": 1, "wastageName": "BOPP at printing" },
    { "id": 3, "wastageName": "BOPP Production wastage" },
    { "id": 18, "wastageName": "LDPEE at leminatign" }
  ]
}

我们的目标是提取所有 wastageName 属性的值，并将它们存储到一个新的数组中。使用 map() 方法可以轻松实现：

const data = {
  "data": [
    { "id": 1, "wastageName": "BOPP at printing" },
    { "id": 3, "wastageName": "BOPP Production wastage" },
    { "id": 18, "wastageName": "LDPEE at leminatign" }
  ]
};

const wastageNames = data.data.map(item => item.wastageName);
console.log(wastageNames); // 输出: ["BOPP at printing", "BOPP Production wastage", "LDPEE at leminatign"]

代码解释：

立即学习“Java免费学习笔记（深入）”；

即构数智人

即构数智人是由即构科技推出的AI虚拟数字人视频创作平台，支持数字人形象定制、短视频创作、数字人直播等。

36

查看详情

1. data.data：首先，我们访问包含对象数组的 data 属性。
2. .map(item => item.wastageName)：然后，我们调用 map() 方法，并传入一个箭头函数作为参数。
   • item：箭头函数的参数 item 代表数组中的每个对象。
   • item.wastageName：对于每个对象，我们访问其 wastageName 属性。
   • map() 方法会将每个 wastageName 的值收集起来，并返回一个新的数组。
3. wastageNames：最终，我们将 map() 方法返回的数组赋值给 wastageNames 变量。

替代方法：使用 forEach() 循环

虽然 map() 方法通常是首选方案，但也可以使用 forEach() 循环来实现相同的功能：

const data = {
  "data": [
    { "id": 1, "wastageName": "BOPP at printing" },
    { "id": 3, "wastageName": "BOPP Production wastage" },
    { "id": 18, "wastageName": "LDPEE at leminatign" }
  ]
};

const wastageNames = [];
data.data.forEach(item => {
  wastageNames.push(item.wastageName);
});
console.log(wastageNames); // 输出: ["BOPP at printing", "BOPP Production wastage", "LDPEE at leminatign"]

代码解释：

立即学习“Java免费学习笔记（深入）”；

1. const wastageNames = [];：首先，我们创建一个空数组 wastageNames 来存储提取的属性值。
2. data.data.forEach(item => { ... });：然后，我们使用 forEach() 方法遍历对象数组。
3. wastageNames.push(item.wastageName);：在循环的每次迭代中，我们访问当前对象的 wastageName 属性，并将其添加到 wastageNames 数组中。

总结

map() 方法是一种简洁高效的方式，可以从 JavaScript 对象数组中提取特定属性的值。它不仅代码量更少，而且更易于阅读和理解。虽然 forEach() 循环也能实现相同的功能，但在这种情况下，map() 方法通常是更佳选择。选择哪种方法取决于具体的应用场景和个人偏好。

以上就是从 JavaScript 对象数组中提取指定属性值列表的实用指南的详细内容，更多请关注php中文网其它相关文章！