Is there a method to clone an array in jQuery?

Question

This is my code :

var a=[1,2,3]
b=$.clone(a)
alert(b)

Doesn't jQuery have a 'clone' method? How can I clone an array using jQuery?

For Multidimensional Array cloning see - stackoverflow.com/questions/2294703/… — vsync
– vsync, Commented May 21, 2011 at 9:57
Yes. jQuery has a clone method, and also extend with the deep parameter set to true. See api.jquery.com/clone and api.jquery.com/jquery.extend The quick and dirty option for small amounts of data is to use JSON.parse(JSON.stringify(original)). For large amounts of data, maybe you shouldn't be cloning?! — podperson
– podperson, Commented Apr 23, 2014 at 18:11

dwitvliet · Accepted Answer · 2018-09-21 16:58:23Z

166

Just use Array.prototype.slice.

a = [1];
b = a.slice();

JSFiddle - http://jsfiddle.net/neoswf/ebuk5/

edited Sep 21, 2018 at 16:58

dwitvliet

7,7317 gold badges40 silver badges66 bronze badges

answered Sep 23, 2010 at 4:39

meder omuraliev

187k76 gold badges401 silver badges443 bronze badges

Sign up to request clarification or add additional context in comments.

7 Comments

Peter Ajtai Over a year ago

This is synonymous with slice(0) ?

Peter Ajtai Over a year ago

Thanks meder. ....... The only thing to watch out for, is that Arrays are objects, so you can attach properties and methods... like var a=[1,2,3]; a.foo = function() { alert(this); }; With slice() any attached properties and methods aren't copied, so you couldn't do b.foo()... I only bring it up, since jQuery's .clone() does include a deep copy option. For example: jsfiddle.net/B2LQL .......... But this is pretty much a corner case in the context of this question.

neoswf Over a year ago

I guess my testing code was totally wrong. I uploaded a fiddle and it's working allright jsfiddle.net/neoswf/ebuk5. It's definitions also pointing out that it returns a copy, and not a reference. developer.mozilla.org/en/JavaScript/Reference/Global_Objects/…. I editted the your answer and added the fiddle to there.

Ariel Over a year ago

Just watch out: This does a shallow copy. Not a deep copy. So any objects in the array are not copied, they are simply referenced.

Arman Bimatov Over a year ago

@Ariel, so how do you do a deep copy?

|

Viral · Accepted Answer · 2015-10-20 14:41:15Z

11

What about the jQuery.merge ?

copy = $.merge([], a);

edited Oct 20, 2015 at 14:41

Viral

3,7531 gold badge20 silver badges34 bronze badges

answered Nov 27, 2012 at 19:42

astgtciv

7706 silver badges16 bronze badges

2 Comments

rych Over a year ago

This also does a shallow copy, and therefore is equivalent to the accepted answer.

janek37 Over a year ago

@rych This is not equivalent, as it also works on array-like objects that don't have a .slice method (eg. NamedNodeMap).

Community · Accepted Answer · 2017-05-23 10:31:02Z

7

Change

b=$.clone(a) to b=$(this).clone(a) but it some time dont work

but is reported

http://www.fusioncube.net/index.php/jquery-clone-bug-in-internet-explorer

Solution you use simple inbuilt clone function of javascript

var a=[1,2,3];
b=clone(a);
alert(b);

function clone(obj){
    if(obj == null || typeof(obj) != 'object')
        return obj;
    var temp = obj.constructor();
    for(var key in obj)
        temp[key] = clone(obj[key]);
    return temp;
}

-ConroyP

A great alternative is

 // Shallow copy
  var b = jQuery.extend({}, a);

  // Deep copy
  var b = jQuery.extend(true, {}, a);

-John Resig

Check similar post

What is the most efficient way to deep clone an object in JavaScript?

edited May 23, 2017 at 10:31

CommunityBot

11 silver badge

answered Sep 23, 2010 at 4:58

Pramendra Gupta

14.9k4 gold badges35 silver badges35 bronze badges

3 Comments

neoswf Over a year ago

Japan- Extend is meant for Objects. Ur first func was also meant for Object.

Chris Leonard Over a year ago

Extend works great for an array too, just change empty object {} into an empty array [].

John Gilmer Over a year ago

When I used extend() and passed in {}, it didn't work right. It might work if I pass in [] instead.

Chtioui Malek · Accepted Answer · 2014-04-23 13:43:00Z

7

This is how i've done it :

var newArray = JSON.parse(JSON.stringify(orgArray));

this will create a new deep copy not related to the first one (not a shallow copy).

also this obviously will not clone events and functions, but the good thing you can do it in one line and it can be used for any king of object (arrays, strings, numbers, objects ...)

edited Apr 23, 2014 at 13:43

answered Apr 23, 2014 at 13:33

Chtioui Malek

11.5k1 gold badge76 silver badges70 bronze badges

1 Comment

podperson Over a year ago

This is obviously not the right option for a big, complex structure, but it's a pretty nice one-liner, and actually the approach I ended up taking.

zloctb · Accepted Answer · 2017-12-18 08:42:22Z

2

ES6 Please use spread

let arrayCopy = [...myArray];

answered Dec 18, 2017 at 8:42

zloctb

11.3k10 gold badges78 silver badges92 bronze badges

Comments

Mike Ratcliffe · Accepted Answer · 2010-09-23 07:21:23Z

1

Another option is to use Array.concat:

var a=[1,2,3]
var b=[].concat(a);

answered Sep 23, 2010 at 7:21

Mike Ratcliffe

291 bronze badge

1 Comment

podperson Over a year ago

Basically the same problem as using slice.

Arturs · Accepted Answer · 2013-08-28 06:22:28Z

1

try

if (!Array.prototype.clone) {
    Array.prototype.clone = function () {
        var arr1 = new Array();
        for (var property in this) {
            arr1[property] = typeof (this[property]) == 'object' ? this[property].clone() : this[property]
        }
        return arr1;
    }
}

use as

var a = [1, 2, 3]
b = a;
a.push(4)
alert(b); // alerts [1,2,3,4]
//---------------///
var a = [1, 2, 3]
b = a.clone();
a.push(4)
alert(b); // alerts [1,2,3]

edited Aug 28, 2013 at 6:22

Arturs

1,2545 gold badges21 silver badges28 bronze badges

answered Sep 23, 2010 at 4:41

Reigel Gallarde

65.4k21 gold badges126 silver badges142 bronze badges

2 Comments

Peter Ajtai Over a year ago

This is just in case you've attached other properties to the array in addition to the values in the array? (as opposed to just using slice(0))?

Reigel Gallarde Over a year ago

@Peter - slice(0) is good. I'm just showing another way of solving it. ;)

Pradeep Kumar · Accepted Answer · 2016-02-11 05:46:45Z

0

var a=[1,2,3]
b=JSON.parse(JSON.stringify(a));
document.getElementById("demo").innerHTML = b;

<p id="demo"></p>

answered Feb 11, 2016 at 5:46

Pradeep Kumar

318 bronze badges

Collectives™ on Stack Overflow

Is there a method to clone an array in jQuery?

8 Answers 8

7 Comments

2 Comments

3 Comments

1 Comment

Comments

1 Comment

2 Comments

Comments

Your Answer

Linked

Hot Network Questions

Collectives™ on Stack Overflow

8 Answers 8

7 Comments

2 Comments

3 Comments

1 Comment

Comments

1 Comment

2 Comments

Comments

Your Answer

Sign up or log in

Post as a guest

Linked

Related