jQuery source code analysis (five) map function $ .map and $ .fn.map function Detailed

.Map $ () function is used for each element (or each attribute of an object) specified function processing array, and the process returns to the new result array package, the function has three parameters, as follows:

　　Array or object to be treated elems Array / Object specified type.

　　callback callback function that executes when traversing

　　arg parameter passed in the implementation of the callback function parameters

When the callback function can be performed with two parameters, respectively, and the corresponding values when traversing its index (it is the object key name), if the return value, the return value will be put together as an array

$ .Fn.map () return value is a jQuery object, it also calls the $ .map () to achieve, and finally returned array call pushStack create a jQuery object only, as follows:

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>Document</title>
    <script src="http://libs.baidu.com/jquery/1.7.1/jquery.min.js"></script>
</head>
<body>
    <p id="p1">文本1</p>
    <p id="p2">Text 2 </ P > 
    < h1 of ID = "h1 of" > Title. 1 </ h1 of > 
    < h1 of ID = "H2" > Title 2 </ h1 of > 
    < Script > 
        var ARR = [ . 11 , 12 is , 13 is , 14 ]; 
         var A = $ .map (ARR, function (Element, index) { return index;}); 
        the console.log (A);                          // output: the Array [0,. 1, 2,. 3] 

        varB = $ .map ([P1, P2, h1 of, H2], function (elem, I) { 
            the console.log (elem, I)                  // outputs: <p id = "p1" > ( which is a reference node ) 0, <P ID = "P1">. 1, <h1 of ID = "h1 of"> 2, <h1 of ID = "H2">. 3 
            return elem.parentNode; 
        }) 
        the console.log (B)                           // output: Array [body, body, body, body] 

        var C = $ ( ' P ' ) .map ( function (I, elem) { return elem.parentNode}); 
        the console.log (c.length)                    // output: 2 
        Console.log(c[0]===C [ . 1 ])                 // Output: to true 
        the console.log (C [ . 1 ] === the document.body)            // Output: to true 
    </ Script > 
</ body > 
</ HTML >

Source code analysis

writer by: Desert QQ: 22969969

And $ .each (), like, $ map () is () mounted to the .fn by $ $ .extend, as follows:

  Map: function (the elems, the callback, Arg) {        // calls a callback function for each attribute of each array element or object, and return value into a new array callback function 
    var value, Key, RET = [],                            // the final result is stored ret 
      I = 0 , 
      length = elems.length,
       // jQuery Treated AS Arrays Objects are 
      the isArray = the elems the instanceof the jQuery length ||! == undefined && typeof length === "Number" && ((length> 0 && elems [0] && elems [length -1]) === length || 0 || jQuery.isArray (elems));       // the isArray elems indicating whether the parameter is an array 

    // Go through The array,translating each of the items to their
    IF (the isArray) {                                     // For a list or array-like objects, for loop iterates through the index, 
      for (; I <length; I ++ ) { 
        value = callback (the elems [I], I, Arg);            // execute callback function, Object parameters are current, and the order of the current Object Arg 

        IF (value! = null ) {                             // the return value of the callback function, if not null and undefined, put into the result set return value ret. 
          RET [ret.length] = value; 
        } 
      } 

    // Go through Every The Object Key ON, 
    } the else {                                             // the object, traversing through the for-in loop 
      for(Key in the elems) { 
        value = the callback (the elems [Key], Key, Arg); 

        IF (value =! Null ) { 
          RET [ret.length] = value; 
        } 
      } 
    } 

    // The Flatten the any nested Arrays 
    return ret.concat .apply ([], ret);                // call the method concat () ret be converted into an array, and returns 
  },

For $ .fn.map (), it is to call the $ .map to achieve, as follows:

  Map: function (the callback) {
     return  the this .pushStack (jQuery.map ( the this , function (elem, I) {      // internal implementations jQuery.map () method and prototype .pushStack () static method, 
      return callback.call ( elem, I, elem); 
    })); 
  },

Before pushStack been introduced, it is to create a new jQuery object only, we can specify which DOM element and a selector attribute.

jQuery source code analysis (five) map function $ .map and $ .fn.map function Detailed

Guess you like