jQuery의 .grep() 함수에 관한 네 가지 질문 분석

질문 1: jQuery.grep의 소스 코드는 무엇입니까?

//grep函数,第三个参数表示是否根据fn的结果取反！
grep: function( elems, callback, invert ) {
var callbackInverse,
matches = [],
i = 0,
//保存数组个数
length = elems.length,
//对传入的第二个参数取反，true变成false，false变成true
//如果invert为false，即!inverse为true,那么直接把函数返回true的元素加入，所以期望callbackExpect的就是true
callbackExpect = !invert;
// Go through the array, only saving the items
// that pass the validator function
for ( ; i < length; i++ ) {
//如果invert是false,表示不取反，那么如果fn返回true，就直接加入进去matches数组
//获取回调函数结果的返回值的取反的结果
callbackInverse = !callback( elems[ i ], i );
if ( callbackInverse !== callbackExpect ) {
matches.push( elems[ i ] );
}
}
return matches;
}

질문 2: jQuery.grep의 호출 방법은 무엇입니까?

winnow 함수에서

   if ( qualifier.nodeType ) {
		return jQuery.grep( elements, function( elem ) {//没有第三个参数，表示获取执行函数后返回为true元素在结果数组中
			return ( elem === qualifier ) !== not;
		});

	}

winnow 함수에 또 다른 호출이 있나요

return jQuery.grep( elements, function( elem ) {
		return ( jQuery.inArray( elem, qualifier ) >= 0 ) !== not;<span style="font-family: Arial, Helvetica, sans-serif;">//没有第三个参数，表示获取执行函数后返回为true元素在结果数组中</span>
	});

또는 winnow 메소드

	return jQuery.grep( elements, function( elem, i ) {
			/* jshint -W018 */
			return !!qualifier.call( elem, i, elem ) !== not;<span style="font-family: Arial, Helvetica, sans-serif;">//没有第三个参数，表示获取执行函数后返回为true元素在结果数组中</span>
		});

jQuery.buildFragment에서 호출

       jQuery.grep( getAll( nodes, "input" ), fixDefaultChecked );

이 메소드는 모든 입력 요소의 defaultChecked 속성을 selected와 동일하게 설정하는 데 사용됩니다

// Used in buildFragment, fixes the defaultChecked property
var rcheckableType = (/^(?:checkbox|radio)$/i);
function fixDefaultChecked( elem ) {
	if ( rcheckableType.test( elem.type ) ) {
		elem.defaultChecked = elem.checked;//这里没有明确返回真或者假，所以他只是用来修改元素，而不再保存修改后的数组!
	}
}

질문 3: jQuery.grep의 기능은 무엇인가요? method?

먼저 전달되지 않는 경우 세 개의 매개변수의 경우 콜백 함수를 호출한 후 결과가 true인 요소를 반환한다는 의미이므로 jQuery.grep의 기능은 해당 요소만 필터링하는 것입니다. 특정 조건을 충족하면 결과 배열에 나타납니다! 기억하세요: 이 함수의 반환 값은 배열입니다!
다음 예를 사용하여 ID와 클래스가 모두 father

 <p class="father" id="father" style="background-color:red;height:400px;background-color:#ccc;">  
</p>  
 <p class="father" style="background-color:red;height:400px;background-color:#ccc;">  
</p>

JS 부분

인 요소를 선택하는 방법을 분석합니다.

     //对每一个元素进行筛选，只有符合条件的元素才会在结果数组中!
       var result=jQuery.grep($(".father"),function(elem,index)
	   {
	      return elem.id==="father";
		  //grep通过false,true来判断是否在结果集合中;map通过明确的return elem
		  //而each通过false,true决定是否退出循环
	   });
        console.log(result);//打印[p#father.father]

그래서 grep은 반환 값이 true인지 false인지에 따라 반환된 요소를 결정합니다. 조건을 충족하는 모든 요소는 DOM 세트를 형성합니다! HTML 부분은 변경되지 않고 그대로 유지되므로 JS 부분을 다음과 같이 수정합니다.

     //对每一个元素进行筛选，只有符合条件的元素才会在结果数组中!
       var result=jQuery.grep($(".father"),function(elem,index)
	   {
	      return elem.id==="father";
		  //grep通过false,true来判断是否在结果集合中;map通过明确的return elem
		  //而each通过false,true决定是否退出循环
	   },true);
        console.log(result);//[p.father]

이번에는 세 번째 매개변수가 true이면 내부적으로 반전되므로 값을 다음과 같이 설정해야 한다는 의미입니다. false 요소가 결과 배열에 나타나므로 결과 배열에는 두 번째 p 요소만 포함됩니다.

사실 소스 코드의 코드는 다음과 같이 수정될 수 있습니다.

//下面的代码可以修改为:
 callbackResult = callback( elems[ i ], i );//调用函数的结果
if ( callbackResult === callbackExpect ) {//如果调用的结果和期望的结果一样，那么直接放进结果数组返回
matches.push( elems[ i ] );
}

질문 4: jQuery.grep의 컨텍스트와 매개변수는 무엇입니까?

답변: 호출 또는 적용이 명시적으로 호출되지 않기 때문에 컨텍스트는 다음과 같습니다. 실행 환경에 따라 결정됩니다. 첫 번째 매개변수는 요소, 두 번째 매개변수는 첨자

(jQuery.each만, 인스턴스 각각, 맵 메소드, 첫 번째 매개변수는 첨자, 두 번째 매개변수는 요소!)

요약:

(1) $.each 메서드는 순회, 즉 모든 요소를 ​​순회한 다음 콜백 함수를 실행하는 것을 강조합니다. false를 반환하면 후속 호출을 중지하여 모든 요소가 실행되도록 합니다. 반환 값이 예상 반환 값을 충족하는지 확인하는 함수. 그렇다면 결과 배열에 포함될 수 있습니다. 세 번째 매개변수는 반전 여부를 나타내므로, grep은 필터링, 즉 모든 요소를 ​​강조합니다.

(map은 수정을 강조하고, grep은 필터링을 강조하며, 각각은 순회를 강조합니다.)

(2) 각각의 콜백 함수에 의해 전달되는 매개변수는 아래 첨자이며, 아래 첨자는 앞에 있습니다. 요소는 뒤에 있습니다. 기타 grep 또는 map 메소드에 의해 전달된 매개변수는 요소와 첨자이며, 앞에 요소가 있고 뒤에 첨자가 있습니다(인스턴스 맵 및 각 메소드 제외)!

위 내용은 jQuery의 .grep() 함수에 관한 네 가지 질문 분석의 상세 내용입니다. 자세한 내용은 PHP 중국어 웹사이트의 기타 관련 기사를 참조하세요!