jQuery.inArray (), wie man es richtig benutzt?


345

Zum ersten Mal arbeite ich mit jQuery.inArray()und es wirkt irgendwie seltsam.

Befindet sich das Objekt im Array, wird 0 zurückgegeben, in Javascript ist 0 jedoch falsch. Es wird also Folgendes ausgegeben: "ist NICHT im Array"

var myarray = [];
myarray.push("test");

if(jQuery.inArray("test", myarray)) {
    console.log("is in array");
} else {
    console.log("is NOT in array");
}

Ich muss die if-Anweisung ändern in:

if(jQuery.inArray("test", myarray)==0)

Dies macht den Code jedoch unlesbar. Besonders für jemanden, der diese Funktion nicht kennt. Sie werden erwarten, dass jQuery.inArray ("test", myarray) true ergibt, wenn sich "test" im Array befindet.

Meine Frage ist also, warum es so gemacht wird. Ich mag das wirklich nicht. Aber es muss einen guten Grund geben, es so zu machen.

Antworten:


733

inArrayGibt den Index des Elements im Array zurück, kein Boolescher Wert, der angibt, ob das Element im Array vorhanden ist. Wenn das Element nicht gefunden wurde, -1wird es zurückgegeben.

Um zu überprüfen, ob sich ein Element im Array befindet, verwenden Sie:

if(jQuery.inArray("test", myarray) !== -1)

16
CoffeeScript:if jQuery.inArray('test', myarray) isn't -1
Joshua Pinter

9
Natürlich können Sie immer Ihre eigene, intuitive, Funktion wie definieren$.isInArray = function(test,array) { return $.inArray(test, array) !== -1; };
Wesley Smith

1
Oder kürzer: $.isInArray = function(item, array) { return !!~$.inArray(item, array); };(Ich würde solchen kryptischen Code in einer gut benannten Funktion behalten, um die Absicht klar zu halten :))
Dennis

2
Vielen Dank an @ Chips_100, dass Sie uns visuellen Lernenden gezeigt haben, wie man es richtig macht. Es wäre schön, wenn jQuery aktualisiert werden könnte, um dies in ihr eigenes Beispiel aufzunehmen.
Asherrard

2
Sie können auch verwendenif( $.inArray(test, array) > -1) { // do stuff }
MistyDawn

48

$.inArrayGibt den Index des Elements zurück, wenn es gefunden wurde, oder -1, wenn dies nicht der Fall ist - kein boolescher Wert. Das ist also richtig

if(jQuery.inArray("test", myarray) != -1) {
    console.log("is in array");
} else {
    console.log("is NOT in array");
} 

26

Die Antwort stammt aus dem ersten Absatz der Dokumentationsprüfung, wenn die Ergebnisse größer als -1 sind, nicht wenn sie wahr oder falsch sind.

Die $ .inArray () -Methode ähnelt der nativen .indexOf () -Methode von JavaScript, da sie -1 zurückgibt, wenn keine Übereinstimmung gefunden wird. Wenn das erste Element im Array mit dem Wert übereinstimmt, gibt $ .inArray () 0 zurück.

Da JavaScript 0 als lose gleich falsch behandelt (dh 0 == falsch, aber 0! == falsch), müssen wir prüfen, ob der Wert innerhalb des Arrays nicht gleich (oder größer als) ist ) -1.


23

Die richtige Art der Verwendung inArray(x, arr)besteht darin , sie überhaupt nicht zu verwenden und stattdessen zu verwenden arr.indexOf(x).

Der offizielle Standardname ist auch klarer in 0Bezug auf die Tatsache, dass der zurückgegebene Wert ein Index ist. Wenn also das übergebene Element das erste ist, erhalten Sie ein zurück (das ist in Javascript falsch).

(Beachten Sie, dass arr.indexOf(x)sich in den Internet Explorer bis IE9 nicht unterstützt , wenn Sie also IE8 unterstützen müssen und früher, das wird nicht funktionieren, und die jQuery - Funktion ist eine bessere Alternative.)


1
Ich muss zustimmen. Der Name inArray ist verwirrend. Es scheint, dass es einen Booleschen Wert zurückgeben sollte, aber es macht genau das gleiche wie indexOf
Enrique Moreno Tent

