Home > Article > Web Front-end > Example analysis of how makeArray() in jQuery converts multiple types into JS native Array
Example analysis of how makeArray() in jQuery converts multiple types into JS native Array
- 黄舟Original
- 2017-07-19 09:24:531355browse
jQuery.makeArray(obj) It’s easy to guess its purpose from the name: it should be used to convert the incoming object into a native array
Let’s take a look at the official website for more information. Explanation: Convert an array-like object into a true JavaScript array.(Convert an array-like object into a JS native array)
So what kind of object can be called " What about "array-like object"? Don’t rush to answer this question. I believe you will understand after reading the article. Let’s take a look at the following experiment first
Convert HTMLCollection into native Array
<!doctype html>
<html lang="en">
<head>
<meta charset="utf-8">
<title>jQuery.makeArray demo</title>
<style>
p {
color: red;
}
</style>
<script src="//code.jquery.com/jquery-1.10.2.js"></script>
</head>
<body>
<p> First </p> <p> Second </p> <p> Third </p> <p> Fourth </p>
<script>
// Returns a NodeList
var elems = document.getElementsByTagName("p");
// Convert the NodeList to an Array
var arr = jQuery.makeArray(elems);
// Use an Array method on list of dom elements
arr.reverse();
$(arr).appendTo(document.body);
</script>
</body>
</html>Here you can see how to use document in chrome .getElementsByTagName("p") returns an HTMLCollection
instead of the NodeList mentioned on the official website. I specifically looked for the difference between NodeList and HTMLCollection: HTMLCollection object and NodeList objectVery similar, but the former may be accessed using both name and numeric indexes, while the latter can only be accessed using numeric indexes (of course NodeList is also an "array-like object")
Found through experiments elems can be indexed by name and array. Conclusion: What is returned by document.getElementsByTagName("p") in chrome is an HTMLCollection
HTMLCollection can get its length through elems.length, and its length can be obtained through elems[ 0] Does this way of accessing the elements
look like the access method of an array? In fact, it is just an "Array-like object", but it is not a native array of js, so the native methods of array cannot be accessed, such as (.pop() and .reverse())
The native JS array arr is obtained through jQuery.makeArray(elems) conversion, and then you can use the native method of array!
Convert jQuery-wrapped array into native Array
In addition to HTMLCollection, what else can be converted? Have you ever heard of jQuery wrapped arrays?
But I must have come across it. For example, you can get a group of p through $('p'). This group of p is an array wrapped in jQuery.
Another example, through .map( )The function also gets an array wrapped by jQuery. You can also get the length by length and access it through the subscript index. And the array wrapped by jQuery can also use the methods provided by jQuery.
Can be converted into a native Array through $.makeArray(obj). For example, the most common method is to obtain the jQuery array in the .map() function and then convert it into a native array and then obtain the result through join()
Of course, there is more than one way to convert an array wrapped by jQuery into a native array. Common ones include .get() and .toArray()
Convert json objects into native Array
This situation is a little more complicated, because the json object is not an "array-like object", so we need a conversion
Remember the several "array-like objects" we talked about before? They can all get the length through .length and can be accessed through subscript index, such as: fakeArr.length, fakeArr[0]
So can we change it by letting json support this method? What about "array-like object"?
Design it first:
To make json support fakeArr.length, it’s simple. You only need to define a key-value pair with the key as length
It seems that supporting subscript access can also be solved easily. In addition, key-value pairs can use numbers as keys~
Then try it:
var fakeArray = {0: "张三", 1: "李四", 2:"朱六", length:3};
var realArray = $.makeArray(fakeArray);
console.log(fakeArray)
console.log(realArray)
realArray.reverse();
console.log(realArray);see it? Success! The realArray here is already the native array of js, so you can use native methods such as reverse()
It should be noted that , length is very important during the conversion process, and this length is determined The length of the converted array
If the length in the above example is specified as 2, then the converted array will only have the first 2 elements, which is ["Zhang San", "李思"]
If the length in the above example is specified as 4, then the converted array will not be the array we want, but an array similar to new Array().push(fakeArray)
The above is the detailed content of Example analysis of how makeArray() in jQuery converts multiple types into JS native Array. For more information, please follow other related articles on the PHP Chinese website!