jQuery.inArray (), 올바르게 사용하는 방법?


345

처음 작업 할 jQuery.inArray()때 좀 이상하게 행동합니다.

객체가 배열에 있으면 0을 반환하지만 Javascript에서는 0이 false입니다. 따라서 다음과 같이 출력됩니다 : "is array in"

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

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

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 () 메서드와 유사합니다. 배열의 첫 번째 요소가 value와 일치하면 $ .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

11

또는 약간 공상을 얻으려면 비트 단위 not (~) 및 논리 not (!) 연산자를 사용하여 inArray 함수의 결과를 부울 값으로 변환 할 수 있습니다.

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

4
비트 단위 연산자의 사용은 일반적으로 일반적인 JavaScript 코딩 표준에서 금지되거나 뿌려집니다. 따라서 linter (jshint, eslint 등)를 사용하는 경우 코드 검토를 통해이를 얻을 수 없습니다. 솔루션은 작동합니다.
jhrr

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함수는 함수의 두 번째 인수로 제공된 배열에서 함수의 첫 번째 인수로 제공된 객체의 인덱스를 반환합니다.

inArray반환 되면 0제공된 배열의 첫 번째 위치에서 첫 번째 인수가 발견되었음을 나타냅니다.

사용하려면 inArrayif 문 사용에서 :

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

inArray-1함수에 전달 된 첫 번째 인수가 두 번째 인수로 전달 된 배열에서 발견되지 않으면를 반환합니다 .


5

사용하는 대신 int 배열에 메소드를 jQuery.inArray()사용할 수도 있습니다 includes.

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

3

jQuery.inArray ()는 배열에서 항목의 색인을 리턴하거나 항목을 찾을 수없는 경우 -1을 리턴합니다. 여기에서 더 읽으십시오 : jQuery.inArray ()


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 값을 반환하는 것이 가장 좋습니다 . 세 가지 방법의 출력 예는 아래의 스 니펫을 참조하십시오.

// 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 라이브러리에 액세스 할 수있는 경우 황금 표준 이 되어야합니다. 그렇지 않으면 .indexOf대신 IE8 용 폴리 필이있는 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.