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?

Solution 1

Just use Array.prototype.slice.

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

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

Solution 2

What about the jQuery.merge ?

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

Solution 3

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 ...)

Solution 4

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?

Solution 5

ES6 Please use spread

let arrayCopy = [...myArray];

View more solutions

Comments

[Peter Ajtai]

This is synonymous with slice(0) ?

[Peter Ajtai]

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]

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

[Peter Ajtai]

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]

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

[neoswf]

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]

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]

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

[Ariel]

@ArmanBimatov Sorry, I don't remember what I did. I think I just used an object instead. See: forum.jquery.com/topic/…

[rych]

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

[podperson]

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.

[podperson]

Basically the same problem as using slice.

[podperson]

@Arman See the stringify option below. It's ugly but it works.

[Chris Leonard]

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

[janek37]

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

[John Gilmer]

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