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

这篇具有很好参考价值的文章主要介绍了前端开发:JS中向对象中添加对象的方法。希望对大家有所帮助。如果存在错误或未考虑完全的地方,请大家不吝赐教,您也可以点击"举报违法"按钮提交疑问。

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

在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()方法有好几个用法,主要是用于将所有可枚举属性的值从一个或多个源对象复制到目标对象中。这里主要是介绍关于对象的合并相关的功能,具体示例如下所示:文章来源地址https://www.toymoban.com/news/detail-510653.html


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

到了这里,关于前端开发:JS中向对象中添加对象的方法的文章就介绍完了。如果您还想了解更多内容,请在右上角搜索TOY模板网以前的文章或继续浏览下面的相关文章,希望大家以后多多支持TOY模板网!

本文来自互联网用户投稿,该文观点仅代表作者本人,不代表本站立场。本站仅提供信息存储空间服务,不拥有所有权,不承担相关法律责任。如若转载,请注明出处: 如若内容造成侵权/违法违规/事实不符,请点击违法举报进行投诉反馈,一经查实,立即删除!

领支付宝红包 赞助服务器费用

相关文章

  • js对象里面添加对象

    实际工作学习中我们经常会遇到需要 将一个对象添加到另一个对象中 去, 在js对象里面添加对象有三种方式: 直接添加,Object.assign() ,展开运算符(...) 1. 直接添加: 2.Object.assign() 3. es6新增的展开运算符(...) 需要 注意 的是,使用Object.assign()和展开运算符(...),重复添

    2024年02月11日
    浏览(57)
  • Vue3前端开发,如何获取组件内dom对象以及子组件的属性和方法

    Vue3前端开发,借助Ref来获取组件内dom对象,借助defineExpose编译宏可以获取到子组件的属性和方法。 app入口文件,我们作为父组件,在里面调用了自定义组件TestCom.vue。 先做了一个测试,借助于ref来访问自身的dom对象。如图所示是可以拿到的。 ref又称谓钩子函数,在vue2版本中

    2024年01月22日
    浏览(60)
  • js向对象添加属性

    1、使用 对象.属性名 添加 2、使用 对象[属性名]添加 3、使用 prototype添加

    2024年02月09日
    浏览(43)
  • 在前端html页面中向服务器发送post登录请求

    目录 前言 搭建服务器 搭建前端登录页面 获取表单值 使用axios发送post登录请求 前言 一般在html页面中向服务器发送post请求的模块为登录请求,本文将介绍如何向服务器发送post请求 搭建服务器 如何搭建服务器请看JWT认证这篇文章,有详细的解说。这里之所以使用JWT认证是因

    2024年02月08日
    浏览(44)
  • 【JS】js给对象动态添加、设置、删除属性名和属性值

    js中访问对象属性一共有两种方法:点获取法和方括号获取法。 使用点符号访问属性值 alert( user.name ); // John 使用方括号访问属性值 alert( user[name]); // John 注意: 如果我们遍历一个对象,我们获取属性的顺序是和属性添加时的顺序相同吗? 简短的回答是:“有特别的顺序”:整

    2023年04月13日
    浏览(45)
  • vue前端开发中,通过vue.config.js配置和nginx配置,实现多个入口文件的实现方法

    由于vue为单页面项目,通过控制组件局部渲染,main.js是整个项目唯一的入口,整个项目都在一个index.html外壳中。 若项目过大,会造成单页面负载过重;同时,多页面利于模块独立部署。 如果项目中不同的页面需要不同的main.js和App.vue这样就需要配置多个入口了。 要单独将页

    2024年01月22日
    浏览(87)
  • Vue 循环map对象拿到key值和value值,VUE 获取对象{}的key值,vue根据对象id删除数组中的对象,实现局部刷新的功能,vue中JS 对象动态添加键值对 vue中JS 对象动态添加键值对

    适用场景: vue中定义的map对象 map : { name : \\\'xxx\\\' } 接口回显map格式的数据 data :{ key : value} 都可以通过以下方式拿到key和value的值 VUE 获取对象{}的key值  vue根据对象id删除数组中的对象,实现局部刷新的功能 方法一:使用过滤器 注:这个一般是根据对象id 方法二:使用splice() 注

    2024年02月16日
    浏览(53)
  • vue+cordova混合开发APP中向手机本地存储/读取文件

    采用 vue + cordova 开发的App, 项目首屏为 three.js 编写的3D场景 3D模型的数据是首屏启动后前端调用接口获取的json数据,数据大小30M. 用户在首页与其他页面切换时,调用该接口时间过长,并消耗大量流量 解决思路: 首页页面不销毁,做缓存. (可行,但three.js的页面内存占用量极大,不做特

    2024年02月09日
    浏览(41)
  • 【Js 前端面向对象编程具体该怎么做】

    在 JavaScript 中,面向对象编程可以通过以下方式实现: 使用构造函数创建对象:使用构造函数可以创建具有相同属性和方法的多个对象。 例子: 使用原型创建对象:使用原型可以在多个对象之间共享属性和方法,从而减少内存的占用。 例子: 继承:可使用原型继承创建一

    2024年02月16日
    浏览(44)
  • 【JS】前端base64转图片File对象

    base64ToFile.js

    2024年02月05日
    浏览(56)

觉得文章有用就打赏一下文章作者

支付宝扫一扫打赏

博客赞助

微信扫一扫打赏

请作者喝杯咖啡吧~博客赞助

支付宝扫一扫领取红包,优惠每天领

二维码1

领取红包

二维码2

领红包