javascript - Es6 休息和传播如何运作

Question

我现在有以下代码

var _ = require('underscore');
var raw =[
  {
    key :"name",value:"henry"
  },
  {
    key :"age",value:"old"
  },
  {
    key :"food",value:"matooke"
  },
  {
    key :"kids",value:"Acacia"
  },
  {
    key :"garbageA",value:"kasailoA"
  },
  {
    key :"garbageB",value:"kasasiroB"
  },

]
const endShape = _(raw)
.filter(({key}) =>!/garbage/.test(key))
.map(({key,value})=>({[key]:value}))
.reduce((acc,curr)=>({...curr, ...acc}));

console.log(endShape);

代码运行良好，我正在遵循教程。我了解 .map() 方法。虽然我没能清楚地解释什么

.reduce((acc,curr)=>({...curr, ...acc}));

正在做。如何得出这个正确的结果？

{ kids: 'Acacia', food: 'matooke', age: 'old', name: 'henry' }

Answer 1

基本上，map函数输出如下:

[
  {
    name: 'henry'
  },
  {
    age: 'old'
  },
  {
    food: 'matooke'
  },
  {
    kids: 'Acacia'
  }
]

reduce 将像 Object.assign 一样工作。它将迭代上面的数组，并将每个键/值对添加到累积对象中，该对象一开始是一个空对象。这就是为什么你会得到:

{ kids: 'Acacia', food: 'matooke', age: 'old', name: 'henry' }

累积对象在开始时是未定义，但由于解构，这并不重要:

const foo = undefined;
const bar = { a: 'b' };

console.log({...foo, ...bar })