从对象数组中提取数据并创建新对象-js教程-PHP中文网

从对象数组中提取数据并创建新对象

花韻仙語

发布： 2025-08-22 21:02:32

原创

748人浏览过

从对象数组中提取数据并创建新对象

本文将介绍如何从包含对象数组的源对象中提取特定数据，并将其分配给两个新的独立对象。我们将通过 ES6 的解构赋值和对象字面量语法，高效地实现数据提取和对象创建，避免生成不必要的数组，并直接访问目标属性。

假设我们有如下源对象：

const sourceObject = {
  key1: "value1",
  key2: "value2",
  sourceArray: [{
    cost: 10,
    time: 30,
    shift: 1,
    description: "text",
    name: "John"
  }]
};

登录后复制

我们的目标是从 sourceArray 的第一个元素中提取 cost 和 description 属性，并将它们分别赋值给两个新的对象 firstNewObject 和 secondNewObject。

实现方法

最直接且易于理解的方法是直接访问数组的第一个元素，然后使用对象字面量语法创建新的对象：

const element = sourceObject.sourceArray[0];
const firstNewObject = { cost: element.cost, description: element.description };
const secondNewObject = { cost: element.cost, description: element.description };

console.log(firstNewObject); // 输出: { cost: 10, description: "text" }
console.log(secondNewObject); // 输出: { cost: 10, description: "text" }
console.log(firstNewObject.cost); // 输出: 10

登录后复制

代码解释

const element = sourceObject.sourceArray[0];: 这行代码获取了 sourceArray 数组的第一个元素，并将其赋值给变量 element。
const firstNewObject = { cost: element.cost, description: element.description };: 这行代码使用对象字面量语法创建了一个新的对象 firstNewObject。 element.cost 和 element.description 分别是 element 对象的 cost 和 description 属性的值，它们被赋值给新对象的同名属性。
const secondNewObject = { cost: element.cost, description: element.description };: 这行代码与创建 firstNewObject 的方式相同，创建了另一个独立的对象 secondNewObject。

ES6 解构赋值优化

为了使代码更简洁，可以使用 ES6 的解构赋值语法：

即构数智人

即构数智人是由即构科技推出的AI虚拟数字人视频创作平台，支持数字人形象定制、短视频创作、数字人直播等。

查看详情

const { cost, description } = sourceObject.sourceArray[0];
const firstNewObject = { cost, description };
const secondNewObject = { cost, description };

console.log(firstNewObject); // 输出: { cost: 10, description: "text" }
console.log(secondNewObject); // 输出: { cost: 10, description: "text" }
console.log(firstNewObject.cost); // 输出: 10

登录后复制

代码解释

const { cost, description } = sourceObject.sourceArray[0];: 这行代码使用解构赋值从 sourceObject.sourceArray[0] 对象中提取 cost 和 description 属性的值，并将它们分别赋值给同名变量 cost 和 description。
const firstNewObject = { cost, description };: 这行代码使用对象字面量语法创建 firstNewObject，由于变量名和属性名相同，可以简写为 { cost, description }。
const secondNewObject = { cost, description };: 同理，创建 secondNewObject。

注意事项

确保 sourceArray 数组至少包含一个元素，否则访问 sourceObject.sourceArray[0] 会导致错误。可以添加一个判断条件来避免这种情况。
如果需要提取的属性数量较多，可以将提取属性的逻辑封装成一个函数，提高代码的可读性和可维护性。

总结

本文介绍了两种从对象数组中提取数据并创建新对象的方法。第一种方法直接访问数组元素并使用对象字面量语法创建新对象，简单易懂。第二种方法使用 ES6 的解构赋值语法，使代码更加简洁。根据实际情况选择合适的方法，可以有效地提高代码的效率和可读性。需要注意的是，在访问数组元素之前，应该确保数组不为空，避免出现错误。

以上就是从对象数组中提取数据并创建新对象的详细内容，更多请关注php中文网其它相关文章！