本文将深入探讨在javascript中如何高效且健壮地从对象数组中提取特定属性，避免依赖于属性索引的脆弱性。我们将重点介绍利用`array.prototype.map()`方法结合直接属性访问和es6解构赋值，来创建包含所需新属性的对象数组，从而提高代码的可读性和维护性。
在JavaScript开发中，我们经常需要处理包含多个对象的数组，并从中提取或转换数据以满足特定需求。一个常见的场景是，我们有一个包含多余属性的对象数组，希望将其转换为一个只包含部分关键属性的新数组。然而，在处理这类任务时，新手开发者有时会错误地依赖于属性在对象中的索引位置，例如使用Object.values()并结合数组索引来获取属性值。这种方法存在明显的缺陷，因为JavaScript对象的属性顺序并不总是能得到保证（尤其是在旧版JS引擎中，尽管现代引擎通常会保留插入顺序），并且一旦原始对象的结构发生变化，基于索引的提取逻辑就会失效。
本文将介绍几种健壮且推荐的方法，通过键名而非索引来安全地提取对象属性。
原始数据结构示例
假设我们有以下一个商品列表，每个商品对象包含产品名称、数量以及发送和接收相关的数值：
const items = [
{
product: 'prodOne',
quantity: 3,
sending: 100,
receiving: 50
},
{
product: 'prodTwo',
quantity: 4,
sending: 50,
receiving: 100
},
{
product: 'prodThree',
quantity: 8,
sending: 100,
receiving: 100
}
];我们的目标是将这个数组转换为一个只包含product和quantity属性的新数组，例如：
立即学习“Java免费学习笔记（深入）”；
const itemsRed = [
{
product: 'prodOne',
quantity: 3,
},
{
product: 'prodTwo',
quantity: 4,
},
{
product: 'prodThree',
quantity: 8,
}
]; 错误示范：依赖索引提取属性
初学者可能会尝试使用Object.values()结合索引来提取属性，如下所示：
const x = items.map(function (obj){
// 这种方法依赖于属性在对象中的索引位置，不推荐
var prod = Object.values(obj)[0];
var qty = Object.values(obj)[1];
return {product: prod, quantity: qty};
});
console.log(x);这种方法的根本问题在于，它假设product总是第一个属性（索引0），quantity总是第二个属性（索引1）。如果原始对象中属性的定义顺序发生变化，或者有新的属性被插入到product和quantity之间，这段代码将无法正常工作，导致提取到错误的数据。
推荐方法一：直接属性访问
最直接也是最基础的方法是使用点（.）或方括号（[]）语法通过属性键名来访问对象属性。结合Array.prototype.map()，我们可以遍历数组中的每个对象，并显式地构建一个新对象。
const items = [
{ product: 'prodOne', quantity: 3, sending: 100, receiving: 50 },
{ product: 'prodTwo', quantity: 4, sending: 50, receiving: 100 },
{ product: 'prodThree', quantity: 8, sending: 100, receiving: 100 }
];
const resultDirectAccess = items.map(function(obj) {
// 使用点表示法直接访问属性
var prod = obj.product;
var qty = obj.quantity;
return {
product: prod,
quantity: qty
};
});
console.log("使用直接属性访问:", resultDirectAccess);
/*
输出:
[
{ product: 'prodOne', quantity: 3 },
{ product: 'prodTwo', quantity: 4 },
{ product: 'prodThree', quantity: 8 }
]
*/这种方法清晰、易懂，并且完全不依赖于属性的顺序，只要属性键名（product和quantity）不变，代码就能稳定运行。
推荐方法二：ES6 对象解构赋值
ES6（ECMAScript 2015）引入的解构赋值语法提供了一种更简洁、更强大的方式来从对象或数组中提取数据。在Array.prototype.map()的回调函数中，我们可以直接对传入的obj参数进行解构，只提取我们需要的product和quantity属性。
const items = [
{ product: 'prodOne', quantity: 3, sending: 100, receiving: 50 },
{ product: 'prodTwo', quantity: 4, sending: 50, receiving: 100 },
{ product: 'prodThree', quantity: 8, sending: 100, receiving: 100 }
];
// 使用箭头函数和对象解构赋值
const resultDestructuring = items.map(({ product, quantity }) => ({ product, quantity }));
console.log("使用对象解构赋值:", resultDestructuring);
/*
输出:
[
{ product: 'prodOne', quantity: 3 },
{ product: 'prodTwo', quantity: 4 },
{ product: 'prodThree', quantity: 8 }
]
*/代码解析：
- items.map(...)：遍历items数组中的每个元素。
- ({ product, quantity }) => ...：这是一个箭头函数，其参数部分使用了对象解构。这意味着对于数组中的每一个item对象，它会直接从中提取名为product和quantity的属性值，并将它们作为同名局部变量供函数体使用。
- ({ product, quantity })：函数体返回一个新对象。这里利用了ES6的对象字面量简写语法（shorthand property names），当属性名和变量名相同时，可以只写一次。这等同于{ product: product, quantity: quantity }。
这种方法是现代JavaScript开发中处理此类数据转换任务的首选，因为它极大地提高了代码的简洁性和可读性。
注意事项与总结
- 避免依赖索引： 无论是使用Object.values()还是其他任何依赖于属性顺序的方法，都应尽量避免。JavaScript对象的属性顺序在理论上是不确定的（尽管现代引擎在大多数情况下会保持插入顺序），但为了代码的健壮性和可维护性，始终通过键名访问属性是最佳实践。
-
选择合适的方法：
- 对于简单的属性提取，对象解构赋值（({ prop1, prop2 }) => ({ prop1, prop2 })）是最推荐的方法，它代码量少，可读性高。
- 如果需要对提取的属性进行一些额外的处理或重命名，直接属性访问（item.prop1）可能更灵活，因为它允许你在构建新对象时进行更多操作。
- Array.prototype.map()的重要性： map()方法是进行数组转换的核心工具。它创建一个新数组，其结果是调用map方法对原数组中的每个元素执行回调函数的结果。这意味着原始数组不会被修改，这符合函数式编程的原则，有助于避免副作用。
通过掌握上述方法，您将能够更专业、更健壮地在JavaScript中处理对象数组的属性提取和转换任务，编写出更易于理解和维护的代码。
