To copy JavaScript objects, you need to select the method according to your needs. 1. Use Object.assign() for shallow copying, only top-level attributes are copied, nested references are still shared; 2. Extended operators achieve the same effect, and the writing is more concise; 3. Deep copying requires JSON serialization (ignoring special content such as functions), third-party libraries such as lodash's cloneDeep() (processing complex structures) or custom recursive functions (be aware of circular reference issues). Shallow copies are suitable for simple structures, and deep copies are used for nested or completely isolated scenes.

Copying or cloning an object in JavaScript is a common requirement in development. Using the assignment operator directly ( = ) does not really create a new object, but allows two variables to point to the same memory address, so modifying one of them will affect the other. To achieve true replication, you need to choose the appropriate method according to the specific needs.

1. Use Object.assign() for shallow copying

If you only need to copy the first layer of the object, you can use Object.assign() method:

 const original = { name: 'Alice', age: 25 };
const copy = Object.assign({}, original);

This method is suitable for scenarios where no nested structure copy is required. But be aware that if the object contains reference types (such as arrays, objects), these nested values will still be shared.

For example:

 const original = { user: { name: 'Bob' } };
const copy = Object.assign({}, original);
copy.user.name = 'Tom';
console.log(original.user.name); // Output Tom, because user is a reference type

2. Use Spread Operator

Similar to Object.assign() , the extension operator provides a more concise way of writing:

 const original = { id: 1, info: { role: 'admin' } };
const copy = { ...original };

It is also a shallow copy and does not work for nested objects. Suitable for cases where only top-level attributes are copied.

3. Several ways to achieve deep copy

When you need to completely copy the entire object, including the nested structure inside, you need to use "deep copy".

- Deserialization with JSON

Here is a simple but limited way:

 const copy = JSON.parse(JSON.stringify(original));

This method ignores special content such as functions, undefined , circular references, etc., so it is not applicable in some complex scenarios, but it is sufficient for pure data objects.

- Using third-party libraries

For more complex object structures, it is recommended to use cloneDeep() method like lodash :

 const _ = require('lodash');
const deepCopy = _.cloneDeep(original);

This method is more stable and can handle most edge cases.

- Custom recursive functions (advanced)

If you want to implement a deep copy function yourself, you can copy each property layer by layer by layer by recursion:

 function deepClone(obj) {
  if (typeof obj !== 'object' || obj === null) return obj;
  const copy = Array.isArray(obj) ? [] : {};
  for (let key in obj) {
    if (obj.hasOwnProperty(key)) {
      copy[key] = deepClone(obj[key]);
    }
  }
  return copy;
}

Note: This version does not deal with the problem of circular references, and it is recommended to use mature solutions in actual projects.

Basically that's it

There are many ways to copy objects in JavaScript. Which one you choose depends on whether you need deep copy, the complexity of your code, and the performance requirements. Shallow copies are suitable for simple object structures, while deep copies are more suitable for nested objects or scenarios where the original objects are completely isolated.

The above is the detailed content of How to clone or copy an object in JavaScript?. For more information, please follow other related articles on the PHP Chinese website!