Difference between toArray and makeArray in jquery

Question

I am trying to convert a DOM element as collections of an object. But I do not know what is the main difference between toArray () and makeArray ()

HTML

<div id="firstdiv"> <div>foo1</div> <div>foo2</div> <div>foo3</div> </div> 

I used the following code to convert nodes to an array:

JQuery

 console.log($("#firstdiv > div").toArray()); console.log($.makeArray($("#firstdiv").html())); 

I can not understand the difference between the two, and I searched for this question, but could not find a clear explanation.

Thanks in advance.

Answer 1

According to jQuery documentation:

toArray is a method in a jQuery object (which is a wrapper around a set of DOM elements). This method extracts the elements of this set of DOM elements into a JavaScript array:

 jQuery('.some-class').toArray() -> [ dom_el_1, dom_el_2, dom_el_3, ... ] 

makeArray (which is the "static method" of the jQuery object) takes an object similar to an array (jQuery, arguments, nodeList, ...) and creates its own JavaScript array from it, so you can call the array methods on the result:

 // returns a nodeList (which is array like item) but not actual array // you can't call reverse on int var elems = document.getElementsByTagName("div"); var arr = jQuery.makeArray(elems); arr.reverse(); // use an Array method on list of dom elements $(arr).appendTo(document.body); 

As a result, toArray converts the jQuery element set to javascript Array , makeArray converts any array similar to an object to javascript Array .

Answer 2

The only difference:

toArray() DOM Element Methods , and you can only use it on dom elements. while makeArray(object) can be used for your custom objects.

There are no other differences, they are basically the same and return a simple array object.

Example

You have a custom object:

 function Person(name,age) { this.name = name; this.age = age; } var obj=new Person('abc',1); 

now use both functions:

 jQuery.makeArray(obj).length; //would return 1 

but

 obj.toArray().length; //through the error function not defined 

and

 obj.length; //return undefined 

Answer 3

As already mentioned, toArray() for jQuery objects.

$.makeArray() for brevity (except the last instance of the object) is similar to JS Array.prototype.slice.call() or [].slice.call()

but there is a difference when processing POJO with an excess value of length

Examples

: {

length: 5,

0

 $.makeArray({ 0:'a', 1:'b', length:1 }) // ["a"] [].slice.call({ 0:'a', 1:'b', length:1 }) // ["a"] 

one:

 $.makeArray({ 0:'a', 1:'b', length:4 }) // { 0:'a', 1:'b', length:4 } // WUT? [].slice.call({0:'a', 1:'b', length:4}) // ["a", "b", undefined, undefined] 

2:

 $.makeArray({12:'a', 13:'b', length:1}) // { 12:'a', 13:'b', length:1 } // WUT? [].slice.call({12:'a', 13:'b', length:1}) // [undefined] 

3:

 $.makeArray({12:'a', 13:'b', length:1}) // { 12:'a', 13:'b', length:1 } // WUT? [].slice.call({12:'a', 13:'b', length:1}) // [undefined] 

4:

 $.makeArray({ 0:'a', 2:'b', length:2 }) // { 0:'a', 2:'b', length:2 } // WUT? [].slice.call({ 0:'a', 2:'b', length:2 }) // ["a", undefined] 

}

So $.makeArray() just returns the input object whenever a key with a specific index is not found