JavaScript中如何基于键名高效提取数组对象中的特定属性-js教程-PHP中文网

JavaScript中如何基于键名高效提取数组对象中的特定属性

DDD

发布： 2025-11-05 16:53:02

原创

294人浏览过

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之前并不保证，即使在ES2015之后对数字键和字符串键的顺序有了规定，但依赖这种隐式顺序仍然是脆弱的。一旦原始对象中的属性顺序改变，或者增加了新的属性，代码就会立即出错。

基于键名安全提取属性的方法

为了解决这个问题，我们应该直接通过属性的键名来访问它们。JavaScript提供了几种健壮且易于理解的方法来实现这一点，主要通过Array.prototype.map()方法结合点表示法或对象解构。

1. 使用点表示法（Dot Notation）或方括号表示法（Bracket Notation）

最直接的方法是使用点表示法（obj.propertyName）或方括号表示法（obj['propertyName']）来访问对象的特定属性。这种方法清晰地指明了要获取哪个属性，与属性在对象中的位置无关。

硅基智能

基于Web3.0的元宇宙，去中心化的互联网，高质量、沉浸式元宇宙直播平台，用数字化重新定义直播

查看详情

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 resultDotNotation = items.map(function(obj) {
    // 使用点表示法直接访问属性
    var prod = obj.product;    
    var qty = obj.quantity;    
    return {
        product: prod,
        quantity: qty
    };
});

console.log('使用点表示法:', resultDotNotation);
/*
输出:
[
  { product: 'prodOne', quantity: 3 },
  { product: 'prodTwo', quantity: 4 },
  { product: 'prodThree', quantity: 8 }
]
*/

登录后复制

这种方法简单明了，易于理解，并且完全避免了对属性顺序的依赖。

2. 使用对象解构（Object Destructuring）

ES6引入的对象解构语法提供了一种更简洁、更现代的方式来从对象中提取属性。当与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 }
];

// 使用对象解构作为map回调函数的参数
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(...): map方法遍历items数组中的每一个对象。
({ product, quantity }) => ...: 这是map回调函数的一个箭头函数。括号内的{ product, quantity }是对象解构语法。它告诉JavaScript，从传入的每一个对象中提取名为product和quantity的属性，并将它们作为局部变量供函数体使用。
({ product, quantity }): 这是箭头函数的返回值。外层的括号是必需的，因为JavaScript会将{}视为代码块，而不是对象字面量。通过在对象字面量周围加上括号，我们明确告诉JavaScript这是一个要返回的对象。这里使用了ES6的对象属性值简写语法：如果属性名和变量名相同，可以只写一次（例如，{ product: product, quantity: quantity }可以简写为{ product, quantity }）。

优点：

简洁性： 代码量显著减少，尤其是在需要提取多个属性时。
可读性： 清晰地表明了从原始对象中提取了哪些属性，并创建了一个只包含这些属性的新对象。
健壮性： 完全不依赖于属性的顺序。

注意事项与最佳实践

不可变性： Array.prototype.map()方法总是返回一个新数组，其中包含对原始数组中每个元素调用回调函数后的结果。这意味着原始数组不会被修改，这符合函数式编程的不可变性原则，有助于避免副作用和提高代码可预测性。
性能： 对于大多数常见的用例，map方法结合点表示法或对象解构的性能是足够的。在处理非常大的数据集时，应考虑其性能影响，但通常这不是瓶颈。
错误处理： 如果尝试访问一个不存在的属性，点表示法和解构赋值都会返回undefined，这通常是可接受的行为。如果需要更严格的检查，可以在解构时提供默认值，例如 ({ product, quantity = 0 })。