首页 > 编程语言 >JavaScript 对象合并

JavaScript 对象合并

时间:2023-01-25 16:22:58浏览次数:45  
标签:obj1 obj3 obj2 const 对象 JavaScript 合并 key

JavaScript 中有多种方法可以合并对象。

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、使用 Lodash 中的 merge() 方法:

const obj1 = { a: 1, b: 2 };
const obj2 = { b: 3, c: 4 };
const obj3 = _.merge(obj1, obj2);
console.log(obj3); // { a: 1, b: 3, c: 4 }

4、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 }

5、使用 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 }

最后需要提醒的是,在合并对象时如果键值相同的对象属性类型不同,例如一个为字符串类型,一个为数值类型,会覆盖之前的属性,因此需要根据项目需求做出相应的处理。

标签:obj1,obj3,obj2,const,对象,JavaScript,合并,key
From: https://www.cnblogs.com/yuzhihui/p/17067030.html

相关文章

  • JavaScript 数组合并
    JavaScript中有多种方法可以将多个数组合并成一个数组。1、使用Array.prototype.concat()合并:concat()方法可以将多个数组合并成一个新数组。letarr1=[1,2,3];......
  • Tekton组件及资源对象
    Tekton由如下7个组件构成1)TektonPipeline:TektonPipeline是Tekton的基础组件,定义了一组Kubernetes自定义资源。作为构建模块的基础,你可以使用它们装配CI/CD流水线。2)Tek......
  • JavaScript 数组去重
    JavaScript中有多种方法可以实现数组去重,下面是几种常用的方法:1、使用Set去重:Set数据结构中不能有重复元素,可以将数组转成Set类型,再转回数组。letarr=[1,2,3,4,......
  • JavaScript 排序算法
    JavaScript提供了Array.prototype.sort()方法来对数组中的元素进行排序。默认情况下,sort()方法使用字典序来排序字符串。如果要按照数字大小进行排序,需要传递一个比较......
  • JavaScript 运算符&算数运算符
    一、运算符运算符(operator)也被称为操作符,是用于实现赋值、比较和执行算数运算等功能的符号。JavaScript中常用的运算符有:算数运算符递增和递减运算符比较运算符逻辑运算符赋......
  • 面向对象-继承-2
    面向对象-继承-2......
  • JavaScript学习笔记—函数的bind
    bind():函数的方法,可以用来创建一个新的函数bind可以为新函数绑定thisbind可以为新函数绑定参数functionfn(a,b,c){console.log("fn执行了~~~",this);consol......
  • JavaScript学习笔记—函数中的call和apply
    调用函数除了通过函数()这种形式外,还可以通过其他的方式来调用函数,比如可以通过调用函数的call()和apply()两个方法来调用函数函数.call()函数.apply()call和apply除......
  • JavaScript学习笔记—可变参数
    可变参数可以接收任意数量实参,并将他们统一存储到一个数组中返回可变参数的名字可以自己指定可变参数就是一个数组,可以直接使用数组的方法可变参数可以配合其他参数一......
  • 4.2 JavaScript 执行上下文与作用域
    一、执行上下文JavaScript执行上下文是指JavaScript引擎在执行代码时的环境。它包含了代码所需的所有信息,包括变量对象、作用域链、this对象等。JavaScript引擎在执......