以純方式修改JS對象

Question

我有一個轉換JS對象的函數。 它從現有屬性派生一個新屬性，然后刪除原始屬性。 本質上是這樣的：

 /** Derives "capName" property from "name" property, then deletes "name" */ function transform(person) { person["capName"] = person["name"].toUpperCase(); delete person["name"]; return person; } var myPerson = { name: "Joe", age: 20 }; var newPerson = transform(myPerson); console.log(myPerson, newPerson); 

該函數返回所需的newPerson對象，但也會修改原始的myPerson對象。 我寧願以純粹的方式執行此操作，而不會修改原始的myPerson對象。

注意 ：我確實需要與ES5兼容，但是我也希望看到ES6解決方案。

Answer 1

只需使用Object.assign創建具有新引用的新對象

 function transform(person) { var obj = Object.assign({}, person); obj["capName"] = obj["name"].toUpperCase(); delete obj["name"]; return obj; } var myPerson = { name: "Joe", age: 20 }; var newPerson = transform(myPerson); console.log('newPerson:', newPerson); console.log('myPerson:', myPerson); 

Answer 2

解構非常容易：

 const transform = ({ name, ...rest }) => ({ capName: name.toUpperCase(), ...rest });

我真的需要與ES5兼容

使用BabelJS ，它使您的生活更加輕松自在 。

Answer 3

為了實現ES5兼容性，可以使用JSON.parse(JSON.stringify(person)) 。 請注意，附加到person的方法在途中會丟失，因為它們無法正確進行JSON.stringify ed。

 /** Derives "capName" property from "name" property, then deletes "name" */ function transform(person) { var obj = JSON.parse(JSON.stringify(person)); obj["capName"] = obj["name"].toUpperCase(); delete obj["name"]; return obj; } var myPerson = { name: "Joe", age: 20 }; var newPerson = transform(myPerson); console.log(myPerson, newPerson); 

如果要保留方法，只需遍歷對象鍵即可：

 /** Derives "capName" property from "name" property, then deletes "name" */ function transform(person) { var obj = {}; for (var key in person) { obj[key] = person[key]; } obj["capName"] = obj["name"].toUpperCase(); delete obj["name"]; return obj; } var myPerson = { name: "Joe", age: 20 }; var newPerson = transform(myPerson); console.log(myPerson, newPerson); 

請注意，所提供的方法均未進行深度克隆。 為此，我建議您使用lodash的_.clone(obj, { deep: true });

Answer 4

您可以生成沒有不需要的屬性和新屬性的新對象。

 function transform(person) { return Object .keys(person) .reduce(function (r, k) { if (k === 'name') { r.capName = person.name.toUpperCase(); } else { r[k] = person[k]; } return r; }, {}); } var myPerson = { name: "Joe", age: 20 }, newPerson = transform(myPerson); console.log(myPerson); console.log(newPerson);