Jedes $.inArrayMal, wenn ich zu Beginn eines Codes einen Fehler behoben habe, stöhne ich. Auf jeden Fall sollte dies die akzeptierte Antwort sein.
Aluan Haddad

11

Wenn Sie ein bisschen ausgefallen sein möchten, können Sie die Operatoren bitweise not (~) und logisch not (!) Verwenden, um das Ergebnis der inArray-Funktion in einen booleschen Wert zu konvertieren.

if(!!~jQuery.inArray("test", myarray)) {
    console.log("is in array");
} else {
    console.log("is NOT in array");
}

4
Die Verwendung von bitweisen Operatoren ist in den gängigen JavaScript-Codierungsstandards generell verboten / verpönt. Wenn Sie also einen Linter (jshint, eslint usw.) verwenden, erhalten Sie diesen wahrscheinlich nicht durch Codeüberprüfung. Die Lösung funktioniert jedoch.
jhrr

8

Ich benutze normalerweise

if(!(jQuery.inArray("test", myarray) < 0))

oder

if(jQuery.inArray("test", myarray) >= 0)

3
Noch besser ...if( $.inArray("test", myarray) > -1 )
MistyDawn

8

Die Methode jQuery inArray () wird verwendet, um einen Wert in einem Array zu suchen und seinen Index zurückzugeben, keinen booleschen Wert. Und wenn der Wert nicht gefunden wurde, wird -1 zurückgegeben.

Um zu überprüfen, ob ein Wert in einem Array vorhanden ist, gehen Sie wie folgt vor:

myArray = new Array("php", "tutor");
if( $.inArray("php", myArray) !== -1 ) {

    alert("found");
}

Referenz


7

Das inArray Funktion gibt den Index des als erstes Argument angegebenen Objekts an die Funktion im Array zurück, das als zweites Argument an die Funktion geliefert wurde.

Wenn inArrayzurückkommt0 wird angezeigt, dass das erste Argument an der ersten Position des angegebenen Arrays gefunden wurde.

Um inArrayinnerhalb einer if-Anweisung zu verwenden, verwenden Sie:

if(jQuery.inArray("test", myarray) != -1) {
    console.log("is in array");
} else {
    console.log("is NOT in array");
}

inArrayGibt zurück, -1wenn das erste an die Funktion übergebene Argument nicht in dem als zweites Argument übergebenen Array gefunden wird.


5

Anstatt zu verwenden jQuery.inArray(), können Sie auch die includesMethode für das int-Array verwenden:

var array1 = [1, 2, 3];

console.log(array1.includes(2));
// expected output: true

var pets = ['cat', 'dog', 'bat'];

console.log(pets.includes('cat'));
// expected output: true

console.log(pets.includes('at'));
// expected output: false

Überprüfen Sie den offiziellen Beitrag hier


1
Includes wird von IE nicht unterstützt - :: use indeOf
anoldermark

3

jQuery.inArray () gibt den Index des Elements im Array zurück oder -1, wenn das Element nicht gefunden wurde. Lesen Sie hier mehr: jQuery.inArray ()


3

Es wird der Index des Elements im Array zurückgegeben. Wenn es nicht gefunden wird, erhalten Sie-1


3

Wenn wir überprüfen möchten, ob sich ein Element in einer Reihe von Elementen befindet, können wir beispielsweise Folgendes tun:

var checkboxes_checked = $('input[type="checkbox"]:checked');

