Array, grep, merge, makeArray 및 jQuery의 소스 코드 분석에서 정적 메소드 사용

inArray 메소드

는 배열의 첫 번째 매개변수 위치를 0부터 계산하여 결정합니다(찾을 수 없는 경우 -1 반환).

예:

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

소스 코드 분석:

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;
    },

3개의 매개변수를 허용합니다. elem 매개변수는 검색할 요소이고, array는 검색할 배열입니다. i는 지정된 시작 위치를 나타냅니다. 검색, 기본값은 0입니다. 즉, 검색입니다. ECMA5는 배열 객체에 대한 프로토타입 메서드 indexOf도 제공합니다. 이 메서드를 직접 호출하세요.

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

는 낮은 버전의 브라우징을 고려할 필요가 없는 개발자가 직접 사용할 수 있습니다. for...in 루프 필터링 사용을 지원하지 않는 브라우저

먼저 배열의 길이를 저장하고 다음에 따라 처리합니다. 길이가 존재하지 않으면 0으로 하고, 0보다 작으면 len을 추가한 다음 판단하고, 그래도 0보다 작으면 다시 0으로 만듭니다.

for... in 루프는 우리가 일반적으로 사용하는 형식과 다릅니다. 주석에서 언급했듯이 희소 배열이란 무엇입니까? 예는 다음과 같습니다.

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
  }

두 배열은 동일한 방법을 사용합니다. 길이는 3이고 성능 값은 동일하지만 in 연산에서 반환되는 결과는 다릅니다. 두 번째 유형은 요소가 불연속적인 희소 배열입니다. for...in 루프는 정의되지 않은 두 개를 자동으로 추가하지만 결과는 다음과 같습니다. false. 이 유형의 배열의 경우 js 백그라운드에 정의되지 않은 항목을 추가할 필요가 없으므로 jQuery는 이 방법을 채택합니다. 찾은 후에는 해당 i값을 반환하고, 그렇지 않으면 -1을 반환하므로 반환 결과 > -1이 존재하는지 판단할 수 있다.

grep method

필터 기능을 사용하여 배열 요소를 필터링합니다.

이 함수는 필터링할 배열과 필터 함수라는 두 개 이상의 매개변수를 전달합니다. 필터 함수는 요소를 유지하려면 true를 반환하고 요소를 제거하려면 false를 반환해야 합니다.

예:

$.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]

소스 코드 분석:

<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>

이 메서드는 3개의 매개 변수를 허용합니다. elems는 필터링할 배열, callback은 콜백 함수, inv 나타냅니다 반전 여부 필터링의 기본값은 false입니다.

먼저 inv를 강제로 부울 값으로 변환한 다음 for 루프를 사용하여 배열의 요소를 콜백 함수에 전달합니다. retVal이 inv와 같으면 해당 요소를 새 배열 ret에 넣고 마지막으로 ret를 반환한다는 점에 유의해야 합니다. 콜백 함수는 부울 값이어야 합니다.

병합 방법

두 배열 병합

반환된 결과는 첫 번째 배열의 내용을 수정합니다. 첫 번째 배열의 요소 다음에 두 번째 배열의 요소가 옵니다.

예:

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

소스 코드 분석:

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;
},

이 방법은 두 개의 배열 매개변수를 허용하며, 두 번째 매개변수는 병합된 배열로 사용되고 첫 번째 매개변수는 병합할 배열입니다. 실제로 여기의 배열은 반드시 "순수 배열"은 아니며, 배열과 유사한 객체이거나 숫자 아래 첨자가 있는 객체 등일 수 있습니다.

먼저, 두 번째 배열의 길이 속성을 기반으로 구별합니다. . 숫자형인 경우 배열로 가정하고 for 루프를 사용하여 첫 번째 배열에 하나씩 추가합니다. 숫자가 아니거나 존재하지 않는 경우 while 루프를 사용하여 두 번째 배열의 정의되지 않은 모든 값을 첫 번째 배열의 해당 첨자 값에 추가하거나 덮어씁니다.

마지막으로 길이 값을 수동으로 수정하세요. "순수 배열"이 아닌 데이터의 경우 길이 값이 자동으로 수정되지 않기 때문입니다.

makeArray 메소드

배열형 객체를 배열 객체로 변환합니다.

배열형 객체에는 멤버 인덱스가 0에서 length - 1까지인 길이 속성이 있습니다. 실제로 이 함수는 특별한 변환 없이 jQuery에서 자동으로 사용됩니다.

예:

//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]

소스 코드 분석:

<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。

 

 

위 내용은 Array, grep, merge, makeArray 및 jQuery의 소스 코드 분석에서 정적 메소드 사용의 상세 내용입니다. 자세한 내용은 PHP 중국어 웹사이트의 기타 관련 기사를 참조하세요!