在javascript中使用reduce更改对象值

如何解决在javascript中使用reduce更改对象值

我想使用reduce改变对象的值，但结果与我预期的不同。

const test = [
  {id: 'start',value: false},{id: 'reject',];

let ress;
const showModal = (which) => {
  const res = test.reduce((res,s) => {
    ress = {id: s.id,value: s.id === which ? (s.value = true) : (s.value = false)};
    return ress;
  },[]);
}

showModal('start');
console.log(ress);

实际结果：

{
  "id": "reject","value":false
}

预期：

[
  {id: 'start',value: true},]

我不明白，为什么删除了 {id:'start',value:true} 并且 key 更改为 string 类型。

这是一个工作示例： https://codepen.io/seoulsaram/pen/RwpJRPv?editors=1010
谢谢！

解决方法

const res = test.reduce((res,s) => {
  ress = {
    id: s.id,value: s.id === which ? (s.value = true) : (s.value = false)
  };
  return ress; // returning always last object as result.
},[]);

此代码不正确，您总是推送最新的对象。

这里应该是什么样子（这不是实现这一目标的最佳方式，我只是让您的代码按您的预期工作）：

const res = test.reduce((res,s) => {
  const ress = {
    id: s.id,value: s.id === which ? (s.value = true) : (s.value = false)
  }
  res.push(ress)
  return res; // return accumulator instead of object
},[]);

根据您的问题，看起来您正在寻找 find 而不是减少。

这是对您的情况更好的方法（改变原始数组）：

const test = [
  {id: 'start',value: false},{id: 'reject',]

const showModal = (which) => {
  const found = test.find(e => e.id === which)
  found.value = true // it will mutate object in array
}

showModal('start')
console.log(test)

另一种解决方案（不改变原始数组）：

const test = [
  {id: 'start',]

const showModal = (which) => test.map(e => e.id === which ? ({...e,value: true}) : {...e})

const res = showModal('start')

console.log('res',res)
console.log('test',test)

,

有几点需要注意。在 reduce 中，您应该在每次迭代中返回累加数组，而是返回您在循环内创建的变量（res 而不是 ress） - 它们的名称非常相似，因此是一个简单的错字。

您的三元条件不正确（导致响应不正确），可以简化。 value: s.id === which ? (s.value = true) : (s.value = false) 评估不正确 - 更容易做到 value: s.id === which

每次迭代我都使用 [...] 扩展运算符将累积数组与新对象连接起来。

const test = [{
    id: 'start',value: false
  },{
    id: 'reject',];

let ress;
const showModal = (which) => {
  return test.reduce((res,s) => {
    ress = {
      id: s.id,value: s.id === which
    };
    return [...res,ress]
  },[]);
}

console.log(showModal('start'));