jQuery.inArray (), comment l'utiliser correctement?


345

La première fois que je travaille avec jQuery.inArray()et ça fait un peu bizarre.

Si l'objet est dans le tableau, il retournera 0, mais 0 est faux en Javascript. Donc, ce qui suit affichera: "n'est PAS dans le tableau"

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

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

Je vais devoir changer la déclaration if en:

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

Mais cela rend le code illisible. Surtout pour quelqu'un qui ne connaît pas cette fonction. Ils s'attendront à ce que jQuery.inArray ("test", myarray) donne la valeur true lorsque "test" est dans le tableau.

Alors ma question est, pourquoi est-ce fait de cette façon? Je n'aime vraiment pas ça. Mais il doit y avoir une bonne raison de le faire comme ça.

Réponses:


734

inArrayrenvoie l'index de l'élément dans le tableau, pas un booléen indiquant si l'élément existe dans le tableau. Si l'élément est introuvable, -1sera retourné.

Donc, pour vérifier si un élément est dans le tableau, utilisez:

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

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

9
Bien sûr, vous pouvez toujours définir votre propre fonction, plus intuitive, comme$.isInArray = function(test,array) { return $.inArray(test, array) !== -1; };
Wesley Smith

1
Ou plus court: $.isInArray = function(item, array) { return !!~$.inArray(item, array); };(je garderais du code crypté comme ça dans une fonction bien nommée pour garder l'intention claire cependant :))
Dennis

2
Merci @ Chips_100 de nous avoir montré aux apprenants visuels comment le faire correctement, ce serait bien si jQuery pouvait mettre à jour pour inclure cela dans leur propre exemple.
asherrard

2
vous pouvez également utiliserif( $.inArray(test, array) > -1) { // do stuff }
MistyDawn

48

$.inArrayrenvoie l' index de l'élément s'il est trouvé ou -1 s'il ne l'est pas - pas une valeur booléenne. Donc, le bon est

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

26

La réponse vient du premier paragraphe de la vérification de la documentation si les résultats sont supérieurs à -1, pas si c'est vrai ou faux.

La méthode $ .inArray () est similaire à la méthode native .indexOf () de JavaScript car elle renvoie -1 lorsqu'elle ne trouve pas de correspondance. Si le premier élément du tableau correspond à la valeur, $ .inArray () renvoie 0.

Parce que JavaScript traite 0 comme vaguement égal à faux (c'est-à-dire 0 == faux, mais 0! == faux), si nous vérifions la présence de valeur dans le tableau, nous devons vérifier si elle n'est pas égale à (ou supérieure à ) -1.


23

La bonne façon d'utiliser inArray(x, arr)n'est pas du tout de l'utiliser , et d'utiliser à la place arr.indexOf(x).

Le nom standard officiel est également plus clair sur le fait que la valeur retournée est un index, donc si l'élément passé est le premier, vous obtiendrez un 0(c'est-à-dire une fausse en Javascript).

(Notez que cela arr.indexOf(x)n'est pas pris en charge dans Internet Explorer jusqu'à IE9 , donc si vous devez prendre en charge IE8 et versions antérieures, cela ne fonctionnera pas et la fonction jQuery est une meilleure alternative.)


1
Je suis d'accord. Le nom de inArray prête à confusion. Il semble qu'il devrait renvoyer un booléen, mais il fait exactement la même chose que indexOf
Enrique Moreno Tent

Chaque fois que j'ai $.inArrayutilisé au début du code, je dois corriger un bug, je gémis. Quoi qu'il en soit, cela devrait être la réponse acceptée.
Aluan Haddad

11

Ou si vous voulez obtenir un peu de fantaisie, vous pouvez utiliser les opérateurs pas au bit (~) et non logique (!) Pour convertir le résultat de la fonction inArray en valeur booléenne.

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

4
L'utilisation d'opérateurs au niveau du bit est généralement interdite / désapprouvée dans les normes de codage JavaScript courantes. Donc, si vous utilisez un linter (jshint, eslint etc.), il est probable que vous n'obtiendrez pas cela grâce à la révision du code. La solution fonctionne cependant.
jhrr

8

J'utilise habituellement

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

ou

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

3
Encore mieux ...if( $.inArray("test", myarray) > -1 )
MistyDawn

8

La méthode jQuery inArray () est utilisée pour rechercher une valeur dans un tableau et renvoyer son index et non une valeur booléenne. Et si la valeur n'a pas été trouvée, elle renverra -1.

Donc, pour vérifier si une valeur est présente dans un tableau, suivez la pratique ci-dessous:

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

    alert("found");
}

Référence


7

La inArrayfonction renvoie l'index de l'objet fourni comme premier argument à la fonction dans le tableau fourni comme deuxième argument à la fonction.

Lorsque inArrayrenvoie, 0cela indique que le premier argument a été trouvé à la première position du tableau fourni.

Pour utiliser inArraydans une instruction if, utilisez:

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

inArrayretourne -1lorsque le premier argument passé à la fonction est introuvable dans le tableau passé comme deuxième argument.


5

au lieu d'utiliser, jQuery.inArray()vous pouvez également utiliser la includesméthode pour int array:

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

consultez le post officiel ici


1
includes n'est pas pris en charge par IE - :: use indeOf
anoldermark

3

jQuery.inArray () renvoie l'index de l'élément dans le tableau, ou -1 si l'élément n'est pas trouvé. En savoir plus ici: jQuery.inArray ()


3

Il renverra l'index de l'élément dans le tableau. S'il n'est pas trouvé, vous obtiendrez-1


3

Si nous voulons vérifier qu'un élément est à l'intérieur d'un ensemble d'éléments, nous pouvons faire par exemple:

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

Ceci est utile pour vérifier les variables dynamiques. Cette méthode est facile à lire.


2

$.inArray()effectue la MÊME CHOSE EXACT que myarray.indexOf()et renvoie l'index de l'élément dont vous vérifiez l'existence dans le tableau. Il est juste compatible avec les versions antérieures d'IE avant IE9. Le meilleur choix est probablement d'utiliser myarray.includes()qui retourne une valeur booléenne vrai / faux. Voir l'extrait ci-dessous pour des exemples de sortie des trois méthodes.

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


Il convient de noter que cela $.inArraydevrait être le standard d'or si vous avez accès à la bibliothèque jQuery. Sinon, JavaScript .indexOfavec un polyfill pour IE8 doit être utilisé à la place. Éloignez-vous de ces trucs modernes comme .includes().
Alexander Dixon

1

Mec, regarde le doc .

par exemple:

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

1

Pour une raison quelconque, lorsque vous essayez de rechercher un élément DOM jquery, il ne fonctionnera pas correctement. Donc, réécrire la fonction ferait l'affaire:

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

Personne ne l'utilise $au lieu de jQuery:

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

Je suis juste curieux de savoir pourquoi? Y a-t-il un problème de compatibilité inhabituel que cela provoque? Je n'ai jamais eu de problème en utilisant le $au lieu de jQuery.
MistyDawn

0

le moyen le plus court et le plus simple est.

arrayHere = ['cat1', 'dog2', 'bat3']; 

if(arrayHere[any key want to search])   
   console.log("yes found in array");
En utilisant notre site, vous reconnaissez avoir lu et compris notre politique liée aux cookies et notre politique de confidentialité.
Licensed under cc by-sa 3.0 with attribution required.