Convert multiple types to JS native array using Jquery.makearray ()

Source: Internet
Author: User
Tags javascript array

Jquery.makearray (obj) This function is easy to guess by name: it should be used to convert an incoming object into a native array

Take a look at the official website's explanation:Convert an Array-like object into a true JavaScript array. (Convert an array-like object to a JS-native array)

So what kind of object can be called "Array-like object"? This question is not urgent to answer, believe that after reading the article you will understand, first look at the following experiment

Convert htmlcollection to native array

<!doctype html>

Here you can see that a htmlcollection is returned by document.getElementsByTagName ("div") in chrome.

Rather than the official online NodeList, deliberately to find the difference between NodeList and htmlcollection:htmlcollection objects and NodeList objects are very similar, However, the former may be indexed using both a name and a numeric index, which can only be accessed with a numeric index (of course nodelist is also "Array-like object")

The experiment found that elems can be indexed by name and array, concluding that the document.getElementsByTagName ("div") returned in Chrome is a htmlcollection

Htmlcollection can get its length through elems.length and can access its elements in such a way elems[0]

Like how does an array of access look like? In fact, it is a "Array-like object", but it is not a native array of JS, so you cannot access the native method of the array, such as (. Pop () and . Reverse () )

And then the Jquery.makearray (elems) conversion to get the native JS array arr, then you can use the native method of the array!


Converts an array of jquery packages into a native array

Besides Htmlcollection, what else can you convert? Have you ever heard of an array of jquery packages such a thing?

But definitely approached, for example, by getting a set of div through $ (' div '), this set of Div is an array of jquery packages

Another example is that the . Map () function is also an array of jquery packages, can be length to get lengths, and is accessed through subscript indexes, and jquery-wrapped arrays can also use the methods provided by jquery.

Can be converted to a native array by $.makearray (obj), such as the most common in the. Map () function after the jquery array is converted into a native array and then the result is obtained through join ()

Of course, there is more than one way to convert the array of jquery packages into native arrays, as well as the usual. get () and. ToArray ()


Convert a JSON object to a native array
This is a little bit more complicated because the JSON object is not "Array-like object", so we need a conversion

Remember some of the "Array-like object" we said before? They can all be obtained by. length and can be accessed by subscript index, for example: Fakearr.length, fakearr[0]

So can we turn it into a "Array-like object" by letting JSON support this way?

Design First:

To make JSON support fakearr.length, simply define a key-value pair with a key length OK.

and support subscript access seems to be able to solve the other key value pairs are used as a key to the good ~

Then try it:

var Fakearray = {0: "Zhang San", 1: "John Doe", 2: "Zhu Six", Length:3};var Realarray = $.makearray (Fakearray); Console.log (Fakearray) Console . log (Realarray) realarray.reverse (); Console.log (Realarray);

Did you see it? It worked! The Realarray here is already a native array of JS, so you can use the native method such as reverse ()

It should be noted that length is important in the conversion process, which determines the length of the converted array.

If the length of the above example is specified as 2, then the converted array has only the first 2 elements, i.e. ["Zhang San", "John Doe"]

If the length of the above example is specified as 4, then the converted array will not be the array we want, but is similar to the new Array (). push (Fakearray) such an array

Convert multiple types to JS native array using Jquery.makearray ()

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.