如何在数组和对象上一起使用 JavaScript 传播语法？答案

【问题标题】：How to use JavaScript spread syntax on array and object together?如何在数组和对象上一起使用 JavaScript 传播语法？
【发布时间】：2017-09-15 03:36:50
【问题描述】：

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

一个例子 -

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，但这只能解决一部分问题。我的意思是，如果我对每个对象单独使用 spread ，那就可以了，比如 -

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());

为此，我需要用扩展写出每个数组元素，如上面的 sn-p - ...arr[0], ...arr[1], ...arr[2]。但是，输入数组可以包含任意数量的对象，因此写出每个元素是不可行的。

通常，在像数组这样的可迭代对象上使用扩展，可以让您扩展数组元素，就像这样-

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

是否可以在输入数组上使用spread来收集所有单独的对象，然后再次对其应用spread，得到最终的对象？

【问题讨论】：

标签： javascript arrays object ecmascript-6

【解决方案1】：

你可以使用Object.assign():

return Object.assign(...arr);

这是一个完整的sn-p：

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());

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

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

【讨论】：

【解决方案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 提案（第 3 阶段）的 Rest/Spread 属性将扩展属性添加到对象文字。它将自己的可枚举属性从提供的对象复制到新对象。

【讨论】：