J*aScript中基于键名而非索引提取对象属性的实践指南

JavaScript中基于键名而非索引提取对象属性的实践指南

本文将深入探讨在j*ascript中如何高效且健壮地从对象数组中提取特定属性，避免依赖于属性索引的脆弱性。我们将重点介绍利用`array.prototype.map()`方法结合直接属性访问和es6解构赋值，来创建包含所需新属性的对象数组，从而提高代码的可读性和维护性。

在J*aScript开发中，我们经常需要处理包含多个对象的数组，并从中提取或转换数据以满足特定需求。一个常见的场景是，我们有一个包含多余属性的对象数组，希望将其转换为一个只包含部分关键属性的新数组。然而，在处理这类任务时，新手开发者有时会错误地依赖于属性在对象中的索引位置，例如使用Object.values()并结合数组索引来获取属性值。这种方法存在明显的缺陷，因为J*aScript对象的属性顺序并不总是能得到保证（尤其是在旧版JS引擎中，尽管现代引擎通常会保留插入顺序），并且一旦原始对象的结构发生变化，基于索引的提取逻辑就会失效。

本文将介绍几种健壮且推荐的方法，通过键名而非索引来安全地提取对象属性。

原始数据结构示例

假设我们有以下一个商品列表，每个商品对象包含产品名称、数量以及发送和接收相关的数值：

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()结合索引来提取属性，如下所示：

const x = items.map(function (obj){
    // 这种方法依赖于属性在对象中的索引位置，不推荐
    var prod  = Object.values(obj)[0]; 
    var qty = Object.values(obj)[1];
    return {product: prod, quantity: qty};
});
console.log(x);

这种方法的根本问题在于，它假设product总是第一个属性（索引0），quantity总是第二个属性（索引1）。如果原始对象中属性的定义顺序发生变化，或者有新的属性被插入到product和quantity之间，这段代码将无法正常工作，导致提取到错误的数据。

推荐方法一：直接属性访问

最直接也是最基础的方法是使用点（.）或方括号（[]）语法通过属性键名来访问对象属性。结合Array.prototype.map()，我们可以遍历数组中的每个对象，并显式地构建一个新对象。

BrandCrowd

一个在线Logo免费设计生成器

200 查看详情 BrandCrowd

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

console.log("使用直接属性访问:", resultDirectAccess);
/*
输出:
[
  { product: 'prodOne', quantity: 3 },
  { product: 'prodTwo', quantity: 4 },
  { product: 'prodThree', quantity: 8 }
]
*/

这种方法清晰、易懂，并且完全不依赖于属性的顺序，只要属性键名（product和quantity）不变，代码就能稳定运行。

推荐方法二：ES6 对象解构赋值

ES6（ECMAScript 2015）引入的解构赋值语法提供了一种更简洁、更强大的方式来从对象或数组中提取数据。在Array.prototype.map()的回调函数中，我们可以直接对传入的obj参数进行解构，只提取我们需要的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 }
];

// 使用箭头函数和对象解构赋值
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(...)：遍历items数组中的每个元素。
({ product, quantity }) => ...：这是一个箭头函数，其参数部分使用了对象解构。这意味着对于数组中的每一个item对象，它会直接从中提取名为product和quantity的属性值，并将它们作为同名局部变量供函数体使用。
({ product, quantity })：函数体返回一个新对象。这里利用了ES6的对象字面量简写语法（shorthand property names），当属性名和变量名相同时，可以只写一次。这等同于{ product: product, quantity: quantity }。

这种方法是现代J*aScript开发中处理此类数据转换任务的首选，因为它极大地提高了代码的简洁性和可读性。

注意事项与总结

避免依赖索引： 无论是使用Object.values()还是其他任何依赖于属性顺序的方法，都应尽量避免。J*aScript对象的属性顺序在理论上是不确定的（尽管现代引擎在大多数情况下会保持插入顺序），但为了代码的健壮性和可维护性，始终通过键名访问属性是最佳实践。
选择合适的方法：
- 对于简单的属性提取，对象解构赋值（({ prop1, prop2 }) => ({ prop1, prop2 })）是最推荐的方法，它代码量少，可读性高。
- 如果需要对提取的属性进行一些额外的处理或重命名，直接属性访问（item.prop1）可能更灵活，因为它允许你在构建新对象时进行更多操作。
Array.prototype.map()的重要性： map()方法是进行数组转换的核心工具。它创建一个新数组，其结果是调用map方法对原数组中的每个元素执行回调函数的结果。这意味着原始数组不会被修改，这符合函数式编程的原则，有助于避免副作用。

通过掌握上述方法，您将能够更专业、更健壮地在J*aScript中处理对象数组的属性提取和转换任务，编写出更易于理解和维护的代码。

以上就是J*aScript中基于键名而非索引提取对象属性的实践指南的详细内容，更多请关注其它相关文章！

# 这种方法 # 杭州企业网站优化推广 # 福州视频推广信息网站 # 成都市做网站建设 # 湛江机械网站推广怎么做 # 新乡企业网站推广代理 # seo网站优化推广公司排行榜 # 玉林网店推广招聘网站 # 深圳抖音seo哪家好做 # 营销推广最低的充值金额 # 音频网站建设app # 因为它 # 我们可以 # 象中 # 依赖于 # javascript # 数据结构 # 而非 # 键名 # 组中 # 回调 # red # javascript开发 # 工具 # 回调函数 # access # js # java # es6

返回目录在线咨询

上一篇：在 Lar*el Blade 中动态渲染带标题的表格数据
下一篇：Lar*el Blade中动态生成带标题的表格：foreach循环的正确实践

您的项目需求

*请认真填写需求信息，我们会在24小时内与您取得联系。