本文旨在提供一种简洁高效的方法，用于从 JavaScript 或 jQuery 中包含对象的数组里提取特定属性的值，并生成一个新的数组，其中只包含这些提取出的属性值。我们将重点介绍使用 map() 函数的解决方案，并提供代码示例和相关解释，帮助开发者快速掌握这一技巧。
从包含对象的数组中提取特定属性值列表是 JavaScript 开发中常见的任务。 例如，从 API 获取 JSON 数据后，可能只需要对象中的特定属性，例如名称或 ID。 以下介绍几种常用的方法来实现此目的。
使用 map() 方法
map() 方法是 JavaScript 数组的一个内置方法，它创建一个新数组，其结果是该数组中的每个元素都调用一次提供的函数后的返回值。 这是一个非常适合从对象数组中提取特定属性值的场景。
立即学习“Java免费学习笔记（深入）”；
以下是一个示例，展示了如何使用 map() 从给定的 JSON 数据中提取 wastageName 属性：
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"]代码解释:
- data.data: 首先，我们访问包含对象数组的 data 对象的 data 属性。
- .map(item => item.wastageName): 然后，我们对数组使用 map() 方法。 map() 方法接受一个回调函数作为参数，该回调函数将应用于数组中的每个元素。
- item => item.wastageName: 在这个回调函数中，item 代表数组中的当前对象。 我们使用 item.wastageName 访问当前对象的 wastageName 属性，并将其作为回调函数的返回值。 map() 方法会将所有这些返回值收集到一个新数组中，并将其返回。
使用 jQuery 的 $.map() 方法
jQuery 也提供了一个 $.map() 方法，其功能与 JavaScript 的 map() 方法类似，但它可以用于遍历对象和数组。
const data = {"data":[{"id":1,"wastageName":"BOPP at printing"},
{"id":3,"wastageName":"BOPP Production wastage"},
{"id":18,"wastageName":"LDPEE at leminatign"}]};
const wastageNames = $.map(data.data, function(item) {
return item.wastageName;
});
console.log(wastageNames); // 输出: ["BOPP at printing", "BOPP Production wastage", "LDPEE at leminatign"]代码解释:
- $.map(data.data, function(item) { ... }): 我们使用 $.map() 方法遍历 data.data 数组。
- function(item) { return item.wastageName; }: 回调函数与 JavaScript 的 map() 方法类似，接收数组中的当前对象 item 作为参数，并返回 item.wastageName。
注意事项:
- 确保要提取的属性存在于所有对象中。如果某些对象缺少该属性，则 map() 方法将返回 undefined。 为了避免这种情况，可以在回调函数中添加一个条件检查。
- 如果需要进行更复杂的数据转换，可以在回调函数中执行更复杂的操作。
总结
map() 方法是 JavaScript 中从对象数组中提取特定属性值的强大工具。 它简洁、高效，并且易于理解。 无论使用 JavaScript 原生的 map() 方法还是 jQuery 的 $.map() 方法，都可以轻松地从数据中提取所需的信息。 掌握这种技巧可以显著提高 JavaScript 开发的效率。
