本文旨在解决javascript中从对象数组中提取特定属性时，避免依赖属性索引的脆弱性问题。我们将探讨如何利用点表示法、方括号表示法以及对象解构等现代javascript特性，结合array.prototype.map方法，以健壮且高效的方式根据键名准确地筛选和重构数据，确保代码在属性顺序变化时依然稳定运行。
在JavaScript开发中，我们经常需要处理包含多个对象的数组，并从中提取或转换数据。一个常见的场景是，我们有一个包含多余属性的对象数组，需要将其转换为一个只包含特定关键属性的新对象数组。初学者在处理这类问题时，可能会尝试使用Object.values()结合索引来获取属性值，但这是一种不推荐的做法，因为它高度依赖于对象属性的定义顺序，一旦属性顺序发生变化，代码就会失效。
避免使用索引访问对象属性
考虑以下原始数据结构：
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 属性的新数组：
const itemsRed = [
{
product: 'prodOne',
quantity: 3,
},
{
product: 'prodTwo',
quantity: 4,
},
{
product: 'prodThree',
quantity: 8,
}
];如果尝试使用 Object.values() 并通过索引访问，例如：
立即学习“Java免费学习笔记（深入）”；
const x = items.map(function (obj){
var prod = Object.values(obj)[0] // 依赖于 'product' 是第一个属性
var qty = Object.values(obj)[1] // 依赖于 'quantity' 是第二个属性
return {product: prod, quantity: qty}
});这种方法存在严重缺陷。JavaScript对象的属性在ES2015之前并没有严格的顺序保证（尽管现代引擎通常会保留插入顺序），即使保留了顺序，一旦原始对象中属性的定义顺序发生改变，上述代码就会立即失效，导致提取到错误的数据。
正确地根据键名提取属性
为了解决这个问题，我们应该直接通过属性的键名（key）来访问其值。JavaScript提供了多种健壮的方式来实现这一点。
1. 使用点表示法（Dot Notation）
这是最直观和常用的方法，通过 object.propertyName 的形式来访问属性。
const resultDotNotation = items.map(function(obj) {
const prod = obj.product; // 直接通过键名 'product' 访问
const qty = obj.quantity; // 直接通过键名 'quantity' 访问
return {
product: prod,
quantity: qty
};
});
console.log("使用点表示法:", resultDotNotation);2. 使用方括号表示法（Bracket Notation）
当属性名包含特殊字符（如空格、连字符）或者属性名是动态生成时，可以使用方括号表示法 object['propertyName']。在本例中，虽然点表示法更简洁，但方括号表示法同样有效。
const resultBracketNotation = items.map(function(obj) {
const prod = obj['product']; // 直接通过键名 'product' 访问
const qty = obj['quantity']; // 直接通过键名 'quantity' 访问
return {
product: prod,
quantity: qty
};
});
console.log("使用方括号表示法:", resultBracketNotation);3. 使用对象解构（Object Destructuring）
ES6引入的对象解构语法提供了一种更简洁、更强大的方式来从对象中提取属性。这在Array.prototype.map回调函数中尤其有用。
const resultDestructuring = items.map(({ product, quantity }) => ({ product, quantity }));
console.log("使用对象解构:", resultDestructuring);代码解析：
- items.map(...): map 方法会遍历 items 数组中的每个对象。
- ({ product, quantity }): 这是回调函数参数中的对象解构。它会从当前遍历到的对象（例如 obj）中提取 product 和 quantity 这两个属性，并将它们作为独立的变量供函数体使用。
- => ({ product, quantity }): 这是箭头函数的函数体。它直接返回一个新的对象字面量，其中包含解构出来的 product 和 quantity 属性。注意外层的圆括号是必需的，因为如果没有它们，JavaScript会将 { 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
}
];
// 1. 使用点表示法
const resultDotNotation = items.map(function(obj) {
const prod = obj.product;
const qty = obj.quantity;
return {
product: prod,
quantity: qty
};
});
console.log("--- 使用点表示法 ---");
console.log(resultDotNotation);
// 2. 使用方括号表示法
const resultBracketNotation = items.map((item) => ({
product: item['product'],
quantity: item['quantity']
}));
console.log("\n--- 使用方括号表示法 ---");
console.log(resultBracketNotation);
// 3. 使用对象解构 (最推荐)
const resultDestructuring = items.map(({ product, quantity }) => ({ product, quantity }));
console.log("\n--- 使用对象解构 ---");
console.log(resultDestructuring);
// 验证所有方法输出结果一致
console.log("\n--- 验证结果一致性 ---");
console.log(JSON.stringify(resultDotNotation) === JSON.stringify(resultDestructuring)); // true注意事项与总结
- 健壮性： 直接通过键名访问属性是确保代码健壮性的关键。无论原始对象中属性的顺序如何，只要键名不变，代码就能正常工作。
- 可读性： 点表示法和对象解构通常提供更好的代码可读性，尤其是在处理少量明确的属性时。
- 简洁性： 对象解构是最简洁和现代的写法，尤其适合在map等高阶函数中使用。
- 性能： 在大多数现代JavaScript引擎中，这些方法在性能上差异微乎其微，选择哪种主要取决于代码风格和场景需求。对于大多数应用而言，应优先考虑代码的清晰度和可维护性。
综上所述，当需要从JavaScript对象中提取特定属性时，应始终通过属性的键名进行访问，而非依赖于其在对象中的索引位置。对象解构结合Array.prototype.map提供了一种优雅、高效且健壮的解决方案，是处理此类数据转换任务的首选方法。
