使用对象扩展运算符(ES6、JavaScript)添加多个对象

Posted

技术标签:

【中文标题】使用对象扩展运算符(ES6、JavaScript)添加多个对象【英文标题】:Adding multiple objects using object spread operator (ES6, JavaScript) 【发布时间】:2018-05-13 00:41:41 【问题描述】:

我有 3 个对象具有相同的数据,但在数组内部具有单独的服务和提供 id,所以我试图得到预期的结果,如下所述和 please check my try here。提前致谢

对象 1:

const obj1 = 
              bid              : 1,
              mobile           : 9533703390,
              services : [
                  
                   service_id  : 5,
                   offer_id    : 10,
                   count       : 1
                  
              ]
        

对象2:

const obj2 = 
              bid              : 1,
              mobile           : 9524703390,
              services : [
                  
                   service_id  : 8,
                   offer_id    : 12,
                   count       : 1
                  
              ]
        

对象 3:

const obj3 = 
              bid              : 1,
              mobile           : 9524703390,
              services : [
                  
                   service_id  : 5,
                   offer_id    : 10,
                   count       : 1
                  
              ]
        

最终结果 - 每个对象都有单独的服务和报价,然后如果相同的报价和服务 ID 需要添加计数 + 1 否则返回数据

  const result = 

                 bid              : 1,
                 mobile           : 9524703390,
                 services : [
                    
                      service_id  : 5,
                      offer_id    : 10,
                      count       : 2
                    ,
                    
                      service_id  : 8,
                      offer_id    : 12,
                      count       : 1
                    
                 ]

              

【问题讨论】:

展开运算符并不神奇。它无法决定如何合并或何时需要递归。您需要对服务进行手动迭代才能正确合并它们。 你能提供一些例子吗?我是 java 脚本的新手,因为我正在尝试好的解决方案 检查我的答案。这是一个解决方案,但不确定它是否符合“好解决方案”的条件 【参考方案1】:

您可以使用array#reduce 将所有对象合并为单个对象,并使用array#concat services 值。然后使用array#reduce将所有基于service_id的服务对象合并到一个对象中,并将这个对象的值重新赋值给services

const obj1 =  bid : 1, mobile : 9533703390, services : [  service_id : 5, offer_id : 10, count : 1  ] ,
      obj2 =  bid : 1, mobile : 9524703390, services : [  service_id : 8, offer_id : 12, count : 1  ] ,
      obj3 =  bid : 1, mobile : 9524703390, services : [  service_id : 5, offer_id : 12, count : 1  ] ;

var combined = [obj1, obj2, obj3].reduce((r,o) => Object.assign(, o, services : r.services.concat(o.services)));

combined.services = Object.values(combined.services.reduce((res, services) => 
  if(res[services.service_id])
    res[services.service_id].count += services.count;
  else
    res[services.service_id] = Object.assign(, services);
    return res;
,));

console.log(combined)

【讨论】:

您好,如何根据 service_id && offer_id 合并所有服务对象? 您可以在combined 对象中使用组合键。一个可能的密钥是services.service_id + '|' + services.offer_id【参考方案2】:

扩展运算符不执行递归附加或类似的操作。但是,您可以将它与 Object.assign 一起使用,如下所示:

const result = Object.assign(
 obj1, 
 obj2, 
 obj3,  
  services: [ ...obj1.services, ...obj2.services, ...obj3.services,  ]
); //Consolidate everything

然后您可以整合服务:

const servicesObject = ;
result.services.forEach((service) => 
        if (servicesObject[service.service_id] !== undefined) 
            servicesObject[service.service_id].count += 1;
     else 
          servicesObject[service.service_id] = service;
    
); // Merge services
result.services = servicesObject;

如果你仍然希望服务是一个数组,那么你可以这样做

result.services = Object.entries(servicesObject)
                      .map(([key,value]) => value);

检查更新的小提琴http://jsfiddle.net/rkdejpab/15/

【讨论】:

【参考方案3】:
function merge(...objs) 

    let result = objs.reduce((acc, item) => 
        acc.bid = item.bid;
        acc.mobile = item.mobile;
        if (!acc.services) 
            acc.services = []
            acc.services.push(item.services[0]);
        
        else 
            let index = acc.services.findIndex(function (elem) 
                return elem.service_id === item.services[0].service_id && elem.offer_id == item.services[0].offer_id;
            );
            if (!(index === -1)) 
                acc.services[index].count += 1;
            
            else 
                acc.services.push(item.services[0]);
            
        
            return acc
    , );
    return result;


console.log(merge(obj1, obj2, obj3));

【讨论】:

以上是关于使用对象扩展运算符(ES6、JavaScript)添加多个对象的主要内容,如果未能解决你的问题,请参考以下文章

JavaScript ES6 - 对象扩展

JavaScript ES6 - 对象扩展

ES6-05:数组的扩展

javascript ES6 - 使用`...`扩展运算符来修改/拼接/合并具有obects的数组

ES6对象扩展——扩展运算符

Babel 无法使用扩展运算符编译 ES6 对象克隆