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。

所以我的问题是,为什么要这样做呢?我真的不喜欢这个。但是一定有充分的理由这样做。

Answers:


733

inArray返回数组中元素的索引,而不是指示数组中是否存在该项的布尔值。如果找不到该元素,-1将返回。

因此,要检查项目是否在数组中,请使用:

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

16
CoffeeScript:if jQuery.inArray('test', myarray) isn't -1
约书亚·品特

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()方法类似于JavaScript的本机.indexOf()方法,因为它找不到匹配项时返回-1。如果数组中的第一个元素与value匹配,则$ .inArray()返回0。

因为JavaScript将0视为宽松地等于false(即0 == false,但0!== false),所以如果我们要检查数组中是否存在值,则需要检查它是否等于(或大于) -1。


23

使用正确的方法inArray(x, arr)不使用它在所有的,并使用替代arr.indexOf(x)

官方标准名称也更清楚,因为返回值是一个索引,因此,如果传递的元素是第一个元素,则将返回a 0(这在Javascript中是虚假的)。

(请注意,arr.indexOf(x)不是在Internet Explorer支持IE9之前,因此,如果您需要支持IE8和更早版本,这将无法工作,而jQuery函数是一个更好的选择。)


1
我必须同意。inArray的名称令人困惑。似乎它应该返回一个布尔值,但它的作用与indexOf完全相同
Enrique Moreno Tent

每当我$.inArray在一些代码的开头使用时,我都要去修正一个错误,我吟。无论如何,这应该是公认的答案。
阿兰·哈达德

11

或者,如果您想花一点点时间,可以使用按位非(〜)和逻辑非(!)运算符将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,表明在提供的数组的第一个位置找到了第一个参数。

inArray在if语句中使用,请使用:

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

inArray-1当在作为第二个参数传递的数组中找不到传递给函数的第一个参数时,返回。


5

jQuery.inArray()除了使用,您还可以includes对int array 使用method:

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不支持include-:: use indeOf
anoldermark


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()EXACT SAME THING用作EXACT SAME THINGmyarray.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>


应该注意的$.inArray是,如果您有权访问jQuery库,这应该是黄金标准。否则,.indexOf应改为使用带有针对IE8的polyfill的JavaScript 。远离像这样的现代东西.includes()
亚历山大·迪克森


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
By using our site, you acknowledge that you have read and understand our Cookie Policy and Privacy Policy.
Licensed under cc by-sa 3.0 with attribution required.