Question

const items = [{
  id: 1,
  name: 'ball'
},{
  id: 2,
  name: 'axe'
}]

//says I want to update item 2
let input = 'laptop', id = 2

updated_item = items.map(o => o.id === id ? ({ ...o, name: input }) : o) });

console.log(updated_item) // worked

但只是好奇我也知道reduce是map，foreEach和filter的基础，我想尝试用reduce实现上面的逻辑

const updated_item_using_reduce = items.reduce((accum, o, i) => {
  if(o.id === id) {
    //what to do here? change value of name put o into accum? by using push?
  }
  //else have to assign o to accum, but can't use push I think
}, [])

Answer 1

与其他人的答案相似，更简洁：

items.reduce((accum, o, i) => {
  return [...accum, (o.id === id) ? {...o, name: input} : o];
}, []);

Answer 2

你可以使用push，但与大多数reduce函数一样，你必须确保返回累加器：

const items = [{
  id: 1,
  name: 'ball'
}, {
  id: 2,
  name: 'axe'
}]

//says I want to update item 2
const input = 'laptop';
const id = 2;

const updated_items = items.reduce((accum, item) => {
  accum.push(item.id !== id
    ? item
    : ({ ...item, name: input })
  );
  return accum;
}, []);

console.log(updated_items)

Answer 3

您可以尝试以下方法：

＆＃13;

const items = [{
  id: 1,
  name: 'ball'
},{
  id: 2,
  name: 'axe'
}]

let input = 'laptop', id = 2
const updated_item_using_reduce = items.reduce((accum, o, i) => {
  if(o.id === id) {
    o.name = input;
    accum[i] = o;
  }
  else{
    accum[i] = o;
  }
  return accum
  
}, []);

console.log(updated_item_using_reduce)

＆＃13;

Answer 4

Array.map()使用Array.reduce()的此实现演示了它的工作原理。正如您所看到的，仅减少责任就是推送（或连接）回调返回的项目：

const items = [{
  id: 1,
  name: 'ball'
},{
  id: 2,
  name: 'axe'
}]

//says I want to update item 2
let input = 'laptop', id = 2

const map = (arr, cb) => arr.reduce((r, o, i, a) => {
  r.push(cb(o, i, a));
  
  return r;
}, []);

const updated_item = map(items, (o) => o.id === id ? ({ ...o, name: input }) : o);

console.log(updated_item) // worked

使用reduce实现map

4 个答案: