对象合并的五种方法

Object.assign()

同名属性会被覆盖
Object.assign种第一个值是目标对象,第二个值是源对象

const obj1={
    
    a:"1",b:"2"}
const obj2={
    
    b:"3",c:"4"}
const result = Object.assign(obj1,obj2)
console.log(result)
//a:1 b:3 c:4     obj1中b的值被后面传入的obj2的值给覆盖掉了

扩展运算符

同名属性会被覆盖

使用…扩展运算符合并对象obj1对象在前和在后最后打印的结果是不同的

const obj1={
    
    a:"1",b:"2"};
const obj2={
    
    b:"3",c:"4"};
const result = {
    
    ...obj1,...obj2};
console.log(result)
//a:1 b:3 c:4     obj1中b的值被后面传入的obj2的值给覆盖掉了

lodash.assign

先将lodash工具库引入

<script src="https://cdn.bootcdn.net/ajax/libs/lodash.js/4.17.21/lodash.js">
</script>

在项目中我们通常使用_来代替lodash

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

lodash.merge

先将lodash工具库引入

<script src="https://cdn.bootcdn.net/ajax/libs/lodash.js/4.17.21/lodash.js">
</script>

在项目中我们通常使用_来代替lodash

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

lodash.assign和lodash.merge的区别

assign遇到同名的属性会直接覆盖
assign 不会处理原型链上的属性,也不会合并相同的属性,而是用后面的属性值覆盖前面的属性值

assign({
    
    }, {
    
     a: 1 }, {
    
     b: 2 });
// { a: 1, b: 2 }

// 后面的 { a: 2 } 把前面的 { a: 1 } 覆盖了
assign({
    
    }, {
    
     a: 1 }, {
    
     b: 2 }, {
    
     a: 2 });
// { a: 2, b: 2 }

// 观察下面两个例子,若是属性值为 object,后面的值会覆盖前面的值
assign(
  {
    
    },
  {
    
     a: 1 },
  {
    
     b: {
    
     c: 2, d: 3 } }
)
// { a: 1, b: { c: 2, d: 3 } }

assign(
  {
    
    },
  {
    
     a: 1 },
  {
    
     b: {
    
     c: 2, d: 3 } },
  {
    
     b: {
    
     e: 4 } }
)
// { a: 1, b: { e: 4 } }

// `assign` 函数会忽略原型链上的属性。
function Foo() {
    
     this.c = 3; }
Foo.prototype.d = 4;
assign({
    
     a: 1 }, new Foo());
// { a: 1, c: 3 }

// `assign` 会修改原来的对象
var test = {
    
     a: 1 };
assign(test, {
    
     b: 2 }); // { a: 1, b: 2 }
console.log(test);      // { a: 1, b: 2 }

merge遇到相同属性名的时候,若是属性值是纯对象或集合的时候,会合并属性值

assign(
  {
    
    },
  {
    
     a: 1 },
  {
    
     b: {
    
     c: 2, d: 3} },
  {
    
     b: {
    
     e: 4 } }
)
// { a: 1, b: { e: 4 } }
merge(
  {
    
    },
  {
    
     a: 1 },
  {
    
     b: {
    
     c: 2, d: 3} },
  {
    
     b: {
    
     e: 4 } }
)
// { a: 1, b: { c: 2, d: 3, e: 4 } }

// 合并集合
var users = {
    
    
  'data': [{
    
     'user': 'barney' }, {
    
     'user': 'fred' }]
};
var ages = {
    
    
  'data': [{
    
     'age': 36 }, {
    
     'age': 40 }]
};
merge({
    
    }, users, ages)
// { data: [ { user: 'barney', age: 36 }, { user: 'fred', age: 40 } ] }

// merge 函数会修改原来的对象!
merge(users, ages)
console.log(users) // { data: [ { user: 'barney', age: 36 }, { user: 'fred', age: 40 } ]

猜你喜欢

转载自blog.csdn.net/qq_47272950/article/details/124341774