以函数方式修改对象的属性

Question

在javascript编程中，函数式的方式是一个很大的好处。 我正在尝试以功能方式修改对象数组中包含的对象的属性，这意味着无法修改作为在map函数中传递的对象的项目。 如果我做这样的事情：

const modObjects = objects.map((item) => {

   item.foo = "foo" + 3;

   return item;
});

这不起作用，因为 item 在函数内部被修改。 你知道这个问题的任何其他方法吗？

Answer 1

一种真正不可变且本着函数式编程精神的新 (ES6) 方式：

 // A. Map function that sets obj[prop] to a fixed value const propSet = prop => value => obj => ({...obj, [prop]: value}) // B. Map function that modifies obj.foo2 only if it exists const foo2Modify = obj => obj.hasOwnProperty('foo2') ? {...obj, foo2: 'foo ' + obj.foo2} : obj // Usage examples of A and B const initialData = [{'foo': 'one'}, {'foo2': 'two'}, {'foo3': 'three'}] const newData1 = initialData.map(propSet('foo2')('bar')) // Set value const newData2 = initialData.map(foo2Modify) // Use a modify function console.log(initialData) // Initial data should not change console.log(newData1) // Each object should contain the new fixed foo2 console.log(newData2) // Modify foo2 only if it exists in initial data

Answer 2

您可以使用Object.assign创建项目 obj 的副本并从地图回调中返回该副本。

Object.assign()

Object.assign() 方法用于将所有可枚举属性的值从一个或多个源对象复制到目标对象。 它将返回目标对象。

这是一个例子

 let data = [ {"foo": "one"}, {"foo": "two"}, {"foo": "three"} ] let newData = data.map( item => { let itemCopy = Object.assign({}, item); itemCopy.foo = "foo " + item.foo; return itemCopy; }) console.log(data) console.log(newData)

Answer 3

你也可以这样做：

const modObjects = objects.map((item) => {

   return { ...objects, foo: "foo" + 3; };

});

原因是： objects.map((item) => { ...destSchema, foo: "foo" + 3; }); 不起作用的是他们通过这种方式使 JS 解释器理解它是一个范围还是一个对象。 你必须使用return

Answer 4

在现代 JavaScript 中，您可以在对象字面量内的对象上使用扩展运算符：

const modObjects = objects.map(
  item => ({...item, foo: item.foo + 3})
)

注意对象字面量周围的括号() 。 需要它们来消除 lambda 中的对象文字{}与代码块{}歧义。 另一种方法是使用带有return代码块：

const modObjects = objects.map(
  item => { return {...item, foo: item.foo + 3} }
)

Answer 5

我已经扩展了@Dimitrios Tsalkakis 的答案，以使用回调函数更改属性。

示例： https : //repl.it/@robie2011/ts-set-property-functional

打字稿：

function mapProperty<T>(prop: string){
    return (cb: (propValue: any) => any) => (obj: any) => ({...obj, [prop]: cb(obj[prop])}) as (T)
}