0

0

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

花韻仙語

花韻仙語

发布时间:2025-08-22 21:02:32

|

760人浏览过

|

来源于php中文网

原创

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

本文将介绍如何从包含对象数组的源对象中提取特定数据,并将其分配给两个新的独立对象。我们将通过 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

代码解释

  1. const element = sourceObject.sourceArray[0];: 这行代码获取了 sourceArray 数组的第一个元素,并将其赋值给变量 element。

  2. const firstNewObject = { cost: element.cost, description: element.description };: 这行代码使用对象字面量语法创建了一个新的对象 firstNewObject。 element.cost 和 element.description 分别是 element 对象的 cost 和 description 属性的值,它们被赋值给新对象的同名属性。

  3. const secondNewObject = { cost: element.cost, description: element.description };: 这行代码与创建 firstNewObject 的方式相同,创建了另一个独立的对象 secondNewObject。

ES6 解构赋值优化

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

10分钟内自己学会PHP
10分钟内自己学会PHP

10分钟内自己学会PHP其中,第1篇为入门篇,主要包括了解PHP、PHP开发环境搭建、PHP开发基础、PHP流程控制语句、函数、字符串操作、正则表达式、PHP数组、PHP与Web页面交互、日期和时间等内容;第2篇为提高篇,主要包括MySQL数据库设计、PHP操作MySQL数据库、Cookie和Session、图形图像处理技术、文件和目录处理技术、面向对象、PDO数据库抽象层、程序调试与错误处理、A

下载
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

代码解释

  1. const { cost, description } = sourceObject.sourceArray[0];: 这行代码使用解构赋值从 sourceObject.sourceArray[0] 对象中提取 cost 和 description 属性的值,并将它们分别赋值给同名变量 cost 和 description。

  2. const firstNewObject = { cost, description };: 这行代码使用对象字面量语法创建 firstNewObject,由于变量名和属性名相同,可以简写为 { cost, description }。

  3. const secondNewObject = { cost, description };: 同理,创建 secondNewObject。

注意事项

  • 确保 sourceArray 数组至少包含一个元素,否则访问 sourceObject.sourceArray[0] 会导致错误。 可以添加一个判断条件来避免这种情况。

  • 如果需要提取的属性数量较多,可以将提取属性的逻辑封装成一个函数,提高代码的可读性和可维护性。

总结

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

相关标签:

本站声明:本文内容由网友自发贡献,版权归原作者所有,本站不承担相应法律责任。如您发现有涉嫌抄袭侵权的内容,请联系admin@php.cn

相关专题

更多
es6新特性
es6新特性

es6新特性有:1、块级作用域变量;2、箭头函数;3、模板字符串;4、解构赋值;5、默认参数;6、 扩展运算符;7、 类和继承;8、Promise。本专题为大家提供es6新特性的相关的文章、下载、课程内容,供大家免费下载体验。

96

2023.07.17

es6新特性有哪些
es6新特性有哪些

es6的新特性有:1、块级作用域;2、箭头函数;3、解构赋值;4、默认参数;5、扩展运算符;6、模板字符串;7、类和模块;8、迭代器和生成器;9、Promise对象;10、模块化导入和导出等等。本专题为大家提供es6新特性的相关的文章、下载、课程内容,供大家免费下载体验。

185

2023.08.04

JavaScript ES6新特性
JavaScript ES6新特性

ES6是JavaScript的根本性升级,引入let/const实现块级作用域、箭头函数解决this绑定问题、解构赋值与模板字符串简化数据处理、对象简写与模块化提升代码可读性与组织性。本专题为大家提供相关的文章、下载、课程内容,供大家免费下载体验。

210

2025.12.24

c语言const用法
c语言const用法

const是关键字,可以用于声明常量、函数参数中的const修饰符、const修饰函数返回值、const修饰指针。详细介绍:1、声明常量,const关键字可用于声明常量,常量的值在程序运行期间不可修改,常量可以是基本数据类型,如整数、浮点数、字符等,也可是自定义的数据类型;2、函数参数中的const修饰符,const关键字可用于函数的参数中,表示该参数在函数内部不可修改等等。

520

2023.09.20

php源码安装教程大全
php源码安装教程大全

本专题整合了php源码安装教程,阅读专题下面的文章了解更多详细内容。

65

2025.12.31

php网站源码教程大全
php网站源码教程大全

本专题整合了php网站源码相关教程,阅读专题下面的文章了解更多详细内容。

45

2025.12.31

视频文件格式
视频文件格式

本专题整合了视频文件格式相关内容,阅读专题下面的文章了解更多详细内容。

40

2025.12.31

不受国内限制的浏览器大全
不受国内限制的浏览器大全

想找真正自由、无限制的上网体验?本合集精选2025年最开放、隐私强、访问无阻的浏览器App,涵盖Tor、Brave、Via、X浏览器、Mullvad等高自由度工具。支持自定义搜索引擎、广告拦截、隐身模式及全球网站无障碍访问,部分更具备防追踪、去谷歌化、双内核切换等高级功能。无论日常浏览、隐私保护还是突破地域限制,总有一款适合你!

41

2025.12.31

出现404解决方法大全
出现404解决方法大全

本专题整合了404错误解决方法大全,阅读专题下面的文章了解更多详细内容。

232

2025.12.31

热门下载

更多
网站特效
/
网站源码
/
网站素材
/
前端模板

精品课程

更多
相关推荐
/
热门推荐
/
最新课程
关于我们 免责申明 举报中心 意见反馈 讲师合作 广告合作 最新更新
php中文网:公益在线php培训,帮助PHP学习者快速成长!
关注服务号 技术交流群
PHP中文网订阅号
每天精选资源文章推送

Copyright 2014-2026 https://www.php.cn/ All Rights Reserved | php.cn | 湘ICP备2023035733号