The use of static methods inArray, grep, merge, makeArray and source code analysis in jQuery

inArray method

Determine the position of the first parameter in the array, counting from 0 (if not found, return -1) .

Example:

var arr = [ 4, "Pete", 8, "John" ];

jQuery.inArray("John", arr);  //3

jQuery.inArray(4, arr);  //0

jQuery.inArray("David", arr);  //-1

jQuery.inArray("Pete", arr, 2);  //-1

Source code analysis:

inArray: function( elem, array, i ) {
        var len;

        if ( array ) {
            if ( indexOf ) {
                return indexOf.call( array, elem, i );
            }

            len = array.length;
            i = i ? i < 0 ? Math.max( 0, len + i ) : i : 0;

            for ( ; i < len; i++ ) {
                // Skip accessing in sparse arrays
                if ( i in array && array[ i ] === elem ) {
                    return i;
                }
            }
        }

        return -1;
    },

Accepts 3 parameters, elem parameter is the element to be searched for. array is the array to be searched. i indicates the position to start searching. The default is 0. That is, searching the entire array is similar to the trim method. ECMA5 also provides a prototype method indexOf for the array object. If the browser executing the code supports this The method is called directly;

var arr=[1,2,3];
     
  alert(arr.indexOf(2));  //1     
  alert(arr.indexOf(2,2));  //-1

It can be used directly by developers who do not need to consider low-version browsing. For browsers that do not support it, use for...in loop filtering;

First save the length of the array, process i according to the length, if i does not exist, let it be 0, if it is less than 0, add len and then judge, if it is still less than 0, make it 0 again;

The for...in loop here is different from the form we usually use. As mentioned in the comments, sparse arrays should be avoided. What is a sparse array? Examples are as follows:

var arr=[undefined,undefined];
 arr[2]=4;
 console.log(arr);//[undefined,undefined,4]
 var i=0;len=arr.length;
 for ( i in arr ) {
      alert(i in arr);  //true x 3
 }

 var arr=[];
 arr[2]=4;
 console.log(arr);//[2:4]
 var i=0;len=arr.length;
 for ( i in arr ) {
       alert(i in arr);  //false x 3 true
  }

The two arrays use the same method. Although the length is 3 and the performance value is the same, the results returned by the in operation are different. The second one is a sparse array. The elements are discontinuous. The for...in loop will automatically add two undfined but the result is false. For this type of array, there is no need to add undefined in the js background, so jQuery adopts this method. This approach is also worth learning from. After it is found, the corresponding i value is returned, otherwise -1 is returned, so you can judge whether the return result > -1 exists.

grep method

Use the filter function to filter array elements.

This function passes at least two parameters: the array to be filtered and the filter function. The filter function must return true to retain the element or false to remove the element.

Example:

$.grep( [0,1,2], function(n,i){  return n > 0;
});//结果:[1, 2]//排除数组中大于 0 的元素，使用第三个参数进行排除。$.grep( [0,1,2], function(n,i){  return n > 0;
}, true);//结果:[0]

Source code analysis:

<span style="font-size: 18px;">grep: <span style="color: #0000ff;">function</span><span style="color: #000000;">( elems, callback, inv ) {    </span><span style="color: #0000ff;">var</span> ret =<span style="color: #000000;"> [], retVal;
    inv </span>= !!<span style="color: #000000;">inv;    </span><span style="color: #008000;">//</span><span style="color: #008000;"> Go through the array, only saving the items</span>
    <span style="color: #008000;">//</span><span style="color: #008000;"> that pass the validator function</span>
    <span style="color: #0000ff;">for</span> ( <span style="color: #0000ff;">var</span> i = 0, length = elems.length; i < length; i++<span style="color: #000000;"> ) {
         retVal </span>= !!<span style="color: #000000;">callback( elems[ i ], i );         </span><span style="color: #0000ff;">if</span> ( inv !==<span style="color: #000000;"> retVal ) {
             ret.push( elems[ i ] );
         }
   }   </span><span style="color: #0000ff;">return</span><span style="color: #000000;"> ret;<br/>}</span></span>

This method accepts 3 parameters, elems is the array to be filtered, callback is the callback function, inv indicates whether to reverse filtering, the default is false;

