在reduce函数之后返回一个对象

Question

我尝试将reduce 与spread 运算符结合使用来练习。我有一个要转换为对象的数组。我尝试这样做，但我的 reduce 函数只返回数组的最后一个值。我希望这个 reducer 函数添加到数组中。我的尝试：const arr = ['1' , '4' , '3' , '5' , '3'];let obj;arr.reduce((acc ,val) => {    obj = {...acc , [val]:val};},{});console.log(obj)为什么我只得到最后一个值？而不是整个数组到一个对象？

Answer 1

reduce 回调需要return像您一样表达的if。在您的场景中，reduce 回调不会返回任何内容，因为obj已分配但从未返回，因此acc在第二次迭代中未定义并obj在每个循环中分配，导致最后一个元素arr传播到对象。

如果你想在一行中做到这一点，你也可以避免分配 to obj，只需按预期使用 reduce ，逐渐扩展到一个全新的对象。返回的值reduce将分配给obj。

const arr = ['1' , '4' , '3' , '5' , '3'];

let obj = arr.reduce((acc, val) => ({...acc, [val]: val}), {});

//                                                         ^--- initial value

console.log(obj);

Answer 2

您需要从减少函数中返回累加器的新值

const arr = ['1' , '4' , '3' , '5' , '3'];

const obj = arr.reduce((acc ,val) => {

    return {...acc , [val]:val};

},{});

console.log(obj);

您可以通过返回括在括号中的对象字面量来进一步缩短它。请参阅返回对象文字

const arr = ['1' , '4' , '3' , '5' , '3'];

const obj = arr.reduce((acc ,val) => ({...acc , [val]:val}), {});

console.log(obj);

Answer 3

那是因为你没有从 reduce 中返回 balue

const arr = ['1' , '4' , '3' , '5' , '3'];

let obj = arr.reduce((acc ,val) => {

    const obj = {...acc , [val]:val};

    return obj;

},{});

console.log(obj)

或简化

const arr = ['1', '4', '3', '5', '3'];

const obj = arr.reduce((acc, val) => ({ ...acc,[val]: val}), {});

console.log(obj)