This is my second article on getting startedCopy the code

preface

Just read an article on how to implement deep copy, slide down below to see the comments, as follows:

This reminds me that I also ask questions about deep copying in interviews, so let’s take a look at the intentions of the test makers.

scenario

In the actual development process, there was a bug due to the shallow copy problem. The functional requirements were like this: add a drag-and-drop circle to the map for peripheral query and other functions. The results are as follows:

The main problem associated with this article is to calculate the coordinates of the drag button, and the drag circle mouse event function is not covered here.Copy the code

Development and design ideas

1. Select a point on the map (center point)

Build a 500m buffer at this point (default: 500m)

3. Calculate the coordinates of drag button (X-axis plus 500 meters)

4. Keep the center point unchanged when dragging, calculate the distance between the mouse position coordinate and the center point

The key code

The unit of coordinate 4326 is degrees, and the unit of coordinate 3857 is meters. The coordinates we usually use are latitude and longitude, but this involves adding 500 meters and the distance calculation needs to be in meters, so coordinate transformation is involved

addDefaultCircle(x, y, param) {
    // Why is it defined twice
    const center = new hmap.geom.Point(new hmap.basetype.Coordinate(x, y, 0));
    / / center
    const point = new hmap.geom.Point(new hmap.basetype.Coordinate(x, y, 0));
    // The center point transforms the coordinate system and builds a 500 meter buffer
    const circleGeo = point
      .transform(this.map.getCrs(), 3857)
      .getBuffer(param.distance);
    // Convert the buffer plane to coordinate 4326
    const circleGeoTransform = circleVector.transform(3857.this.map.getCrs());
    const polygonVector = new hmap.feature.Vector(circleGeoTransform, null);
    let wktFeature = polygonVector;
    this.dragCircleLayer.addFeatures([polygonVector]);
    // Drag the button coordinate system to meters
    const pointBtn = point.transform(this.map.getCrs(), 3857);
    // Add 500 in the x-direction
    pointBtn._coordinate._x = pointBtn._coordinate._x + 500;
    // Convert the coordinate system from meters to latitude and longitude
    const pointBtn1 = pointBtn.transform(3857.this.map.getCrs());
    // In this case, the third data center is the original data, and the point is the data after adding 500
    this.addDragBtn(pointBtn1, param.pic, center, param.drawCallBack);
    // The center of the bug will be the point of the drag button
    // this.addDragBtn(pointBtn1, param.pic, point, param.drawCallBack);
}
Copy the code

Analyze the reasons with knowledge points

The above code is GIS related and may be a little difficult to understand, but a little exposure will help you understand the following code, which more succinct compares the problems caused by shallow copies of objects

const a=1
const b=a+1
console.log(a) //a=1
console.log(b) // b=2

const point=new Point() // The point object represents the central point coordinates of the above code
const pointBtn = point
pointBtn._coordinate._x + = 500; // Drag the button point coordinates
_coordinate._x is the same as pointbtn._coordinate._x
console.log(point)  
console.log(pointBtn) 
Copy the code

Through comparison, it can be found that the coordinates of the central point point have changed, but a will not change. So when an object or array has many levels, a shallow copy creates a new object that has an exact copy of the property values of the original object. If the attribute is of a primitive type such as a, the value of the primitive type is copied. If the attribute is of a reference type such as point, the memory address is copied. So if one of the objects pointBtn changes the address, the other object point is affected.

A deep copy is a complete copy of an object from the memory. A new area is created in the heap memory to store the new object, and the modification of the new object does not affect the original object.

So here we expect point to be a deep copy

conclusion

These are some of the problems I encountered with deep and shallow copies during development. Its practical application scenario is not only interview, mastering it can help us to solve practical problems quickly.

On how to achieve deep copy this kind of article has been very much, can search, as long as you understand the concept and scenario and substitute understanding, I believe that master and implementation will be more profound.