Array, grep, merge, makeArray 및 jQuery의 소스 코드 분석에서 정적 메소드 사용
- 黄舟원래의
- 2017-07-19 09:36:021415검색
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
먼저 배열의 길이를 저장하고 다음에 따라 처리합니다. 길이가 존재하지 않으면 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
}
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]소스 코드 분석:
这里接受两个参数，其中第二个参数是内部使用的，在源码内部经常被调用作为其他方法的支持方法。 创建一个新数组ret，如果只有一个参数则为空，如果存在第二个参数就把第二个参数赋值给ret，在array参数存在的前提下获取其数据类型，如果数据类型为字符串、函数或者正则时或者不存在length属性时，则假定array不是数组或者类数组，因为字符串、函数和正则（黑莓系统下）都是有length属性的，所以只判断length不准确，如果不是数组或者类数组就直接将第一个参数放入ret的末尾。如果通过了则认为是数组或者是类数组，此时调用merge方法将两个数组合并，最后返回ret。 <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 'length'</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>
위 내용은 Array, grep, merge, makeArray 및 jQuery의 소스 코드 분석에서 정적 메소드 사용의 상세 내용입니다. 자세한 내용은 PHP 중국어 웹사이트의 기타 관련 기사를 참조하세요!