jQuery.inArray (), como usá-lo certo?

345

A primeira vez que trabalho jQuery.inArray()e ela age meio estranha.

Se o objeto estiver na matriz, ele retornará 0, mas 0 é falso em Javascript. Portanto, o seguinte será exibido: "NÃO está na matriz"

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

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

Vou ter que alterar a instrução if para:

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

Mas isso torna o código ilegível. Especialmente para alguém que não conhece essa função. Eles esperam que o jQuery.inArray ("test", myarray) seja verdadeiro quando "test" estiver na matriz.

Então, minha pergunta é: por que isso é feito dessa maneira? Eu realmente não gosto disso. Mas deve haver uma boa razão para fazê-lo assim.

nbar
fonte

Respostas:

734

inArrayretorna o índice do elemento na matriz, não um booleano indicando se o item existe na matriz. Se o elemento não foi encontrado, -1será retornado.

Portanto, para verificar se um item está na matriz, use:

if(jQuery.inArray("test", myarray) !== -1)
Dennis
fonte
16
CoffeeScript:if jQuery.inArray('test', myarray) isn't -1
Joshua Pinter
9
Claro, você sempre pode definir o seu próprio mais intuitivo, função, como$.isInArray = function(test,array) { return $.inArray(test, array) !== -1; };
Wesley Smith
11
Ou mais curto: $.isInArray = function(item, array) { return !!~$.inArray(item, array); };(I iria manter o código críptico como aquele em uma função bem nomeado para manter o embora clara intenção :))
Dennis
2
Obrigado @ Chips_100 por nos mostrar aos alunos visuais como fazê-lo corretamente, seria bom se o jQuery pudesse atualizar para incluir isso em seu próprio exemplo.
Asherrard #
2
você também pode usarif( $.inArray(test, array) > -1) { // do stuff }
MistyDawn
48

$.inArrayretorna o índice do elemento se encontrado ou -1 se não for - não é um valor booleano. Então, o correto é

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

A resposta vem do primeiro parágrafo da documentação, verifique se os resultados são maiores que -1, não se são verdadeiros ou falsos.

O método $ .inArray () é semelhante ao método nativo .indexOf () do JavaScript, pois retorna -1 quando não encontra uma correspondência. Se o primeiro elemento dentro da matriz corresponder ao valor, $ .inArray () retornará 0.

Como o JavaScript trata 0 como fracamente igual a falso (ou seja, 0 == falso, mas 0! == falso), se estamos verificando a presença de valor na matriz, precisamos verificar se não é igual a (ou maior que ) -1.

Patsy Issa
fonte
23

A maneira correta de usar nãoinArray(x, arr) é usá-lo , e sim usar arr.indexOf(x).

O nome padrão oficial também é mais claro no fato de que o valor retornado é um índice, portanto, se o elemento passado for o primeiro, você receberá um a 0(que é falso em Javascript).

(Observe que o Internet Explorer nãoarr.indexOf(x) é suportado até o IE9 ; portanto, se você precisar dar suporte ao IE8 e versões anteriores, isso não funcionará e a função jQuery é uma alternativa melhor.)

6502
fonte
11
Eu tenho que concordar. O nome do inArray é confuso. Parece que deve retornar um boolean, mas ele faz exatamente o mesmo que indexOf
Enrique Moreno Tent
Toda vez que eu $.inArrayusei no início de algum código eu tenho que corrigir um erro, eu gemo. De qualquer forma, esta deve ser a resposta aceita.
Aluan Haddad 19/07
11

Ou, se você quiser ter um pouco de fantasia, pode usar os operadores bit a bit not (~) e Logical not (!) Para converter o resultado da função inArray em um valor booleano.

if(!!~jQuery.inArray("test", myarray)) {
    console.log("is in array");
} else {
    console.log("is NOT in array");
}
Jason
fonte
4
O uso de operadores bit a bit é geralmente proibido / desaprovado nos padrões comuns de codificação JavaScript. Portanto, se você estiver usando um linter (jshint, eslint etc.), provavelmente não conseguirá isso através da revisão de código. Solução funciona embora.
jhrr
8

Eu costumo usar

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

ou

if(jQuery.inArray("test", myarray) >= 0)
DDan
fonte
3
Ainda melhor ...if( $.inArray("test", myarray) > -1 )
MistyDawn
8

O método jQuery inArray () é usado para pesquisar um valor em uma matriz e retornar seu índice, não um valor booleano. E se o valor não foi encontrado, ele retornará -1.

Portanto, para verificar se um valor está presente em uma matriz, siga a prática abaixo:

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

    alert("found");
}

Referência

Hassan Amir Khan
fonte
7

A inArrayfunção retorna o índice do objeto fornecido como o primeiro argumento para a função na matriz fornecida como o segundo argumento para a função.

Quando inArrayretorna 0, indica que o primeiro argumento foi encontrado na primeira posição da matriz fornecida.

Para usar inArrayem uma instrução if, use:

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

inArrayretorna -1quando o primeiro argumento passado para a função não é encontrado na matriz passada como o segundo argumento.

Kevin Bowersox
fonte
5

Em vez de usar, jQuery.inArray()você também pode usar o includesmétodo para a matriz int:

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

confira post oficial aqui

Saurabh Solanki
fonte
11
includes não é suportado pelo IE - :: use indeOf
anoldermark
3

jQuery.inArray () retorna o índice do item na matriz ou -1 se o item não foi encontrado. Leia mais aqui: jQuery.inArray ()

Darvex
fonte
3

Ele retornará o índice do item na matriz. Se não for encontrado, você receberá-1

Johan
fonte
3

Se quisermos verificar se um elemento está dentro de um conjunto de elementos, podemos fazer, por exemplo:

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');
    }
}
Gustavo Andrade Ferreira
fonte
2
/^(one|two|tree)$/i.test(field) // field = Two; // true
/^(one|two|tree)$/i.test(field) // field = six; // false
/^(раз|два|три)$/ui.test(field) // field = Три; // true

Isso é útil para verificar variáveis ​​dinâmicas. Este método é fácil de ler.

Сергей Савельев
fonte
2

$.inArray()faz a mesma coisa exata como myarray.indexOf()e retorna o índice do item do qual você está verificando a matriz. É apenas compatível com versões anteriores do IE antes do IE9. A melhor opção é provavelmente usar, myarray.includes()que retorne um valor booleano verdadeiro / falso. Veja o trecho abaixo para obter exemplos de saída dos três métodos.

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

MistyDawn
fonte
Note-se que esse $.inArraydeve ser o padrão-ouro se você tiver acesso à biblioteca jQuery. Caso contrário, o JavaScript .indexOfcom um polyfill para IE8 deve ser usado. Fique longe desse material moderno como .includes().
Alexander Dixon
1

Cara, verifique o doc .

por exemplo:

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

Por algum motivo, quando você tenta verificar se há um elemento DOM do jquery, ele não funcionará corretamente. Então, reescrever a função faria o truque:

function isObjectInArray(array,obj){
    for(var i = 0; i < array.length; i++) {
        if($(obj).is(array[i])) {
            return i;
        }
    }
    return -1;
}
Joeneter10
fonte
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>

abhinavxeon
fonte
0

Apenas ninguém usa em $vez de jQuery:

if ($.inArray(nearest.node.name, array)>=0){
   console.log("is in array");
}else{
   console.log("is not in array");
}
William Hu
fonte
Só estou curioso por quê? Existe algum problema de compatibilidade incomum que isso causa? Eu nunca tive nenhum tipo de problema usando o em $vez de jQuery.
MistyDawn