以纯方式修改JS对象

Question

I have a function that transforms a JS object. It derives a new property from an existing one, then deletes the original property. Essentially something like this:

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

The function returns the desired newPerson object, but also modifies the original myPerson object. I would rather do this in a pure way, that doesn't modify the original myPerson object.

Note : I really need to be ES5 compatible, but I'd like to see the ES6 solution as well.

Answer 1

just use Object.assign which will create a new object with new reference

 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

Quite easy with destructuring:

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

I really need to be ES5 compatible

Use BabelJS , it makes your life so much eaiser.

Answer 3

For ES5 compatibility, you can use JSON.parse(JSON.stringify(person)) . Be aware that methods attached to person are lost on the way because they cannot properly be 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); 

If you want to retain methods, just iterate over the object keys:

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

Be aware that none of the methods presented does a deep clone. For that, I'd recommend you use something like lodash's _.clone(obj, { deep: true });

Answer 4

You could generate a new object without the unwanted and a new property.

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