// Whenever a checkbox or input text is changed
$('input[type="checkbox"], input[type="text"]').change(function() {
    // Checking if the element was an already checked checkbox
    if($.inArray( $(this)[0], checkboxes_checked) !== -1) {
        alert('this checkbox was already checked');
    }
}

2
/^(one|two|tree)$/i.test(field) // field = Two; // true
/^(one|two|tree)$/i.test(field) // field = six; // false
/^(раз|два|три)$/ui.test(field) // field = Три; // true

Dies ist nützlich, um dynamische Variablen zu überprüfen. Diese Methode ist leicht zu lesen.


2

$.inArray()führt genau das Gleiche aus wie myarray.indexOf()und gibt den Index des Elements zurück, dessen Existenz Sie im Array überprüfen. Es ist nur mit früheren Versionen von IE vor IE9 kompatibel. Die beste Wahl ist wahrscheinlich die Verwendung, myarray.includes()die einen booleschen True / False-Wert zurückgibt. Im folgenden Snippet finden Sie Ausgabebeispiele für alle drei Methoden.

// Declare the array and define it's values
var myarray = ['Cat', 'Dog', 'Fish'];

// Display the return value of each jQuery function 
// when a radio button is selected
$('input:radio').change( function() {

  // Get the value of the selected radio
  var selectedItem = $('input:radio[name=arrayItems]:checked').val();
  $('.item').text( selectedItem );
  
  // Calculate and display the index of the selected item
  $('#indexVal').text( myarray.indexOf(selectedItem) );
  
  // Calculate and display the $.inArray() value for the selected item
  $('#inArrVal').text( $.inArray(selectedItem, myarray) );
  
  // Calculate and display the .includes value for the selected item
  $('#includeVal').text( myarray.includes(selectedItem) );
});
#results { line-height: 1.8em; }
#resultLabels { width: 14em; display: inline-block; margin-left: 10px; float: left; }
label { margin-right: 1.5em; }
.space { margin-right: 1.5em; }
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>

Click a radio button to display the output of
&nbsp;<code>$.inArray()</code>
&nbsp;vs. <code>myArray.indexOf()</code>
&nbsp;vs. <code>myarray.includes()</code>
&nbsp;when tested against
&nbsp;<code>myarray = ['Cat', 'Dog', 'Fish'];</code><br><br>

<label><input type="radio" name="arrayItems" value="Cat"> Cat</label>
<label><input type="radio" name="arrayItems" value="Dog"> Dog</label>
<label><input type="radio" name="arrayItems" value="Fish"> Fish</label>  
<label><input type="radio" name="arrayItems" value="N/A"> ← Not in Array</label>
<br><br>

<div id="results">
  <strong>Results:</strong><br>
  <div id="resultLabels">
    myarray.indexOf( "<span class="item">item</span>" )<br>
    $.inArray( "<span class="item">item</span>", myarray )<br>
    myarray.includes( "<span class="item">item</span>" )
  </div>
  <div id="resultOutputs">
    <span class="space">=</span><span id="indexVal"></span><br>
    <span class="space">=</span><span id="inArrVal"></span><br>
    <span class="space">=</span><span id="includeVal"></span>
  </div>
 </div>


Es sollte beachtet werden, dass $.inArraydies der goldene Standard sein sollte, wenn Sie Zugriff auf die jQuery-Bibliothek haben. Andernfalls .indexOfsollte stattdessen JavaScript mit einer Polyfüllung für IE8 verwendet werden. Halte dich fern von modernen Dingen wie .includes().
Alexander Dixon

1

Mann, überprüfen Sie das Dokument .

zum Beispiel:

var arr = [ 4, "Pete", 8, "John" ];
console.log(jQuery.inArray( "John", arr ) == 3);

1

Aus irgendeinem Grund funktioniert es nicht richtig, wenn Sie versuchen, nach einem jquery-DOM-Element zu suchen. Das Umschreiben der Funktion würde also den Trick machen:

function isObjectInArray(array,obj){
    for(var i = 0; i < array.length; i++) {
        if($(obj).is(array[i])) {
            return i;
        }
    }
    return -1;
}

1

var abc = {
      "partner": {
        "name": "North East & Cumbria (EDT)",
        "number": "01915008717",
        "areas": {
        "authority": ["Allerdale", "Barrow-in-Furness", "Carlisle"]
        }
      }
    };
    
    
    $.each(abc.partner.areas, function(key, val){
     console.log(val);
      if(jQuery.inArray("Carlisle", val)) {
        console.log(abc.partner.number);
    }
    });
<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>


0

Nur niemand benutzt $statt jQuery:

if ($.inArray(nearest.node.name, array)>=0){
   console.log("is in array");
}else{
   console.log("is not in array");
}

Ich bin nur neugierig warum? Gibt es ein ungewöhnliches Kompatibilitätsproblem, das dadurch verursacht wird? Ich hatte noch nie ein Problem mit dem $statt jQuery.
MistyDawn
Durch die Nutzung unserer Website bestätigen Sie, dass Sie unsere Cookie-Richtlinie und Datenschutzrichtlinie gelesen und verstanden haben.
Licensed under cc by-sa 3.0 with attribution required.