First force inv to be converted to a Boolean value, and then use a for loop to pass the elements in the array into the callback function one by one for operation, and assign the returned result to retVal, if retVal is equal to inv, put the element into the new array ret, and finally return ret. It should be noted that because it is equal, the return value of the callback function must be a Boolean value.

merge method

Merge two arrays

The returned result modifies the contents of the first array - the elements of the first array are followed by the elements of the second array.

Example:

//合并两个数组到第一个数组上。$.merge( [0,1,2], [2,3,4] )//结果:[0,1,2,2,3,4]

Source code analysis:

merge: function( first, second ) {    var i = first.length,
        j = 0;    if ( typeof second.length === "number" ) {         for ( var l = second.length; j < l; j++ ) {
             first[ i++ ] = second[ j ];
         }

    } else {          while ( second[j] !== undefined ) {
             first[ i++ ] = second[ j++ ];
          }
    }

    first.length = i;    return first;
},

This method accepts two array parameters, the second one is the merged array, and the first one is the array to be merged. In fact, the array here is not necessarily a "pure array", it may be an array-like object or an object with a numeric subscript;

First differentiate based on the length attribute of the second array , if it is a number type, it is assumed to be an array, and a for loop is used to add it to the first array one by one. If it is not a number or does not exist, a while loop is used to add or overwrite all the non-undefined values ​​in the second array to the corresponding subscript value of the first array.

Finally, manually correct the length value, because for non-"pure array" data, the length value will not be automatically modified.

makeArray method

Convert an array-like object to an array object.

Array-like objects have a length property whose member indexes are 0 to length - 1. In practice this function will be used automatically in jQuery without any special conversion.

Example:

//HTML 代码:<p>First</p><p>Second</p><p>Third</p><p>Fourth</p>//jQuery 代码:var arr = jQuery.makeArray(document.getElementsByTagName("p"));
arr.reverse(); // 使用数组翻转函数//结果:[Fourth,Third,Second,First]

Source code analysis:

<span style="font-size: 18px;"><span style="color: #008000;">//</span><span style="color: #008000;"> results is for internal usage only</span>makeArray: <span style="color: #0000ff;">function</span><span style="color: #000000;">( array, results ) {   <br/><br/></span><span style="color: #0000ff;">var</span> ret = results ||<span style="color: #000000;"> [];   </span><span style="color: #0000ff;">if</span> ( array != <span style="color: #0000ff;">null</span><span style="color: #000000;"> ) {        <br/> <br/></span><span style="color: #008000;">//</span><span style="color: #008000;"> The window, strings (and functions) also have &#39;length&#39;</span>
        <span style="color: #008000;">//</span><span style="color: #008000;"> Tweaked logic slightly to handle Blackberry 4.7 RegExp issues #6930</span>
        <span style="color: #0000ff;">var</span> type =<span style="color: #000000;"> jQuery.type( array );        <br/> <br/></span><span style="color: #0000ff;">if</span> ( array.length == <span style="color: #0000ff;">null</span> || type === "string" || type === "function" || type === "regexp" ||<span style="color: #000000;"> jQuery.isWindow( array ) ) {
            push.call( ret, array );
        } </span><span style="color: #0000ff;">else</span><span style="color: #000000;"> {
            jQuery.merge( ret, array );
        }
   }   </span><span style="color: #0000ff;">return</span><span style="color: #000000;"> ret;<br/>},</span></span>

 

这里接受两个参数，其中第二个参数是内部使用的，在源码内部经常被调用作为其他方法的支持方法。

创建一个新数组ret，如果只有一个参数则为空，如果存在第二个参数就把第二个参数赋值给ret，在array参数存在的前提下获取其数据类型，如果数据类型为字符串、函数或者正则时或者不存在length属性时，则假定array不是数组或者类数组，因为字符串、函数和正则（黑莓系统下）都是有length属性的，所以只判断length不准确，如果不是数组或者类数组就直接将第一个参数放入ret的末尾。如果通过了则认为是数组或者是类数组，此时调用merge方法将两个数组合并，最后返回ret。

 

 

The above is the detailed content of The use of static methods inArray, grep, merge, makeArray and source code analysis in jQuery. For more information, please follow other related articles on the PHP Chinese website!