The use of Jquery.map () method is detailed _jquery

The prototype method map calls a static method with the same name as each, except that the returned data must be processed by another prototype method Pushstack method before returning, the source code is as follows:

Map:function (callback) {return This.pushstack (the
    jquery.map (this, function (Elem, i) {return
      Callback.call (el EM, I, elem);
    });
  

This article is mainly to analyze the static map method as for Pushstack in the next essay inside analysis;

First understand the use of the map below (manual content)

$.map converts an element in an array to another array.

The conversion function as a parameter is invoked for each array element, and the transformation function is passed a parameter that represents the converted element.

A conversion function can return a converted value, null (delete an item from an array), or an array containing values, and extend to the original array.

Parameters
arrayorobject,callbackarray/object,functionv1.6
Arrayorobject: Array or object.

is invoked for each array element, and the transformation function is passed an element that represents the transformation as an argument.

function to return any value.

In addition, this function can be set to a string, which is considered "Lambda-form" when set to a string (abbreviated form?). , where a represents the array element.

If "A * a" represents "function (a) {return a * A;}".

Example 1:

Converts each element in the original array to a new array, plus 4.
//jquery Code:
$.map ([0,1,2], function (n) {return
 n + 4;
});
Results:
[4, 5, 6]

Example 2:

Elements greater than 0 in the original array plus 1, otherwise deleted.
//jquery Code:
$.map ([0,1,2], function (n) {return
 n > 0? n + 1:null;
});
Results:
[2, 3]

Example 3:

Each element in the original array expands to an array containing itself and its value plus 1, and converts to a new array
//jquery code:
$.map ([0,1,2], function (n) {return
 [n, n + 1];
   });
Results:
[0, 1, 1, 2, 2, 3]

You can see that the map method is similar to each method by looping through the "items" of each object or array to perform a callback function to manipulate the array or object, but there are many differences between the two methods.

For example, each () returns the original array, does not create a new array, and the map creates a new array, each traversal is this point to the current array or object value, and the map points to window because it does not use object impersonation in the source code;

For example:

var items = [1,2,3,4]; 
$.each (items, function () { 
alert (' it ' + this); 
}); 
var newitems = $.map (items, function (i) {return 
i + 1; 
}); 
NewItems is [2,3,4,5]
//When using each, the changed or original items array, while using map, do not change items, just create a new array.

var items = [0,1,2,3,4,5,6,7,8,9]; 
var itemslessthanequalfive = $.map (items, function (i) { 
//Removes all items > 5 
if (i > 5) 
return　　null; 
return i; 
}); 
Itemslessthanequalfive = [0,1,2,3,4,5]

Back to map source

ARG is for internal usage only map:function (Elems, Callback, arg) {var value, key, ret = [], i = 0, Length = elems.length,//jquery objects are treated as arrays IsArray = Elems instanceof jquery | | Length!== undefined && typeof length = = "Number" && (length > 0 && elems[0] && E lems[length-1]) | | Length = = 0 | |

    Jquery.isarray (Elems));
        Go through the array, translating each of the items to their if (IsArray) {for (; i < length; i++) {

        Value = Callback (elems[i], I, ARG);
        if (value!= null) {ret[Ret.length] = value; }//Go through every key on the object,} else {for (key in elems) {value = Callback (

        elems[key], key, ARG);
        if (value!= null) {ret[Ret.length] = value;
  }}//flatten any nested arrays return ret.concat.apply ([], ret);

}, 

First, declare a few variables to prepare for the next traversal, where Jsarray variables are used to simply differentiate between objects and arrays, this boolean compound expression is longer but it is easy to understand the precedence of the JS operator, first of all, and then the logic is assigned to the "logic or" congruent " And then you can analyze it.

The final result of the two necessary conditions, first in parentheses, and then the result plus length!== undefined, typeof length = = number, is followed by the logic or operation of Elems instanceof jquery. To put it simply, IsArray is the case:

1, Elems instanceof jquery is true in other words, the jquery object

2, length!== undefined && typeof length = = "Number" and length > 0 && elems[0] && elems[Leng Th-1]) | | Length = = 0 | | Jquery.isarray (Elems) These three at least set up a

Can be split into 3 small cases

Length is a number that exists and is numeric and the length property of the array or class array to be traversed is greater than 0 length-1 exists so that it can be traversed, such as for jquery objects Domlist objects, etc.

Length is present and is numeric and the length property equals 0 if it is 0 it doesn't matter.

Length is present and is numeric and the object being traversed is a pure array

After satisfying these conditions, we begin to walk separately according to the results of IsArray, for the "array" using a For loop, the for...in loop for the object

Go through the array, translating each of the items to their
    if (IsArray) {for
      (; i < length; i++) {
   value = Callback (elems[i], I, ARG);

        if (value!= null) {
          ret[ret.length] = value;
        }
      }

When an array or class array is used, the values and pointers of each item of the loop and the arg parameter are executed directly into the callback function, and the ARG parameter is the internal parameter of this method, similar to each and some other jquery methods. The object operation is simply skipped by adding the result returned to the new array as long as the callback function is executed without returning null.

Flatten any nested arrays return
    ret.concat.apply ([], ret);

Finally flatten the result set, why do you have this step? Because a map can extend an array in the previous 3rd example:

$.map ([0,1,2], function (n) {return
 [n, n + 1];
});

If it is used in this way the new array is a two-dimensional array, so the dimension must be reduced

Ret.concat.apply ([], ret) is equivalent to [].concat.apply ([],ret) the key role is apply, Because the second parameter of apply divides the array of RET into multiple parameters, the use of a two-dimensional array into a one-dimensional array is worth collecting, concat.

A simple analysis of the map method, the ability of the limited error of the point to correct.

The above mentioned is the entire content of this article, I hope you can enjoy.