当前位置: 首页 > news >正文

前端开发:JS中向对象中添加对象的方法

前言

在前端开发过程中,一切皆对象,尤其是在数据处理的时候,大部分时候也是处理对象相关的数据,所以对象在JS中是很重要的一个内容,也是必用的内容。本篇博文来分享一下关于在JS中对象里面添加对象的操作,虽然知识点不难,但是常用,所以总结一下存起来,方便查阅使用。

对象是什么?

在JS中,对象就是一种数据类型,即引用数据类型。在ECMAScript中引用类型是一种数据结构,主要是把数据和功能融合在一起。所以这里所说的对象就是Object。

向对象中添加对象的场景

在实际开发过程中,有时候会遇到合并两个对象的业务场景,或者是把对象A添加到对象B中,一般这种需求都是在提交表单数据给后台的时候比较常见。而且这种给对象中添加对象的需求很常见且重要,所以要掌握。

对象中添加对象的方式

在JS中向对象中添加对象的操作方法大概有三种:直接添加、使用扩展运算符...、Object.assign()方法。

1、直接添加

直接在对象A中添加需要的键值对内容,具体示例如下所示:

let objectA = {
  name: 'Tom'
};
let key = 'age';
let value = 31;
objectA[key] = value;   //结果为:objectA.age = 18
console.log( 'objectA===>',objectA);  //输出结果为:objectA===> {name: 'Tom', age: 31}

 

2、使用扩展运算符...

使用扩展运算符...实现对象中添加对象是比较常用的方式,具体示例如下所示;

let objectA = {
    name: 'Tom'
};   

let objectB = {
     age: 31   
};

let object = { ...objectA, ...objectB};

console.log( 'object===>',object);   //输出结果为:object===> {name: 'Tom', age: 31}

 

3、Object.assign()方法

Object.assign()方法有好几个用法,主要是用于将所有可枚举属性的值从一个或多个源对象复制到目标对象中。这里主要是介绍关于对象的合并相关的功能,具体示例如下所示:

let objectA = {

    name: 'Tom'

};   

let objectB = {

    age: 31   

};

Object.assign( objectA, objectB);

console.log( 'objectA===>',objectA);  //输出结果为:objectA===> {name: 'Tom', age: 31}

 

最后

通过本文的介绍,关于在JS中对象里面添加对象的操作就得心应手了,虽然该知识点不难但是重要和常用,尤其是对于刚接触前端开发不久的开发者来说更是如此,所以绝对掌握该知识点还是很有必要的,重要性不再赘述。欢迎关注,共同进步。

相关文章:

  • Vim编辑器常用操作手册
  • Pytorch学习——梯度下降和反向传播 03 未完
  • 一次实战压测流程及问题梳理
  • HTTP协议中常见的状态码及其含义
  • Go 语言 设计模式-工厂模式
  • 塑化行业SRM供应商管理系统:缩短采购周期时间,改善供应商采购管理
  • 【原创】基于SpringBoot的灾情救助系统(疫情援助系统)(SpringBoot毕业设计)
  • EasyExcel 导入导出Excel文件
  • python基础语法二(函数、列表)
  • Shopee店铺提高商品转化的方法,你get到了吗
  • Java筑基32-IO流02-节点流处理流
  • 【ffmpeg】音频采集
  • 【负荷预测】基于蚂蚁优化算法的BP神经网络在负荷预测中的应用研究(Matlab完整代码实现)
  • 前端例程20220913:粒子飘落效果动画背景
  • 狂神的springboot课程员工管理系统
  • Google 是如何开发 Web 框架的
  • (十五)java多线程之并发集合ArrayBlockingQueue
  • [deviceone开发]-do_Webview的基本示例
  • 【402天】跃迁之路——程序员高效学习方法论探索系列(实验阶段159-2018.03.14)...
  • ES6--对象的扩展
  • github指令
  • hadoop集群管理系统搭建规划说明
  • IP路由与转发
  • Java读取Properties文件的六种方法
  • Python连接Oracle
  • Spark学习笔记之相关记录
  • v-if和v-for连用出现的问题
  • vue.js框架原理浅析
  • vue+element后台管理系统,从后端获取路由表,并正常渲染
  • Vue官网教程学习过程中值得记录的一些事情
  • 看完九篇字体系列的文章,你还觉得我是在说字体?
  • 前端每日实战:61# 视频演示如何用纯 CSS 创作一只咖啡壶
  • 小而合理的前端理论:rscss和rsjs
  • Salesforce和SAP Netweaver里数据库表的元数据设计
  • ​LeetCode解法汇总1410. HTML 实体解析器
  • ​虚拟化系列介绍(十)
  • # 计算机视觉入门
  • $.type 怎么精确判断对象类型的 --(源码学习2)
  • (ZT)薛涌:谈贫说富
  • (办公)springboot配置aop处理请求.
  • (二)基于wpr_simulation 的Ros机器人运动控制,gazebo仿真
  • (解决办法)ASP.NET导出Excel,打开时提示“您尝试打开文件'XXX.xls'的格式与文件扩展名指定文件不一致
  • (一)80c52学习之旅-起始篇
  • (幽默漫画)有个程序员老公,是怎样的体验?
  • (转)chrome浏览器收藏夹(书签)的导出与导入
  • (转)eclipse内存溢出设置 -Xms212m -Xmx804m -XX:PermSize=250M -XX:MaxPermSize=356m
  • (转)shell调试方法
  • (转)VC++中ondraw在什么时候调用的
  • (转)程序员疫苗:代码注入
  • (轉)JSON.stringify 语法实例讲解
  • .NET 发展历程
  • .Net 知识杂记
  • .NET:自动将请求参数绑定到ASPX、ASHX和MVC(菜鸟必看)
  • .net下简单快捷的数值高低位切换
  • .NET性能优化(文摘)