Deep copy parsing _javascript techniques for JavaScript arrays

Source: Internet
Author: User
Tags arrays extend

For JavaScript, arrays are reference types, and if you want to copy an array, think about it, because functions, including concat and slice, are shallow copies. That is, for a two-dimensional array, using concat to replicate, a second-dimensional array or reference, modifying the new array also causes the old array to change.

So, you want to write a deep copy of the function to help you do a deep copy of the group number.

In general, you can implement an assignment by using "=". But for data of these reference types, such as arrays, objects, functions, and so on, this symbol is not good.

1. Simple copy of array

1.1 Simple traversal

The simplest and most basic way, naturally, is to recycle. 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));
SE {
out[i] = Arr[i];
}
;
return A;
}
Test
var arr1 = [1, 2, 3, 4],
arr2 = Array_copy (arr1);
Console.log (arr1, arr2);
ARR2[2] = ten;
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] = ten;
Console.log (Arr1[2], arr2[2]);

1.2 Flexible replication implementations

The tricky way to often appear in interview questions is to use the slice or Contcat method. Example:

Javascript

var arr1 = [1, 2, 3, 4],
arr2 = Arr1.slice (0),
arr3 = Arr1.concat ();
Console.log (arr1, ARR2, ARR3);
ARR2[2] = ten;
ARR3[2] = one;
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] = ten;
ARR3[2] = one;
Console.log (Arr1[2], arr2[2], arr3[2]);

2. Depth copy of array

Normal one-dimensional array and the value is not a reference type, using the above method is no problem, otherwise it will be more troublesome. Deep replication needs to consider the case where array values are of various reference types.

2.1 Using 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] = ten;
ARR2[3].A =;
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] = ten;
ARR2[3].A =;
Console.log (Arr1[1], arr2[1]);
Console.log (Arr1[3], arr2[3]);

This approach has compatibility issues with old browsers. If you do need to be compatible, you can introduce the following compatible file to resolve:

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

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

2.2 Full implementation of depth replication

Considering the nesting of multidimensional arrays, as well as the case that the array values are objects, the following prototype extensions can be made (of course written as a common function implementation is also possible, the prototype extension is not recommended):

Javascript

Object.prototype.clone = function () {var o = {}; for (var i,) {o[i] = this[i];} return o;}; Array.prototype.clone = function () {var arr = []; for (var i = 0; i < this.length; i++) if (typeof This[i]!== ' objec
T ') {Arr.push (this[i]);} else {Arr.push (This[i].clone ());} return arr;
};
Test 1 Object var obj1 = {name: ' Rattz ', age:20, Hello:function () {return "I ' m" + Name;}};
var obj2 = Obj1.clone ();
obj2.age++;
Console.log (Obj1.age);
Test 2 Array var 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,) {o[i] = this[i];} return o; Array.prototype.clone = function () {var arr = []; for (var i = 0; i < this.length; i++) if (typeof This[i]!== ' objec
T ') {Arr.push (this[i]);} else {Arr.push (This[i].clone ());} return arr; Test 1 Object var obj1 = {
Name: ' Rattz ', age:20, Hello:function () {return "I ' m" + name;}
var obj2 = Obj1.clone ();
Console.log (Obj1.age);
Test 2 Array var 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 The Extend method using JQuery

If you are using JQuery, the easiest way 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] = ten;
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] = ten;
Console.log (arr1, ARR2);

The above is a small set of JavaScript to introduce the depth of the analysis of the array, I hope to help you, if you have any questions please give me a message, small series will promptly reply to everyone. Here also thank you very much for the cloud Habitat Community website support!

Related Article

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: info-contact@alibabacloud.com 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.