jQuery source code analysis map function $. map and $. fn.map function in detail

Posted by aboldock on Thu, 03 Oct 2019 22:02:32 +0200

The $. map() function is used to process each element (or attribute of an object) in an array using a specified function and to encapsulate the processing results as a new array to return. The function has three parameters, as follows:

The elems Array/Object type specifies the array or object to be processed.

callback

arg parameter, the parameter passed in when the callback function is executed

The callback function can be executed with two parameters, one is the value corresponding to traversal and the other is its index (the object is the key name). If there is a return value, the return value is pieced together into an array.

The return value of $. fn.map() is a jQuery object, which is also implemented by calling $. map(). The returned array finally calls pushStack to create a jQuery object, 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">Text 1</p>
    <p id="p2">Text 2</p>
    <h1 id="h1">Heading 1</h1>
    <h1 id="h2">Heading 2</h1>
    <script>
        var arr=[11,12,13,14]; 
        var a =$.map(arr,function(element,index){return index;});
        console.log(a);                         //output:Array [ 0, 1, 2, 3 ]

        var b =$.map([p1,p2,h1,h2],function(elem,i){
            console.log(elem,i)                 //Separate output:<p id="p1">(This is a reference to the node) 0,<p id="p1"> 1,<h1 id="h1"> 2,<h1 id="h2"> 3
            return elem.parentNode;
        })
        console.log(b)                          //output:Array [ body, body, body, body ]

        var c = $('p').map(function(i,elem){return elem.parentNode});
        console.log(c.length)                   //output:2
        console.log(c[0]===c[1])                //output:true
        console.log(c[1]===document.body)           //output:true
    </script>
</body>
</html>

Source code analysis

Writby: Desert QQ:22969969

Like $. each(), the $. map() is mounted on $. fn through $. extend(), as follows:

  map: function( elems, callback, arg ) {       //Call a callback function on each attribute of each element or object in an array and put the return value of the callback function into a new array
    var value, key, ret = [],                           //ret Store the final result
      i = 0,
      length = elems.length,
      // jquery objects are treated as arrays
      isArray = elems instanceof jQuery || length !== undefined && typeof length === "number" && ( ( length > 0 && elems[ 0 ] && elems[ length -1 ] ) || length === 0 || jQuery.isArray( elems ) ) ;      //isArray Representation parameter elems Is it an array?

    // Go through the array, translating each of the items to their
    if ( isArray ) {                                    //For array or class array objects, the for Cyclic traversal subscripts,
      for ( ; i < length; i++ ) {
        value = callback( elems[ i ], i, arg );           //implement callback Functions, parameters are current Object,current Object Order and arg

        if ( value != null ) {                            //If the return value of the callback function is not null and undefined，Put the return value into the result set ret. 
          ret[ ret.length ] = value;
        }
      }

    // Go through every key on the object,
    } else {                                            //For objects, the for-in Cyclic traversal
      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 );               //Calling method concat()take ret Convert to an array and return
  },

For $. fn.map(), it is implemented by calling $. map, as follows:

  map: function( callback ) {
    return this.pushStack( jQuery.map(this, function( elem, i ) {     //Internal static method jQuery.map()And prototype method.pushStack()Realization,
      return callback.call( elem, i, elem );
    }));
  },

As pushStack has mentioned before, we can just create a new jQuery object in which we can specify DOM elements and selector attributes.

Topics: Javascript JQuery Attribute

Programmer Think

jQuery source code analysis map function $. map and $. fn.map function in detail

Hot Topics