JavaScript shallow copy implementation

In JavaScript development, we often need to handle copy operations of objects or arrays. In actual development, we often encounter the need for shallow copy, that is, copying the contents of one object or array to another object or array. The copied new object or array shares part of the data with the original object or array. This article will introduce how to implement shallow copy in JavaScript.

1. What is shallow copy?

In JavaScript, objects and arrays are both reference types. When we assign an object or array to a new variable, we actually assign the reference of the original object or array to the new variable.

For example, the following code assigns an object to a new variable:

let obj1 = { name: '张三', age: 18 };
let obj2 = obj1;

In this example, obj2 and obj1 are not two Different objects, but two references pointing to the same memory address.

In actual development, we may need to copy the contents of an object or array to another object or array, in which case a shallow copy is required.

Shallow copy refers to copying only the first-level data structure of an object or array. If the object or array also contains objects or arrays, the copied new object or array will share these reference types with the original object or array. The data structure is as shown in the figure below:

As shown in the figure, object A contains two attributes a and b. The value of attribute b is an object B. Object B It also contains two attributes c and d. When a shallow copy is made of object A, a new object C is generated. Object C shares attributes a and b with object A. That is, the shallow copy only copies the first-level structure of object A, while object B is only referenced once. Object C and object A share object B, that is, the addresses of the two objects are the same.

2. Shallow copy implementation methods

The following will introduce several common shallow copy implementation methods in JavaScript.

1. Manual traversal

Manually traverse the object or array, copying each attribute or element to a new object or array. This method is simple and easy to understand, and the code is highly readable. However, for objects or arrays with many nested levels, the amount of code will be very large.

function shallowCopy(obj) {
  if (Array.isArray(obj)) {
    return obj.slice();
  } else if (typeof obj === 'object' && obj !== null) {
    let newObj = {};
    for (let key in obj) {
      if (obj.hasOwnProperty(key)) {
        newObj[key] = obj[key];
      }
    }
    return newObj;
  } else {
    return obj;
  }
}

In this example, we first determine whether the object to be copied is an array or an object. If it is an array, we use the slice() method to make a shallow copy; if it is an object, we loop through the properties of the object and copy each property to a new object, and finally return the new object.

2. Object.assign()

Object.assign() method is used to copy the properties of one or more objects to the target object , if multiple objects have the same property, the properties in subsequent objects will overwrite the properties in the previous object. Object.assign() The method will only copy the first-level data structure of the object. If the object contains reference type attributes, the new object and the original object will share these reference type attributes.

let obj1 = { name: '张三', age: 18, hobbies: ['coding', 'reading'] };
let obj2 = Object.assign({}, obj1);

In this example, we use the Object.assign() method to copy object obj1 to a new empty object and generate a new object obj2.

Note that when using the Object.assign() method, the first parameter must be the target object, and the following parameters are the source object. If the source object has the same properties, the subsequent object Properties in will overwrite properties in the previous object. If there are properties in the source object that are reference types, the copied new object will share these properties with the original object.

3. Spread operator

The spread operator (spread operator) is a new syntax in ES6, which can be used to expand arrays or objects and copy their contents to in another array or object. The spread operator can only be used on the first-level data structure of an object or array. If the object or array contains properties of reference types, the new object or array will share these properties with the original object or array.

let arr1 = [1, 2, 3];
let arr2 = [...arr1];

let obj1 = { name: '张三', age: 18, hobbies: ['coding', 'reading'] };
let obj2 = { ...obj1 };

In this example, we use the spread operator to copy the contents of the array arr1 and object obj1 to a new array and object, generating a new array arr2 and object obj2.

The spread operator is convenient and concise to use, and the code is highly readable. However, for objects or arrays with many nested levels, the amount of code is still relatively large.

4. Array.from()

Array.from() method is used to convert an array-like object or iterable object into a new The array can be used for shallow copy of the array.

let arr1 = [1, 2, 3];
let arr2 = Array.from(arr1);

In this example, we use the Array.from() method to convert the array arr1 into a new array arr2, implementing a shallow copy.

It should be noted that the Array.from() method can only be used for shallow copies of array-like objects or iterable objects. If you need to make a shallow copy of an object, you need to use other methods. method.

3. Summary

This article introduces the implementation of shallow copy in JavaScript, including manual traversal, Object.assign() method, spread operator and Array.from() method. In actual development, we can choose the most suitable method to perform shallow copy operations according to actual needs. It should be noted that shallow copy only copies the first-level data structure of an object or array. If the object or array contains reference type attributes, the new object or array copied by shallow copy will share these attributes with the original object or array. . If you need to implement a deep copy, you need to use other methods to operate.

The above is the detailed content of JavaScript shallow copy implementation. For more information, please follow other related articles on the PHP Chinese website!