遍历对象数组并更改每个对象中的一个属性

I find myself presented with this pattern quite a bit. I have an array of objects that I get back from my api, and I need to manipulate just one of the properties in all of the objects.

我发现自己经常遇到这种情况。我有一个从api得到的对象数组，我只需要操作所有对象中的一个属性。

Is there a way using ES6/Babel or Typescript to get that pattern to be a little more declarative?

是否有一种方法可以使用ES6/Babel或Typescript来使模式更具有声明性?

Looking for some neat destructuring trick or something along those lines.

寻找一些巧妙的破坏技巧或者类似的东西。

const data = [{ foo: 1, bar: 2}, 
              { foo: 2, bar: 3},
              { foo: 3, bar: 4}];

const increment = a => a + 1;

// Here is my typical pattern
const result = data.map(o => {
    o.foo = increment(o.foo);
    return o;
})

console.log(result);

5 个解决方案

#1

Object spread (...), available in Babel using the Stage 3 preset, does the trick:

对象扩展(…)，在Babel中可以使用第3阶段的预置，它的作用是:

const data = [
  { foo: 1, bar: 2 }, 
  { foo: 2, bar: 3 },
  { foo: 3, bar: 4 },
];

const increment = a => a + 1;

const result = data.map(o => ({ ...o, foo: increment(o.foo) }));
console.log(result);

#2

For a in situ version, you could use a closure over the key of the object and take the object as parameter.

对于原位版本，可以在对象的键上使用闭包，并将对象作为参数。

const data = [{ foo: 1, bar: 2 }, { foo: 2, bar: 3 }, { foo: 3, bar: 4 }];
const increment = k => o => o[k]++;

data.forEach(increment('foo'));
console.log(data);

#3

This is a little more elegant I think - Object.assign is a good way to update an item in an object

这是一个更优雅的东西。assign是更新对象中的项的好方法

const data = [{
  foo: 1,
  bar: 2
}, {
  foo: 2,
  bar: 3
}, {
  foo: 3,
  bar: 4
}];

const increment = a => a + 1;

// Here is my typical pattern
const result = data.map(o => Object.assign(o, {foo: o.foo + 1}))

console.log(result);

#4

what about:

是什么:

data.map(d => (
  Object.assign({}, d, {foo: d.foo + 1})
));

#5

Isn't all this completely equivalent to just:

这一切不完全等同于:

const data = [{ foo: 1, bar: 2 }, { foo: 2, bar: 3 }, { foo: 3, bar: 4 }];

const result = data.slice();
result.forEach(e => e.foo++);
console.log(result);

#1