Question

我正在解决一个问题，即任务是从输入数组合并多个对象，并返回一个合并了所有键和值的单个对象。如果输入数组中的一个或多个对象中存在键，则该键的最新值应存储在最终返回的对象中。

一个例子 -

var a={1:'1',2:'2',3:'3'},
    b={3:'4',5:'6',6:'7',7:'8'},
    c={5:'9',8:'9',6:'12',23:'35'}
    o=[a,b,c];

返回的对象应为 -

{ '1': '1','2': '2','3': '4','5': '9','6': '12','7': '8','8': '9','23':'35' }

作为重复键案例的示例，对象3和a中都存在键b，因此在最终结果中，值为{3:'4'}，因为它是最新的。

我想在此问题中使用spread syntax for Objects，但这只能解决其中的一部分问题。我的意思是，如果我单独使用每个对象的传播，那就像 -

function foo() {
  var a={'1':'1','2':'2','3':'3'},
    b={'3':'4','5':'6','6':'7','7':'8'},
    c={'5':'9','8':'9','6':'12','23':'35'},
    arr = [a,b,c];
    
   return {...arr[0], ...arr[1],  ...arr[2]}
}

console.log(foo());

为了实现这一点，我需要使用spread写出每个数组元素，如上面的代码片段 - ...arr[0], ...arr[1], ...arr[2]。但是，输入数组可以包含任意数量的对象，因此写出每个元素是不可行的。

通常，在像数组一样的迭代上使用spread，允许你扩展数组元素，如下所示 -

var parts = ['shoulders', 'knees']; 
var lyrics = ['head', ...parts, 'and', 'toes']; 
console.log(lyrics)

是否可以在输入数组上使用spread来收集所有可以再次应用传播的单个对象来获取最终对象？

Answer 1

您可以使用Object.assign()：

return Object.assign(...arr);

这是一个完整的片段：

＆＃13;

function foo() {
  var a={'1':'1','2':'2','3':'3'},
    b={'3':'4','5':'6','6':'7','7':'8'},
    c={'5':'9','8':'9','6':'12','23':'35'},
    arr = [a,b,c];
    
    return Object.assign(...arr);
}

console.log(foo());

＆＃13;

请注意，这会隐式修改数组中的第一个对象。如果您不想要，请将新的空对象作为第一个参数传递给Object.assign()：

return Object.assign({}, ...arr);

Answer 2

您可以直接在对象上使用扩展语法来合并它们。

function foo() {
  var a={'1':'1','2':'2','3':'3'},
      b={'3':'4','5':'6','6':'7','7':'8'},
      c={'5':'9','8':'9','6':'12','23':'35'}; 
  return {...a, ...b, ...c};
}

console.log(foo());

如果您有阵列，则可以使用array#reduce和Object#assign。

var a={'1':'1','2':'2','3':'3'},
    b={'3':'4','5':'6','6':'7','7':'8'},
    c={'5':'9','8':'9','6':'12','23':'35'},
    arr = [a,b,c];
var result = arr.reduce(function(r,o){
  return Object.assign(r,o);
},Object.create(null));

console.log(result);

注意：ECMAScript提案的Rest / Spread属性（第3阶段）将扩展属性添加到对象文字。它将自己的可枚举属性从提供的对象复制到新对象上。

如何在数组和对象上一起使用JavaScript扩展语法？

2 个答案: