本文旨在解决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提供了一种优雅、高效且健壮的解决方案，是处理此类数据转换任务的首选方法。