Heim > Web-Frontend > js-Tutorial > Hauptteil

Die Verwendung statischer Methoden in Array, grep, merge, makeArray und Quellcode-Analyse in jQuery

黄舟
Freigeben: 2017-07-19 09:36:02
Original
1377 Leute haben es durchsucht

inArray-Methode

bestimmt die Position des ersten Parameters im Array, beginnend bei 0 (gibt -1 zurück, wenn nicht gefunden) .

Beispiel:

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
Nach dem Login kopieren

Quellcode-Analyse:

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;
    },
Nach dem Login kopieren

Akzeptieren 3 Parameter: Der Parameter „elem“ ist das zu durchsuchende Element und „array“ stellt die angegebene Startposition der Suche dar. Dies bedeutet, dass die Suche im gesamten Array der Methode „Trimmen“ ähnelt Bietet auch eine Prototyp-Methode indexOf für das Array-Objekt. Browser unterstützen den direkten Aufruf dieser Methode

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

kann direkt von Entwicklern verwendet werden, die dies nicht benötigen Verwenden Sie für Browser, die dies nicht unterstützen, eine for...in-Schleife. Speichern Sie zunächst die Länge des Arrays und verarbeiten Sie es entsprechend Länge. Wenn i nicht existiert, sei es 0. Wenn es kleiner als 0 ist, füge len hinzu und bewerte es dann. Wenn es immer noch kleiner als 0 ist, dann mache es wieder 0; 🎜> Die for...in-Schleife unterscheidet sich von der Form, die wir normalerweise verwenden. Wie in den Kommentaren erwähnt, sollten Sparse-Arrays vermieden werden. Zum Beispiel:

Die beiden Arrays verwenden dieselbe Methode, obwohl die Länge gleich ist und der Leistungswert gleich ist. Der zweite Typ ist ein spärliches Array, dessen Elemente diskontinuierlich sind Die for...in-Schleife fügt automatisch zwei undefinierte Elemente hinzu, aber das Ergebnis ist falsch. Für diesen Array-Typ ist es nicht erforderlich, undefinierte Elemente im js-Hintergrund hinzuzufügen. Daher übernimmt jQuery diesen Ansatz, von dem es sich ebenfalls lohnt, zu lernen. Nachdem Sie es gefunden haben, wird der entsprechende i-Wert zurückgegeben, andernfalls wird -1 zurückgegeben, sodass Sie beurteilen können, ob das Rückgabeergebnis > -1 vorhanden ist.

grep-Methode
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
  }
Nach dem Login kopieren

Verwenden Sie die Filterfunktion, um Array-Elemente zu filtern.

Diese Funktion übergibt mindestens zwei Parameter: das zu filternde Array und die Filterfunktion. Die Filterfunktion muss „true“ zurückgeben, um das Element beizubehalten, oder „false“, um das Element zu entfernen.

Beispiel:

Quellcode-Analyse:


$.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]
Nach dem Login kopieren

Diese Methode akzeptiert 3 Parameter, elems ist das zu filternde Array, callback ist die Callback-Funktion, inv gibt an, ob die Filterung umgekehrt werden soll Der Standardwert ist falsch;


<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>
Nach dem Login kopieren

Erzwingen Sie zunächst die Konvertierung von inv in einen booleschen Wert und verwenden Sie dann eine for-Schleife, um die Elemente zu übergeben Im Array wird nacheinander das Rückgabeergebnis retVal zugewiesen. Wenn retVal gleich inv ist, wird das Element in das neue Array ret eingefügt und schließlich zurückgegeben Wenn es gleich ist, muss der Rückgabewert der Rückruffunktion ein boolescher Wert sein.

Zusammenführungsmethode

Zwei Arrays zusammenführen

Das zurückgegebene Ergebnis ändert den Inhalt des ersten Arrays – auf die Elemente des ersten Arrays folgen die Elemente des zweiten Arrays.

Beispiel:

Quellcode-Analyse:


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

Diese Methode akzeptiert zwei Array-Parameter, der zweite ist das zusammengeführte Array und der erste ist das zusammenzuführende Array. Tatsächlich ist das Array hier nicht unbedingt ein „reines Array“, es kann ein Array-ähnliches Objekt oder ein Objekt mit einem numerischen Index sein.


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;
},
Nach dem Login kopieren
Unterscheiden Sie zunächst anhand der Länge Attribut des zweiten Arrays. Wenn es sich um einen Zahlentyp handelt, wird davon ausgegangen, dass es sich um ein Array handelt, und eine for-Schleife wird verwendet, um es nacheinander zum ersten Array hinzuzufügen. Wenn es sich nicht um eine Zahl handelt oder nicht existiert, wird eine While-Schleife verwendet, um alle nicht undefinierten Werte im zweiten Array zum entsprechenden tiefgestellten Wert des ersten Arrays zu addieren oder zu überschreiben.

Korrigieren Sie abschließend den Längenwert manuell, da bei Daten, die kein „reines Array“ sind, der Längenwert nicht automatisch geändert wird.

makeArray-Methode

Konvertiert ein Array-ähnliches Objekt in ein Array-Objekt.

Array-ähnliche Objekte haben eine Längeneigenschaft, deren Mitglieder von 0 bis Länge - 1 indiziert sind. In der Praxis wird diese Funktion automatisch in jQuery verwendet, ohne dass eine spezielle Konvertierung erforderlich ist.

Beispiel:

Quellcode-Analyse:



<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>
Nach dem Login kopieren

 

这里接受两个参数,其中第二个参数是内部使用的,在源码内部经常被调用作为其他方法的支持方法。

创建一个新数组ret,如果只有一个参数则为空,如果存在第二个参数就把第二个参数赋值给ret,在array参数存在的前提下获取其数据类型,如果数据类型为字符串、函数或者正则时或者不存在length属性时,则假定array不是数组或者类数组,因为字符串、函数和正则(黑莓系统下)都是有length属性的,所以只判断length不准确,如果不是数组或者类数组就直接将第一个参数放入ret的末尾。如果通过了则认为是数组或者是类数组,此时调用merge方法将两个数组合并,最后返回ret。

 

 

Das obige ist der detaillierte Inhalt vonDie Verwendung statischer Methoden in Array, grep, merge, makeArray und Quellcode-Analyse in jQuery. Für weitere Informationen folgen Sie bitte anderen verwandten Artikeln auf der PHP chinesischen Website!

Verwandte Etiketten:
Quelle:php.cn
Erklärung dieser Website
Der Inhalt dieses Artikels wird freiwillig von Internetnutzern beigesteuert und das Urheberrecht liegt beim ursprünglichen Autor. Diese Website übernimmt keine entsprechende rechtliche Verantwortung. Wenn Sie Inhalte finden, bei denen der Verdacht eines Plagiats oder einer Rechtsverletzung besteht, wenden Sie sich bitte an admin@php.cn
Beliebte Tutorials
Mehr>
Neueste Downloads
Mehr>
Web-Effekte
Quellcode der Website
Website-Materialien
Frontend-Vorlage
Über uns Haftungsausschluss Sitemap
Chinesische PHP-Website:Online-PHP-Schulung für das Gemeinwohl,Helfen Sie PHP-Lernenden, sich schnell weiterzuentwickeln!