Some operations of type judging and array from jquery source code

Source: Internet
Author: User

In-depth look at the jquery source code, we will find that the source code is very clever writing. That I also today through a few source code to use the skills to stimulate, I hope we can jointly study the essence of the source, do not swallowed.

1. Transforming an array of classes into arrays

I think the first thing we think of is the For In loop, which is quite right and effective. But it's not the best effect. Because of the need to loop, and then the loop out the value of push into the new array, it is estimated how to get 10 lines of code it ...

So what is the use of jquery? The slice method on the array prototype.

We play Array.prototype.slice in the console and then we come out with a complete slice method. Similarly, if you hit Array.prototype.push, you will also get a complete push method. Then we can assume that these methods of arrays are defined on the prototype of the array.

Now define an array of classes. As for what is an array of classes, I do not repeat here, forget the classmate can check the information.

var obj={0: ' Zhangsan ', 1:24,2: ' Male ', length:3};

OK, as you know, the class array has the Lengh property, similar to an array, but the biggest difference between the two is that the class array cannot use the method on the array. So what do we do? At this time the protagonist to appear, warmly welcome!!

Array.prototype.slice.call ()

Take a look at the complete solution and then analyze:

var obj={0: ' Zhangsan ', 1:24,2: ' Male ', length:3};var res = Array.prototype.slice.call (obj); Console.log (res); ["Zhangsan", "male"]

In this simple line, the result appears, is not more than the cycle of more than 10 lines to optimize more?

Well, now in detail Fonchy Array.prototype.slice.call ()

First look at the call method, as you may all know, calling is going to change the This keyword in the method that calls it

function Tests () {    alert (this);} Tests.call (//  test

Well, by this example, we can see that Array.prototype.slice.call () changes the this value in the slice method of the array prototype.

The tangled thing is here, where is this? Obviously did not see this AH. This corresponds to a sentence: what you see is not what you receive.

Although we do not see this in this sentence, but you can imagine the JS source code in the slice method must have this.

Since the This keyword in slice is changed to obj, then obj can use the slice method.

Now explain the slice method, from a starting point to an end point, such as slice (0) is represented from the No. 0 to the last.

So complete explanation of this sentence: Array.prototype.slice.call (obj) is the value of obj from the No. 0 to the last item in a new array, how to determine which is the last item? Length property, see length equals 3, then the last item is the one with index 2.

Now look at obj again.

var obj={0: ' Zhangsan ', 1:24,2: ' Male ', length:3};

Obviously, the No. 0 item is Zhangsan, the 1th item is 24, the 2nd item is male, and the 2nd item is the last one.

So the result is: ["Zhangsan", "male"]

I hope my analysis can give you a little different inspiration. The following analysis is not so thin.

2. Merging an array into another array: Array.prototype.push.apply (ARR1,ARR2)

var = [arr1]; var arr2 = [4,5,6//[1,2,3,[4,5,6]]

It's obviously not what we want,

var = [arr1]; var arr2 = [4,5,6//[1,2,3,4,5,6]

This will be a perfect solution. However, this method is not omnipotent, and an error occurs when the value of the array to be inserted is large. So we need to pay attention.

3. Determine the detailed type of the variable

Object.prototype.toString.call (obj)

This method can be used to determine in detail whether the type is an object or an array or a date, and the original typeof instanceof have shortcomings, can not be judged correctly.

Time relationship, first write these

Some operations of type judging and array from jquery source code

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.