In-depth javascript Array Replication

For javascript, arrays are reference types. If you want to copy an array, you have to worry about it, because the functions including concat and slice are all shallow-layer replication. That is to say, for a two-dimensional array, concat is used for copying. For javascript, the array is a reference type. If you want to copy an array, you have to think about it, because the functions including concat and slice are all shallow-layer replication. That is to say, for a two-dimensional array, using concat for copying, the second-dimensional array is still referenced. Modifying the new array also changes the old array.

Therefore, you want to write a function for deep replication to help you perform deep replication of the number of groups.

In general, "=" can be used to assign values. However, this symbol cannot be used for array, object, function, and other reference data.

1. Simple copying of Arrays

1.1 Simple Traversal

The simplest and most basic method is loop processing. Example:

JavaScript

Function array_copy (arr) {var out = [], I, len; if (out [I] instanceof Array = false) {return arr;} for (I = 0, len = arr. length; I <len; I ++) {if (out [I] instanceof Array) {out [I] = deepcopy (arr [I]);} else {out [I] = arr [I] ;}}; return a ;}// test var arr1 = [1, 2, 3, 4], arr2 = array_copy (arr1); console. log (arr1, arr2); arr2 [2] = 10; console. log (arr1 [2], arr2 [2]); function array_copy (arr) {var out = [], I, len; if (out [I] instanceof Array = false) {return arr;} for (I = 0, len = arr. length; I <len; I ++) {if (out [I] instanceof Array) {out [I] = deepcopy (arr [I]);} else {out [I] = arr [I] ;}}; return a ;}// test var arr1 = [1, 2, 3, 4], arr2 = array_copy (arr1); console. log (arr1, arr2); arr2 [2] = 10; console. log (arr1 [2], arr2 [2]

1.2 flexible replication implementation

The clever method that appears frequently in the interview questions is implemented using slice or contcat. Example:

JavaScript

var arr1 = [1, 2, 3, 4],arr2 = arr1.slice(0),arr3 = arr1.concat();console.log(arr1, arr2, arr3);arr2[2] = 10;arr3[2] = 11;console.log(arr1[2], arr2[2], arr3[2]);var arr1 = [1, 2, 3, 4],arr2 = arr1.slice(0),arr3 = arr1.concat();console.log(arr1, arr2, arr3);arr2[2] = 10;arr3[2] = 11;console.log(arr1[2], arr2[2], arr3[2]);

2. In-depth copying of Arrays

If you use a common one-dimensional array and its values are not of reference type, the above method is no problem, otherwise it will be more troublesome. For deep replication, the array values must be of various reference types.

2.1 use the JSON Method

JSON. stringify (array) and then JSON. parse (). Example:

JavaScript

var arr1 = [1, 2, [3, 4], {a: 5, b: 6}, 7],arr2 = JSON.parse(JSON.stringify(arr1));console.log(arr1, arr2);arr2[1] = 10;arr2[3].a = 20;console.log(arr1[1], arr2[1]);console.log(arr1[3], arr2[3]);var arr1 = [1, 2, [3, 4], {a: 5, b: 6}, 7],arr2 = JSON.parse(JSON.stringify(arr1));console.log(arr1, arr2);arr2[1] = 10;arr2[3].a = 20;console.log(arr1[1], arr2[1]);

Console. log (arr1 [3], arr2 [3]);

This method has compatibility issues with old browsers. If compatibility is required, you can introduce the following compatible files:

Https://github.com/douglascrockford/JSON-js/blob/master/json2.js

Note: If the array value is a function, the above method still does not work.

2.2 full implementation of deep Replication

Considering the nesting of multi-dimensional arrays and the fact that the array value is an object, you can perform the following prototype extension (of course, writing as a common function is also possible, and the prototype extension is not recommended ):

JavaScript

Object. prototype. clone = function () {var o = {}; for (var I in this) {o [I] = this [I] ;}return o ;}; Array. prototype. clone = function () {var arr = []; for (var I = 0; I <this. length; I ++) if (typeof this [I]! = 'Object') {arr. push (this [I]);} else {arr. push (this [I]. clone () ;}return arr ;}; // Test 1 Objectvar obj1 = {name: 'rattz ', age: 20, hello: function () {return "I'm" + name ;}}; var obj2 = obj1.clone (); obj2.age ++; console. log (obj1.age); // Test 2 Arrayvar fun = function (log) {console. log}, arr1 = [1, 2, [3, 4], {a: 5, B: 6}, fun], arr2 = arr1.clone (); console. log (arr1, arr2); arr2 [2] [1] = 'Mike '; arr2 [3]. a = 50; arr2 [4] = 10; console. log (arr1, arr2); Object. prototype. clone = function () {var o = {}; for (var I in this) {o [I] = this [I] ;}return o; Array. prototype. clone = function () {var arr = []; for (var I = 0; I <this. length; I ++) if (typeof this [I]! = 'Object') {arr. push (this [I]);} else {arr. push (this [I]. clone ();} return arr; // Test 1 Objectvar obj1 = {name: 'rattz ', age: 20, hello: function () {return "I'm" + name;} var obj2 = obj1.clone (); console. log (obj1.age); // Test 2 Arrayvar fun = function (log) {console. log}, arr1 = [1, 2, [3, 4], {a: 5, B: 6}, fun], arr2 = arr1.clone (); console. log (arr1, arr2); arr2 [2] [1] = 'Mike '; arr2 [3]. a = 50; arr2 [4] = 10; console. log (arr1, arr2 );

2.3 use the extend method of jQuery

If you are using jQuery, the simplest method is to use the extend plug-in method. Example:

JavaScript

var arr1 = [1, 2, [3, 4], {a: 5, b: 6}, 7],arr2 = $.extend(true, [], arr1);console.log(arr1, arr2);arr2[1] = 10;console.log(arr1, arr2);var arr1 = [1, 2, [3, 4], {a: 5, b: 6}, 7],arr2 = $.extend(true, [], arr1);console.log(arr1, arr2);arr2[1] = 10;console.log(arr1, arr2);