本文将介绍如何使用 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免费学习笔记（深入）”；
- data.data：首先，我们访问包含对象数组的 data 属性。
- .map(item => item.wastageName)：然后，我们调用 map() 方法，并传入一个箭头函数作为参数。
- item：箭头函数的参数 item 代表数组中的每个对象。
- item.wastageName：对于每个对象，我们访问其 wastageName 属性。
- map() 方法会将每个 wastageName 的值收集起来，并返回一个新的数组。
- 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免费学习笔记（深入）”；
- const wastageNames = [];：首先，我们创建一个空数组 wastageNames 来存储提取的属性值。
- data.data.forEach(item => { … });：然后，我们使用 forEach() 方法遍历对象数组。
- wastageNames.push(item.wastageName);：在循环的每次迭代中，我们访问当前对象的 wastageName 属性，并将其添加到 wastageNames 数组中。
总结
map() 方法是一种简洁高效的方式，可以从 JavaScript 对象数组中提取特定属性的值。它不仅代码量更少，而且更易于阅读和理解。虽然 forEach() 循环也能实现相同的功能，但在这种情况下，map() 方法通常是更佳选择。选择哪种方法取决于具体的应用场景和个人偏好。
评论（已关闭）
评论已关闭