为什么我的reduce累加器会重置？

Question

我应该如何保留我的reduce函数的累加值？每次迭代都会重置对象值。

const a = [1, 2, 3, 4, 5];

const b = {
  1: {
    name: 'Dan',
    age: 25
  },
  2: {
    name: 'Peter',
    age: 28
  },
  3: {
    name: 'Mark',
    age: 38
  },
  4: {
    name: 'Larry',
    age: 32
  },
  5: {
    name: 'Simon',
    age: 25
  },
}

const f = a.reduce((acc, val) => {
  console.log({
    acc
  })
  return {
    [val]: {
      age: b[val].age
    }
  }
}, {})

console.log(f); // 5: {age: 25}

我的期望结果是：

{
  1: { age: 25 },
  2: { age: 28 },
  3: { age: 38 },
  4: { age: 32 },
  5: { age: 25 },
}

（这个例子是一个演示）

- Dan

Answer 1

使用对象展开语法（像这个例子）或者Object.assign()，将之前的累加器加到返回值中：

const a = [1, 2, 3, 4, 5];

const b = {"1":{"name":"Dan","age":25},"2":{"name":"Peter","age":28},"3":{"name":"Mark","age":38},"4":{"name":"Larry","age":32},"5":{"name":"Simon","age":25}};

const f = a.reduce((acc, val) => ({
  ...acc, // previous accumulator
  [val]: {
    age: b[val].age
  }
}), {})

console.log(f); // 5: {age: 25}

- Ori Drori

---

为了保持安全（和清晰），你可以使用 Object.keys(b).reduce(...)！ - Alexander Wallin

@AlexanderWallin - 你也可以使用 Object.entries() 来获取键和值。顺便说一下 - Object.keys/values/entries 将保留数字顺序。 - Ori Drori

Answer 2

根据MDN的说明：

reduce()方法将一个函数应用于累加器和数组中的每个元素（从左到右），以将其减少为单个值。

在每次迭代中，您需要在reduce()函数内返回新对象，并且不存储该累加器的先前值。因此，您需要合并或分配先前值与新值。

可以使用Object.assign()方法来获得所需的结果。 演示

const a = [1, 2, 3, 4, 5];

const b = {1: {name: 'Dan',age: 25},2: {name: 'Peter',age: 28},3: {name: 'Mark',age: 38},4: {name: 'Larry',age: 32},5: {name: 'Simon',age: 25}}

let result = a.reduce((acc, val) => Object.assign(acc,{[val]: {age:b[val].age}}), {});

console.log(result);

.as-console-wrapper {max-height: 100% !important;top: 0;}

第二种方法可以这样做：obje[val]=newValue 并返回累加器。

演示

const a = [1, 2, 3, 4, 5];

const b = {1: {name: 'Dan',age: 25},2: {name: 'Peter',age: 28},3: {name: 'Mark',age: 38},4: {name: 'Larry',age: 32},5: {name: 'Simon',age: 25}}

let result = a.reduce((acc, val) =>{
acc[val]= {age:b[val].age};
return acc;
}, {});

console.log(result);

.as-console-wrapper {max-height: 100% !important;top: 0;}

另一种组合使用扩展语法的方法是

演示

const a = [1, 2, 3, 4, 5];

const b = {1: {name: 'Dan',age: 25},2: {name: 'Peter',age: 28},3: {name: 'Mark',age: 38},4: {name: 'Larry',age: 32},5: {name: 'Simon',age: 25}}

let result = a.reduce((acc, val) => {
return {...acc,...{[val]:{age:b[val].age}}}
}, {});

console.log(result);

.as-console-wrapper {max-height: 100% !important;top: 0;}

- Narendra Jadhav

Answer 3

如果您在reduce函数中有一个if else语句，其中您为if语句返回一个累加器但忘记处理else语句并且没有返回累加器，则您的reduce累加器也可以重置 - 在这种情况下，当触发else语句时，不会返回累加器，累加器变为未定义。

例如，这个是有效的：

let reducedArray = array.reduce((acc, curr) => {
          if (
            curr[
              property_name
            ]
          ) {
            return {
              ...acc,
              ...{
                [curr.id]:
                  (acc[curr.id] ?? 0) +
                  curr[
                    property_name
                  ]!
              },
            };
          } else {
            return acc;
          }
        }, {} as { [key: string]: number });

但这样做不起作用：

let reducedArray = array.reduce((acc, curr) => {
          if (
            curr[
              property_name
            ]
          ) {
            return {
              ...acc,
              ...{
                [curr.id]:
                  (acc[curr.id] ?? 0) +
                  curr[
                    property_name
                  ]!
              },
            };
          }
        }, {} as { [key: string]: number });

- Bryan Lee