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

Question

我发现自己经常遇到这种模式。我有一组从 api 返回的对象，我只需要操作所有对象中的一个属性。

有没有办法使用 ES6/Babel 或 Typescript 使该模式更具声明性？

寻找一些巧妙的解构技巧或类似的东西。

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);

Answer 1

怎么样：

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

Answer 2

我认为这有点优雅 - 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: increment(o.foo)}))

console.log(result);

Answer 3

Object spread (...)，在 Babel 中使用 Stage 3 preset 可用，可以达到目的：

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);

Answer 4

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

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);

Answer 5

这一切不完全等同于：

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);

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

Iterate over array of objects and change one property in each object

javascript

ecmascript-6

spread-syntax

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

Iterate over array of objects and change one property in each object

javascript

ecmascript-6

spread-syntax

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