如何将js对象属性合并

更新时间:2023-06-29 22:25:48 来源:青锋建站 作者:青锋建站
  js对象合并在函数封装过程中使用非常之多,利用对象属性的合并可以将新加的参数与默认的参数合并,起到更好的覆盖的使用。以下是青锋建站给大家分享的几种js对象属性合并的几种方法。

1、使用 Object.assign() 方法

  它可以将一个或多个对象的属性复制到目标对象中。例如:
const obj1 = { a: 1, b: 2 };
const obj2 = { b: 3, c: 4 };
const obj3 = Object.assign({}, obj1, obj2);
console.log(obj3); // { a: 1, b: 3, c: 4 }
这里我们使用空对象({})作为第一个参数,避免直接修改第一个对象。

2、使用解构赋值语法

  这种方法会在合并对象时保留键值相同的对象的属性,例如:
const obj1 = { a: 1, b: 2 };
const obj2 = { b: 3, c: 4 };
const obj3 = { ...obj1, ...obj2 };
console.log(obj3); // { a: 1, b: 3, c: 4 }

3、for-in 循环 + 手动赋值

const obj1 = { a: 1, b: 2 };
const obj2 = { b: 3, c: 4 };
const obj3 = {};
for (const key in obj1) {
  obj3[key] = obj1[key];
}
for (const key in obj2) {
  obj3[key] = obj2[key];
}
console.log(obj3); // { a: 1, b: 3, c: 4 }

4、使用 Object.keys() 和 Array.forEach() 方法

const obj1 = { a: 1, b: 2 };
const obj2 = { b: 3, c: 4 };
const obj3 = {};
Object.keys(obj1).forEach(key => {
  obj3[key] = obj1[key];
});
Object.keys(obj2).forEach(key => {
  obj3[key] = obj2[key];
});
console.log(obj3); // { a: 1, b: 3, c: 4 }
  最后需要提醒的是,在合并对象时如果键值相同的对象属性类型不同,例如一个为字符串类型,一个为数值类型,会覆盖之前的属性,因此需要根据项目需求做出相应的处理。
  此外,如果需要对合并对象的属性进行特殊处理,例如合并对象的属性值是一个数组,需要合并成一个新数组,可以使用 Array.concat() 方法。
const obj1 = { a: [1, 2] };
const obj2 = { a: [3, 4] };
const obj3 = Object.assign({}, obj1, {
  a: obj1.a.concat(obj2.a)
});
console.log(obj3); // { a: [1, 2, 3, 4] }
  或者使用扩展运算符
const obj1 = { a: [1, 2] };
const obj2 = { a: [3, 4] };
const obj3 = {...obj1, a: [...obj1.a, ...obj2.a]}
console.log(obj3); // { a: [1, 2, 3, 4] }
  此外,如果需要对合并对象的属性值进行进一步的处理,如去重、排序等,可以使用 Array.filter()、Array.sort() 等方法。以上是青锋建站给大家分享的几种js对象属性合并的几种方法。青锋建站,提供专业的高品质网站制作服务,包括多语言网站建设,中英文建站,外贸网站制作,微小程序开发,APP开发,SEO,网络营销,PHP开发,网站建设知名品牌,全国接单,为企业构建强有力的营销平台。

转载请注明来源网址:青锋建站-http://www.sjzphp.com/kaifazhe/javascript/jsobject_1853.html

电话 15632335515 | 邮箱 943703539@qq.com | QQ 943703539 | 微信 qingfengjianzhan

Copyright © 2016-2026 青锋建站 版权所有