jQuery の .grep() 関数に関する 4 つの質問の分析

質問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 属性をcheckedと同じに設定するために使用されます

// 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 の機能は何ですか?メソッド?

最初のパラメータが渡されない場合は、コールバック関数を呼び出した後、結果が true になった要素を返したいことを意味するため、jQuery.grep の機能は、その要素のみをフィルタリングすることになります。特定の条件を満たすと、結果の配列が表示されます。覚えておいてください: この関数の戻り値は配列です!
ID とクラスの両方が親である要素を選択する方法を分析するために次の例を使用します

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

この時点では、 3 番目のパラメータが true の場合、内部で反転されるため、値を次のようにする必要があることを意味します。 false 要素が結果配列に表示されるため、結果配列には 2 番目の p 要素のみが含まれます。

実際、ソース コード内のコードは次のように変更できます:

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

質問 4: jQuery.grep のコンテキストとパラメーターは何ですか?

回答: call または apply は明示的に呼び出されないため、コンテキストは実行環境によって決まります。最初のパラメータは要素で、2 番目のパラメータは添え字です

(jQuery.each とインスタンス each、map メソッドのみ、最初のパラメータは添え字、2 番目のパラメータは要素です!)

概要:

(1) $.each メソッドはトラバーサルを重視します。つまり、すべての要素をトラバースしてからコールバック関数を実行します。 false が返された場合、grep は関数に従ってすべての要素をフィルタリングすることを重視し、すべての要素が実行されます。戻り値が期待される戻り値と一致するかどうかを確認する関数。一致する場合、3 番目のパラメーターは反転するかどうかを示すため、grep はフィルタリング、つまりすべての要素を強調します。要素のセットが変更されます。

(map は変更を強調し、grep はフィルタリングを強調し、それぞれはトラバーサルを強調します)

(2) それぞれのコールバック関数によって渡されるパラメーターは添え字と要素です。添え字は先頭にあります。他の grep または マップ メソッドによって渡されるパラメータは要素と添え字であり、要素が前にあり、添え字が後ろにあります (インスタンス マップと各メソッドを除く)!

以上がjQuery の .grep() 関数に関する 4 つの質問の分析の詳細内容です。詳細については、PHP 中国語 Web サイトの他の関連記事を参照してください。