jQuery.inArray()、それを正しく使用する方法?


345

私が初めて作業するときjQuery.inArray()、それはちょっと奇妙に動作します。

オブジェクトが配列内にある場合は0を返しますが、JavaScriptでは0がfalseです。したがって、次のように出力されます:「配列にありません」

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

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

ifステートメントを次のように変更する必要があります。

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

しかし、これはコードを読みにくくします。特にこの機能を知らない人のために。「test」が配列にある場合、jQuery.inArray( "test"、myarray)がtrueになることを期待します。

だから私の質問は、なぜそれがこのように行われるのですか?本当に嫌いです。しかし、そのようにするのには十分な理由があるはずです。

回答:


734

inArray項目が配列に存在するかどうかを示すブール値ではなく、配列内の要素のインデックスを返します。要素が見つからなかった場合は、-1が返されます。

したがって、項目が配列にあるかどうかを確認するには、次を使用します。

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

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

9
もちろん、次のような独自の、より直感的な関数をいつでも定義できます$.isInArray = function(test,array) { return $.inArray(test, array) !== -1; };
Wesley Smith

1
または短く:($.isInArray = function(item, array) { return !!~$.inArray(item, array); };意図を明確に保つために、よく名前が付けられた関数にそのような暗号コードを保持します:))
Dennis

2
ビジュアル学習者に正しい方法を教えてくれた@ Chips_100に感謝します。jQueryを更新して、それを独自の例に含めることができればすばらしいと思います。
asherrard、2015

2
使用することもできますif( $.inArray(test, array) > -1) { // do stuff }
MistyDawn

48

$.inArray見つかった場合は要素のインデックスを返し、見つからない場合は-1を返します。ブール値ではありません。だから正しいです

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

26

その答えは、ドキュメントチェックの最初の段落から得られます。結果が-1より大きいかどうかは、真か偽かではありません。

$ .inArray()メソッドは、一致が見つからない場合に-1を返すという点でJavaScriptのネイティブの.indexOf()メソッドに似ています。配列内の最初の要素が値と一致する場合、$。inArray()は0を返します。

JavaScriptは0を大まかにfalseと見なすため(つまり、0 == false、ただし0!== false)、配列内の値の存在を確認する場合は、等しくない(またはそれ以上)かどうかを確認する必要があります)-1。


23

正しい使用方法inArray(x, arr)は、まったく使用せず、代わりに使用することarr.indexOf(x)です。

正式な標準名は、返された値がインデックスであるため、渡された要素が最初の要素である場合0(JavaScriptでは不正)が返されるという事実についても明確です。

(注arr.indexOf(x)れるIE9まで、Internet Explorerでサポートされていないので、以前のIE8をサポートし、する必要がある場合は、この意志はない仕事、およびjQueryの機能がより良い代替手段です。)


1
同意する必要があります。inArrayの名前は紛らわしいです。ブール値を返すはずですが、indexOfとまったく同じです
Enrique Moreno Tent

$.inArrayいくつかのコードの冒頭で使用するたびに、バグを修正する必要があります。とにかく、これは受け入れられる答えになるはずです。
Aluan Haddad 2017

11

または、少し凝ったものにしたい場合は、ビット単位のnot(〜)および論理not(!)演算子を使用して、inArray関数の結果をブール値に変換できます。

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

4
一般的なJavaScriptコーディング標準では、ビットごとの演算子の使用は一般に禁止されています。したがって、リンター(jshint、eslintなど)を使用している場合は、コードレビューでこれを取得できない可能性があります。ソリューションは機能します。
2016

8

私は通常使用します

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

または

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

3
さらに良い...if( $.inArray("test", myarray) > -1 )
MistyDawn

8

jQuery inArray()メソッドは、配列内の値を検索し、ブール値ではなくそのインデックスを返すために使用されます。値が見つからなかった場合は、-1を返します。

したがって、値が配列に存在するかどうかを確認するには、以下の方法に従います。

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

    alert("found");
}

参照


7

inArray関数は、関数への第2引数として指定配列内の関数の最初の引数として指定されたオブジェクトのインデックスを返します。

inArray返された0場合は、最初の引数が指定された配列の最初の位置で見つかったことを示しています。

使用するには、inArrayif文の使用中に:

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

inArray-1関数に渡された最初の引数が2番目の引数として渡された配列に見つからない場合に返されます。


5

を使用jQuery.inArray()する代わりにincludes、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

公式投稿はこちら


1
インクルードはIEではサポートされていません-:: indeOfを使用してください
anoldermark 2018


3

配列内のアイテムのインデックスを返します。見つからない場合は、-1


3

要素が要素のセットの内部にあることを確認したい場合は、たとえば次のようにします。

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

これは動的変数をチェックするのに役立ちます。この方法は読みやすいです。


2

$.inArray()まったく同じことをとしてmyarray.indexOf()、あなたがの存在のための配列をチェックされている項目のインデックスを返します。IE9より前の以前のバージョンのIEと互換性があるだけです。最良の選択はmyarray.includes()、ブール値のtrue / false値を返すものを使用することです。3つのメソッドすべての出力例については、以下のスニペットを参照してください。

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


$.inArrayjQueryライブラリにアクセスできる場合は、それが黄金の標準であることに注意してください。それ以外の場合は、.indexOfIE8のポリフィルを使用したJavaScript を代わりに使用する必要があります。のような現代的なものから離れてください.includes()
Alexander Dixon


1

何らかの理由でjquery DOM要素を確認しようとすると、正しく動作しません。したがって、関数を書き直すとうまくいきます。

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

$代わりに誰も使用しませんjQuery

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

なぜだろう?これによって引き起こされる一般的でない互換性の問題はありますか?の$代わりにを使用して問題が発生したことはありませんjQuery
MistyDawn
弊社のサイトを使用することにより、あなたは弊社のクッキーポリシーおよびプライバシーポリシーを読み、理解したものとみなされます。
Licensed under cc by-sa 3.0 with attribution required.