一、ES6中的Object.assign()
Object.assign() 方法将所有可枚举的自有属性(对象自身的属性,不是原型属性)从一个或多个源对象复制到目标对象,返回合并后的对象。注意:该合并对象的方法是对对象里面属性的浅拷贝;并且会改变目标对象(第一个参数)。
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' } }
注意:也是对对象中属性的浅拷贝
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 循环自定义一个函数
函数功能:可以实现源对象的深拷贝,或者浅拷贝,返回合并后的对象
// 定义一个深拷贝函数,该函数接收一个数组或者对象作为一个参数(可以深拷贝数组和对象,方便复用)
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 删除。