Copy assignment of JS array two or three summary

Source: Internet
Author: User
Tags shallow copy

Today when watching react-native performance optimization, see how to avoid shouldcomponentupdate abnormal data, a storm in the brain, thus implicated a series of problems, So there is this article about the JS array copy (deep copy) and assignment and so on why can produce abnormal data.

What's the problem, please?

Now get to the point:

First, the exception data is generated when we copy the assignment, there will be or not change to its own value.

First, push and concat

Push is defined as adding one or more elements to the end of the array and returning the new length. The method changes the length of the array.

CONCAT is defined as connecting two or more arrays and returning the result, which does not alter the existing array, but only returns a copy of the array.

var a = [+];  A.push ([3,4]);  A.concat (5);   //

Second, deep copy and shallow copy

1. Shallow copy

JavaScript storage objects are stored addresses, so shallow copy causes A and B to point to the same memory address

The assignment of an array is actually equivalent to the index, and changing one of the variables will change the other reference.

var a = [N/a  ]; var b = A;  b[0] = 4;   // A is 4 2 3   // B is 4 2 3  

Depending on the problem with the storage object above, another problem can be resolved here:

The original parameter (such as a specific number) is passed as a value to the function, and the value is passed to the function, and if the called function changes the value of the parameter, the change does not affect the global or call function.

You pass an object (in JS, the array is not a simple data type, but an object) to a function, and if the contents of this parameter are changed inside the function, the change is visible outside.

2. Deep copy

(1) Slice function

(2) Concat function

(3) Assgin

The principle of three functions is to return a copy of the array (equivalent to another memory space), so it does not change the value of the array itself

But here's a little different, that's the difference between Assgin and the other two points.

Although Assgin is also a deep copy, he is only a deep copy of the first layer, followed by a shallow copy after the second layer, examples are as follows:

var a = {      a1:{          Aa1:' One ',          aa2: ' $'      }  }  var b = Object.assgin ({},a);   var c = object.assgin ({},a);   =;   /*   b:{      a1:{          aa1: ' $ ',          AA2: ' $ '      }  c:{a1:{aa1          : ' ",          Aa2 : ' A '      }  }  * /

Copy assignment of JS array two or three summary

Contact Us

The content source of this page is from Internet, which doesn't represent Alibaba Cloud's opinion; products and services mentioned on that page don't have any relationship with Alibaba Cloud. If the content of the page makes you feel confusing, please write us an email, we will handle the problem within 5 days after receiving your email.

If you find any instances of plagiarism from the community, please send an email to: and provide relevant evidence. A staff member will contact you within 5 working days.

A Free Trial That Lets You Build Big!

Start building with 50+ products and up to 12 months usage for Elastic Compute Service

  • Sales Support

    1 on 1 presale consultation

  • After-Sales Support

    24/7 Technical Support 6 Free Tickets per Quarter Faster Response

  • Alibaba Cloud offers highly flexible support services tailored to meet your exact needs.