Analyse von vier Fragen zur Funktion .grep() von jQuery

Frage 1: Was ist der Quellcode von 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;
}

Frage 2: Was sind die aufrufenden Methoden von jQuery.grep?

In der Winnow-Funktion

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

 }

In der Winnow-Funktion gibt es auch einen Aufruf

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

oder in der Winnow-Methode

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

und in jQuery.buildFragment,

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

wird aufgerufen. Diese Methode verwendet das Attribut „defaultChecked“ aller Eingabeelemente auf dasselbe wie „checked“. Frage 3: Welche Funktion hat die Methode jQuery.grep?

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

Wenn der dritte Parameter nicht übergeben wird In diesem Fall bedeutet dies, dass wir nach dem Aufruf der Rückruffunktion die Elemente zurückgeben möchten, deren Ergebnis wahr ist. Daher besteht die Funktion von jQuery.grep darin, nur Elemente zu filtern, die bestimmte Anforderungen erfüllen Bedingungen werden im Ergebnisarray angezeigt! Denken Sie daran:

Diese Funktion Der Rückgabewert ist ein Array!

Wir analysieren anhand des folgenden Beispiels, wie das Element ausgewählt wird, dessen ID und Klasse beide Vater sind
JS-Teil

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

Grep bestimmt also die zurückgegebenen Elemente danach, ob der Rückgabewert wahr oder falsch ist. Alle Elemente, die die Bedingungen erfüllen, bilden eine DOM-Sammlung! Bleibt unverändert, wir ändern den JS-Teil wie folgt:

//对每一个元素进行筛选，只有符合条件的元素才会在结果数组中!
  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]

Dies Da der dritte Parameter wahr ist, wird er intern invertiert, was bedeutet, dass wir möchten, dass das Element mit dem Wert false im Ergebnis erscheint Array, sodass das Ergebnisarray nur das zweite p-Element enthält.

//对每一个元素进行筛选，只有符合条件的元素才会在结果数组中!
  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]

Tatsächlich kann der Code im Quellcode wie folgt geändert werden:

Frage 4: Was sind der Kontext und die Parameter in jQuery.grep? 🎜>Antwort: Da es keinen expliziten Aufruf oder keine explizite Anwendung gibt, wird der Kontext durch die Laufzeitumgebung bestimmt. Der erste Parameter ist das Element und der zweite Parameter ist der Index

(Nur jQuery.each und jede Instanz, der erste Parameter der Kartenmethode ist der Index und der zweite Parameter ist das Element!)

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

Zusammenfassung:

(1) Die $.each-Methode betont das Durchlaufen aller Elemente und das anschließende Ausführen einer Rückruffunktion Filtern Sie alle Elemente nach einer Funktion und lassen Sie alle Elemente eine Funktion ausführen, um zu sehen, ob der Rückgabewert dem erwarteten Rückgabewert entspricht. Wenn er den erwarteten Rückgabewert erfüllt, kann er in das Ergebnisarray aufgenommen werden negieren, also betont grep das Filtern, d. Jede Rückruffunktion wird übergeben. Die übergebenen Parameter sind der Index und das Element, wobei der Index vorne und das Element hinten steht. Die von anderen grep- oder Map-Methoden übergebenen Parameter sind das Element und der Index, wobei das Element vorne steht und der Index hinten (außer zum Beispiel „map“ und „jede“-Methode)!

Das obige ist der detaillierte Inhalt vonAnalyse von vier Fragen zur Funktion .grep() von jQuery. Für weitere Informationen folgen Sie bitte anderen verwandten Artikeln auf der PHP chinesischen Website!