前往小程序,Get更优阅读体验!
立即前往
首页
学习
活动
专区
工具
TVP
发布
社区首页 >专栏 >合并对象的方法

合并对象的方法

原创
作者头像
用户10562852
发布2023-05-12 14:50:43
7730
发布2023-05-12 14:50:43
举报
文章被收录于专栏:前端不难

一、ES6中的Object.assign()

Object.assign() 方法将所有可枚举的自有属性(对象自身的属性,不是原型属性)从一个或多个源对象复制到目标对象,返回合并后的对象。注意:该合并对象的方法是对对象里面属性的浅拷贝;并且会改变目标对象(第一个参数)。

代码语言:javascript
复制
const target = {}
const source1 = {b: 'yes'}
Object.defineProperties(target, {
	count: {
		value: "yes",
		enumerable: true // 可以被枚举
	},
	a: {
		value: "no",
		enumerable: false // 不可被枚举
	}
})
console.log(Object.assign(target, source1)) // { count: 'yes', b: 'yes', c: { foo: 'yes' } }
target.c.foo = "change"
console.log(source1) // { b: 'yes', c: { foo: 'change' } }

二、ES6中扩展运算符 ...

注意:也是对对象中属性的浅拷贝

代码语言:javascript
复制
let obj1 = {a: 0, o: {count: 0}};
let obj2 = {b: 2}
let combineObj = {...obj1, ...obj2}
combineObj.o.count = 11;
console.log(combineObj) // { a: 0, o: { count: 11 } ], b: 2 }
console.log(obj1) // { a: 0, o: { count: 11 } }

三、for...in 循环自定义一个函数

函数功能:可以实现源对象的深拷贝,或者浅拷贝,返回合并后的对象

代码语言:javascript
复制
// 定义一个深拷贝函数,该函数接收一个数组或者对象作为一个参数(可以深拷贝数组和对象,方便复用)
function deepCopy(parameter) {
	// 1.判断该属性是否是数组形式,根据其类型创建变量
	let newValue = Array.isArray(parameter) ? [] : {};
	// 2.循环该对象或数组的属性值,并判断是否是引用类型
	for(let key in parameter) {
		// 3.是引用类型继续递归(逐层拷贝)得到其值后赋值给 newValue
		if(typeof parameter[key] === "object") {
			newValue[key] = deepCopy(parameter[key])
		}else {
			// 是基本类型的话直接赋值
			newValue[key] = parameter[key]
		}
	}
	// 4.返回拷贝后的对象
	return newValue;
}
// 定义合并对象的方法
function extend(selectDeepOrShallow, ...arguments) {
	// 1.创建合并后的对象
	let combineObj = {};
	// 2.拿到传入的每个对象,因为对象存储在 arguments 数组中,需要循环操作
	for(let i = 0; i < arguments.length; i++) {
		// 3.拿到每个对象中的属性值,并判断其类型,并且是否需要深拷贝
		for(let key in arguments[i]) {
			if(typeof arguments[i][key] === "object" && selectDeepOrShallow) combineObj[key] = deepCopy(arguments[i][key])
			else combineObj[key] = arguments[i][key]
		}
	}
	// 4.返回合并后的对象
	return combineObj;
}
let combineObj = extend(true, obj1, obj2)
combineObj.o.count = 2323;
combineObj.arr[0].foo = 'change'; // 验证是否是深或浅拷贝
console.log(combineObj)
// {
//   a: 0,
//   o: { count: 2323 },
//   arr: [ { foo: 'change' }, 0, 23, 5 ],
//   b: 2
// }
console.log(obj1)
// { a: 0, o: { count: 0 }, arr: [ { foo: 'foo' }, 0, 23, 5 ] }

原创声明:本文系作者授权腾讯云开发者社区发表,未经许可,不得转载。

如有侵权,请联系 cloudcommunity@tencent.com 删除。

原创声明:本文系作者授权腾讯云开发者社区发表,未经许可,不得转载。

如有侵权,请联系 cloudcommunity@tencent.com 删除。

评论
登录后参与评论
0 条评论
热度
最新
推荐阅读
目录
  • 二、ES6中扩展运算符 ...
相关产品与服务
对象存储
对象存储(Cloud Object Storage,COS)是由腾讯云推出的无目录层次结构、无数据格式限制,可容纳海量数据且支持 HTTP/HTTPS 协议访问的分布式存储服务。腾讯云 COS 的存储桶空间无容量上限,无需分区管理,适用于 CDN 数据分发、数据万象处理或大数据计算与分析的数据湖等多种场景。
领券
问题归档专栏文章快讯文章归档关键词归档开发者手册归档开发者手册 Section 归档