如何使用reduce将一个对象数组转换为单个对象

Question

我尝试使用reduce或map，但我有时候是个新手。

我正在尝试使用这个函数从对象中返回单个数组。

var obj = [{ a: 1 }, { b: 2 }, { c: 3 }];
    var result = obj.reduce((obj, item) => [item.key] = item.value);
    console.log(result);

但我总是得到以下错误：

Uncaught TypeError: 无法读取未定义的属性 'Symbol（Symbol.iterator）'

我搜索了很多，但这些示例对我没有帮助...我认为这是一件简单的事情，但经过1个小时，我仍然一无所获。

我想要的是...

[{a: 1}, {b: 2}, {c: 3}] to {a: 1, b: 2, c: 3}

- Eduardo Jastre

Answer 1

您可以使用Object.assign和扩展运算符...。

var obj = [{ a: 1 }, { b: 2 }, { c: 3 }];

console.log(Object.assign({}, ...obj));

使用 Array#reduce 方法

var obj = [{ a: 1 }, { b: 2 }, { c: 3 }];

console.log(obj.reduce((r, o) => Object.assign(r, o), {}));

没有使用 Object.assign

var obj = [{ a: 1 }, { b: 2 }, { c: 3 }];

console.log(obj.reduce((r, o) => (Object.entries(o).forEach(([k, v]) => r[k] = v), r), {}));

ES5

var obj = [{ a: 1 }, { b: 2 }, { c: 3 }];

console.log(obj.reduce(function (r, o) {
    Object.keys(o).forEach(function (k) {
        r[k] = o[k];
    });
    return r;
}, {}));

- Nina Scholz

---

代码运行得很完美。但有没有使用 reduce() 的方法呢？谢谢！！！ - Eduardo Jastre

请注意，根据 https://developer.mozilla.org/en-US/docs/Web/JavaScript/Reference/Operators/Spread_operator ，扩展语法在 IE 中可能无法正常工作。 - Bemmu

@NinaScholz 对，我没想到那个！ - Bemmu

Answer 2

如果您想使用reduce：

var arr = [{ a: 1 }, { b: 2 }, { c: 3 }];

var result = arr.reduce((obj, item) => Object.assign(obj, item), {});

当有疑问时，请查看MDN文档。

- Salomao Rodrigues

---

这就是我正在寻找的...简化并将事物走在正确的道路上。谢谢!! 我正努力学习如何写得更少，做得更多。 - Eduardo Jastre

如果你有一个包含转译过程的构建流程，我强烈推荐使用@nina-scholz的对象分配+扩展语法。如果你的代码直接进入浏览器，则使用她的ES5解决方案。 - Salomao Rodrigues

Answer 3

你可以使用reduce以以下方式完成它。

var obj = [{ a: 1 }, { b: 2 }, { c: 3 }];
    var result = obj.reduce((obj, item) =>  {
    Object.assign(obj, item)
    return obj;
    }, {});
    console.log(result);

- marvel308

---

哦，谢谢，现在我明白了 reduce 真正的作用是什么了...它遍历项目并且你必须使用它。 - Eduardo Jastre