JavaScript中根据键名而非索引提取对象属性的技巧-js教程-PHP中文网

JavaScript中根据键名而非索引提取对象属性的技巧

碧海醫心

发布： 2025-11-05 16:45:11

原创

583人浏览过

JavaScript中根据键名而非索引提取对象属性的技巧

本文旨在解决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提供了多种健壮的方式来实现这一点。

纳米搜索

纳米搜索：360推出的新一代AI搜索引擎

查看详情

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中根据键名而非索引提取对象属性的技巧的详细内容，更多请关注php中文网其它相关文章！