Js array and object assignment (the root cause is to solve the problem of changing the original array object by modifying the new object array)---shallow copy and deep copy

assignment and addressing

Unlike the basic type, which assigns a value directly to another variable, the assignment of a complex type is to assign a pointer directly to another object, which should be called an address. Changing the value of the new object will also change the value of the original object, because they all It points to the same object data in the heap memory. In the stack memory, adding a new object just adds a pointer. The JS engine can only work in the stack memory. From the perspective of the JS engine, it corresponds to a heap memory address .

shallow copy

1) Definition:
Shallow copy will only copy the attributes of the object in turn. If the value of the attribute is an object, the address will still be copied at this time, and no deep recursive copy will be made. Although the basic type attributes of the new object are modified at this time , will not change the original object, but changing complex type properties will still change the properties of the original object.
insert image description here
It can be understood as follows: obj: {age: 19} is a complex data type, so the age of b has also been changed to 20

2) Shallow copy method:

newObj = Object.assign({
    
    }, oldObj);

Implements a shallow copy of an object. Note that newObj = Object.assign(target, oldObj) At this time newObj === target, target is an object, Object.assign assigns one or more source objects to the target object, this is the method of ES6.

newArray = oldArray.slice(0); 

Implements a shallow copy of an array. Note that end in newArray = oldArray.slice(start,end) can be omitted, and the part is extracted from the original array to the new array.

newArray = [].concat(oldArray); 

Implements a shallow copy of an array. Note that concat is concatenating arrays.

deep copy

1) Definition:
The attributes of the object will be recursively copied, and the object attributes of the object will also be recursively copied until all attributes are copied.
2) Method:

newObj = JSON.parse(JSON.stringify(oldObj)); 

Implements a deep copy of an object. Serialize the object that needs to be deep copied into a JSON string, and then parse out a new object with exactly the same structure and value according to this string, which can indirectly realize deep copy.

newObj = $.extend(true, [], oldObj); 

Implements deep copying of arrays and objects. true means deep copy, when omitted, it defaults to false, and the second parameter changes according to whether it is an array or an object. Because this method is a jQuery method, you can consider writing a deep copy function yourself.

deep copy function

//深拷贝函数
function extend(source) {
    
    
  var target = Array.isArray(source) ? [] : {
    
    };
  for (var key in source) {
    
    
      var isObject = Object.prototype.toString.call(source[key]==="[object Object]";
      if (isObject || Array.isArray(source[key])) {
    
    
          //如果是对象或数组,继续调用 extend 函数
          target[key] = extend(source[key]);
      } else {
    
    
          //递归到基本值或除了对象或数组之外的引用值,直接赋值
          target[key] = source[key];
      }
  }
  return target;
}

Guess you like

Origin blog.csdn.net/TKP666/article/details/128827749