本文旨在解决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提供了一种优雅、高效且健壮的解决方案，是处理此类数据转换任务的首选方法。
以上就是JavaScript中根据键名而非索引提取对象属性的技巧的详细内容，更多请关注创想鸟其它相关文章！
版权声明：本文内容由互联网用户自发贡献，该文观点仅代表作者本人。本站仅提供信息存储空间服务，不拥有所有权，不承担相关法律责任。
如发现本站有涉嫌抄袭侵权/违法违规的内容， 请发送邮件至 chuangxiangniao@163.com 举报，一经查实，本站将立刻删除。
发布者：程序猿，转转请注明出处：https://www.chuangxiangniao.com/p/1535979.html
微信扫一扫 
支付宝扫一扫 
