JavaScript replaces the key of the object

In JavaScript programming, operating objects is a very common requirement. It is often necessary to change the names of certain keys in an object. While JavaScript provides many different ways to manipulate objects, replacing an object's key with a new key can be challenging.

In this article, we’ll explore a few different ways to replace an object’s keys with new keys in JavaScript. We will discuss the following aspects:

1. What is object key replacement
2. How to do object key replacement in JavaScript
3. Using ES6’s Object.assign() method Key replacement
4. Use ES6 object destructuring method to replace keys
5. Use Object.entries() and Object.fromEntries() methods to replace keys

What is object key replacement

Object key replacement is an operation that allows us to change the name of a specific key in a JavaScript object. This is useful when you need to get some value from an object. For example, when retrieving object data through an API, you may need to match the keys of the returned data object with the keys used in the local data store.

How to replace object keys in JavaScript

There are many different ways to replace object keys in JavaScript. The three most commonly used methods are described below.

1. You can change the key of an object by specifying the object property name. For example:

const obj = { oldName: "value" };
obj.newName = obj.oldName;
delete obj.oldName;

In the above code snippet, we implement object key replacement by creating a new key name, copying the value of the old key name, and then deleting the old key name.

2. Using Object.keys(), you can get the object's key list and use a forEach() loop to iterate through each key and use the delete operator to delete the old key and then use the new key to The old key value is copied to the new key. For example:

const obj = { oldName: "value" };
Object
  .keys(obj)
  .forEach(key => {
    if (key === "oldName") {
      obj.newName = obj[key];
      delete obj[key];
    }
  });

Use Object.keys() locally to get the keys from the object, then use an if statement to check if each key matches the name you want to change. If there is a match, the value is copied into the new key and the old key is deleted.

3. Use the Object.assign() method to copy the new key value and the old key value to the new object, and delete the old key. For example:

const obj = { oldName: "value" };
const newObj = {};
newObj.newName = obj.oldName;
delete newObj.oldName;

Using ES6’s Object.assign() method for key replacement

Using ES6’s Object.assign() method and its available parameters, we can competently handle JavaScript object keys Replacement tasks. Object.assign() is a method that copies the source object into the target object and returns the target object. Therefore, we can send the source object with the new key as parameters to implement the replacement.

const obj = { oldName: "value" };
const newObj = Object.assign({}, obj, {newName: obj.oldName});
delete newObj.oldName;

Here, we use Object.assign() to create a new object and use the old object and its properties as the source object. Then, using the new key name as a separate argument, express that name as matching the name of the old key you want to remove. Finally, key replacement is completed by deleting the old key.

Use ES6's object destructuring method to replace keys

Object destructuring in ES6 provides another way to replace JavaScript object keys. Object destructuring is a method of destructuring an object's properties into separate variables, which can have new names (alias variables). By using the new key as an alias, we can generate the desired key replacement operation by deleting the old key.

const obj = { oldName: "value" };
const {oldName:newName, ...newObj} = obj;

Here, we declare a new object and move all the properties of the operated object to the new object through destructuring assignment. We alias the old keys onto the new object by using "…" (spread operator). In this way, the destructuring syntax actually allows us to specify a new name for any target key (called an alias) for our target object.

Use Object.entries() and Object.fromEntries() methods for key replacement

Object.entries() and Object.fromEntries() are the latest technologies, introduced in ES2019 . These methods make it very simple to perform object key replacement.

const obj = { oldName: "value" };
const newObj = Object.fromEntries(
  Object.entries(obj)
    .map(([k, v]) => [k === "oldName" ? "newName" : k, v])
);

Here, we use the Object.entries() method to obtain the object’s key-value pair list. We transform this list using the map() method, replacing the old keys with new keys if they match, and then adding each new key-value pair to a new object. Convert the converted list of elements into a new key-value pair object using the Object.fromEntries() method.

Conclusion

Object key replacement is very common for working with JavaScript object data. We saw that JavaScript provides a number of different ways to achieve this via JavaScript object key replacement. It's easy to delete and rename keys in JavaScript objects using standard ES6 methods. For this we can use the Object.assign() method, object destructuring, Object.keys() and Object.entries() methods. These strategies all pursue maximum performance, ease of use, and readability.

The above is the detailed content of JavaScript replaces the key of the object. For more information, please follow other related articles on the PHP Chinese website!