jQuery.inArray(),如何正确使用?
Posted
技术标签:
【中文标题】jQuery.inArray(),如何正确使用?【英文标题】:jQuery.inArray(), how to use it right? 【发布时间】:2013-09-22 22:32:43 【问题描述】:我第一次使用jQuery.inArray()
,它的行为有点奇怪。
如果对象在数组中,它将返回 0,但 0 在 javascript 中为 false。所以下面会输出:"is NOT in array"
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)
但这会使代码不可读。特别是对于不了解此功能的人。他们会期望 jQuery.inArray("test", myarray) 当 "test" 在数组中时返回 true。
所以我的问题是,为什么要这样做?我真的不喜欢这个。但这样做一定有充分的理由。
【问题讨论】:
【参考方案1】:inArray
返回数组中元素的索引,而不是指示该项目是否存在于数组中的布尔值。如果没有找到该元素,则返回-1
。
所以,要检查一个项目是否在数组中,请使用:
if(jQuery.inArray("test", myarray) !== -1)
【讨论】:
CoffeeScript:if jQuery.inArray('test', myarray) isn't -1
当然,您可以随时定义自己的、更直观的函数,例如$.isInArray = function(test,array) return $.inArray(test, array) !== -1; ;
或更短:$.isInArray = function(item, array) return !!~$.inArray(item, array); ;
(我会在一个命名良好的函数中保留这样的神秘代码,以保持意图清晰:))
感谢 @Chips_100 向我们视觉学习者展示了如何正确地做到这一点,如果 jQuery 可以更新以将其包含在他们自己的示例中,那就太好了。
你也可以使用if( $.inArray(test, array) > -1) // do stuff
【参考方案2】:
$.inArray
如果找到则返回元素的 index,否则返回 -1 -- 不是布尔值。所以正确的是
if(jQuery.inArray("test", myarray) != -1)
console.log("is in array");
else
console.log("is NOT in array");
【讨论】:
【参考方案3】:答案来自文档的第一段检查结果是否大于-1,而不是它是真还是假。
$.inArray() 方法类似于 JavaScript 的原生 .indexOf() 方法,因为它在找不到匹配项时返回 -1。如果数组中的第一个元素与值匹配,则 $.inArray() 返回 0。
因为 JavaScript 将 0 视为松散地等于 false(即 0 == false,但 0 !== false),如果我们要检查数组中是否存在值,我们需要检查它是否不等于 (或大于)-1。
【讨论】:
【参考方案4】:使用inArray(x, arr)
的正确方法是根本不使用它,而是使用arr.indexOf(x)
。
官方标准名称也更清楚地表明返回值是一个索引,因此如果传递的元素是第一个元素,您将返回 0
(在 Javascript 中是假的)。
(请注意,arr.indexOf(x)
IE9 之前在 Internet Explorer 中不支持,因此如果您需要支持 IE8 及更早版本,这将不起作用,而 jQuery 函数是一个更好的选择。)
【讨论】:
我必须同意。 inArray 的名称令人困惑。它似乎应该返回一个布尔值,但它与 indexOf 完全相同 每次我$.inArray
在一些代码的开头使用我必须去修复一个错误,我呻吟。无论如何,这应该是公认的答案。【参考方案5】:
jQuery inArray() 方法用于在数组中搜索一个值并返回其索引而不是布尔值。如果未找到该值,它将返回 -1。
因此,要检查数组中是否存在值,请遵循以下做法:
myArray = new Array("php", "tutor");
if( $.inArray("php", myArray) !== -1 )
alert("found");
Reference
【讨论】:
【参考方案6】:或者,如果您想更花哨,可以使用按位非 (~) 和逻辑非 (!) 运算符将 inArray 函数的结果转换为布尔值。
if(!!~jQuery.inArray("test", myarray))
console.log("is in array");
else
console.log("is NOT in array");
【讨论】:
在常见的 JavaScript 编码标准中,按位运算符的使用通常是被禁止/不赞成的。因此,如果您使用的是 linter(jshint、eslint 等),您可能无法通过代码审查获得此信息。解决方案虽然有效。【参考方案7】:除了使用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
查看官方帖子here
【讨论】:
IE 不支持包含 -:: 使用 indeOf【参考方案8】:inArray
函数返回作为函数的第二个参数提供的数组中作为函数的第一个参数提供的对象的索引。
当inArray
返回0
时,表示在提供的数组的第一个位置找到了第一个参数。
要在 if 语句中使用 inArray
,请使用:
if(jQuery.inArray("test", myarray) != -1)
console.log("is in array");
else
console.log("is NOT in array");
当传递给函数的第一个参数在作为第二个参数传递的数组中找不到时,inArray
返回 -1
。
【讨论】:
【参考方案9】:我经常用
if(!(jQuery.inArray("test", myarray) < 0))
或
if(jQuery.inArray("test", myarray) >= 0)
【讨论】:
更好...if( $.inArray("test", myarray) > -1 )
【参考方案10】:
inArray 返回数组中元素的索引。如果没有找到元素,则返回-1,否则返回元素索引。
if(jQuery.inArray("element", myarray) === -1)
console.log("Not exists in array");
else
console.log("Exists in array");
【讨论】:
【参考方案11】:jQuery.inArray() 返回数组中项目的索引,如果未找到项目,则返回 -1。在这里阅读更多:jQuery.inArray()
【讨论】:
【参考方案12】:它将返回数组中项目的索引。如果没有找到你会得到-1
【讨论】:
【参考方案13】:如果我们想检查一个元素是否在一组元素中,我们可以这样做:
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');
【讨论】:
【参考方案14】: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>
【讨论】:
【参考方案15】:/^(one|two|tree)$/i.test(field) // field = Two; // true
/^(one|two|tree)$/i.test(field) // field = six; // false
/^(раз|два|три)$/ui.test(field) // field = Три; // true
这对于检查动态变量很有用。此方法易于阅读。
【讨论】:
【参考方案16】:$.inArray()
与myarray.indexOf()
执行完全相同的事情,并返回您正在检查数组是否存在的项目的索引。它只是与 IE9 之前的早期版本的 IE 兼容。最好的选择可能是使用myarray.includes()
,它返回一个布尔真/假值。请参阅下面的 sn-p 了解所有 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
<code>$.inArray()</code>
vs. <code>myArray.indexOf()</code>
vs. <code>myarray.includes()</code>
when tested against
<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 库的黄金标准。否则,应该使用带有 IE8 的 polyfill 的 JavaScript .indexOf
。远离像.includes()
这样的现代东西。【参考方案17】:
伙计,检查doc。
例如:
var arr = [ 4, "Pete", 8, "John" ];
console.log(jQuery.inArray( "John", arr ) == 3);
【讨论】:
【参考方案18】:由于某种原因,当您尝试检查 jquery DOM 元素时,它将无法正常工作。所以重写函数就可以了:
function isObjectInArray(array,obj)
for(var i = 0; i < array.length; i++)
if($(obj).is(array[i]))
return i;
return -1;
【讨论】:
【参考方案19】:只是没有人使用$
而不是jQuery
:
if ($.inArray(nearest.node.name, array)>=0)
console.log("is in array");
else
console.log("is not in array");
【讨论】:
我只是好奇为什么?这会导致一些不常见的兼容性问题吗?使用$
而不是jQuery
,我从来没有遇到过任何问题。【参考方案20】:
最短最简单的方法是。
arrayHere = ['cat1', 'dog2', 'bat3'];
if(arrayHere[any key want to search])
console.log("yes found in array");
【讨论】:
你能分享一些代码吗,我会检查并让你知道。它应该工作。我已经这样做了 @RyanArief 你能分享一些代码吗,我会告诉你为什么它不起作用。 var arrayHere = ['cat1', 'dog2', 'bat3']; if(arrayHere[0]) alert("在数组中找到是"); if(arrayHere[3]) alert("yes found second in array"); 在 "if(arrayHere[any key want to search])" 行上,你应该添加一些 "/' 否则 js 会将其视为变量。我们永远不知道程序员级别谁搜索这个主题所以请详细说明您的代码。以上是关于jQuery.inArray(),如何正确使用?的主要内容,如果未能解决你的问题,请参考以下文章
如何使用 jQuery.inArray 方法选择一组唯一的随机数(不重复)?
jQuery.inArray( value, array )