jQuery.inArray (), як правильно ним користуватися?


345

Перший раз працюю, jQuery.inArray()і це виглядає якось дивно.

Якщо об’єкт знаходиться в масиві, він поверне 0, але 0 в помилці JavaScript невірно. Отже, виведеться наступне: "НЕ в масиві"

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 ("тест", myarray) дає істину, коли "test" знаходиться в масиві.

Отже, моє запитання: чому це робиться саме так? Мені це справді не подобається. Але повинен бути вагомий привід зробити це так.

Відповіді:


734

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; };
Веслі Сміт

1
Або коротше: $.isInArray = function(item, array) { return !!~$.inArray(item, array); };(Я б тримав подібний криптовалютний код у добре названій функції, щоб не мати наміру зрозумілим :))
Денніс

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 () схожий на початковий метод JavaScript .indexOf (), оскільки він повертає -1, коли не знаходить відповідності. Якщо перший елемент масиву відповідає значенню, $ .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
Енріке Морено Монт

Кожен раз, коли я $.inArrayвикористовував на початку якийсь код, я мушу виправити помилку, я стогну. У будь-якому випадку це має бути прийнята відповідь.
Aluan Haddad

11

Або якщо ви хочете трохи пофантазувати, ви можете скористатися операторами побітових не (~) та логічних (не!) Конвертацій результату функції inArray у булеве значення.

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

4
Використання побітових операторів, як правило, заборонено / нахмурено в загальних стандартах кодування JavaScript. Отже, якщо ви використовуєте лінійку (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

The 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 масиву:

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 не підтримується IE - :: use 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()і повертає індекс елемента, на якому ви перевіряєте масив на наявність. Він просто сумісний з більш ранніми версіями IE до IE9. Найкращим вибором, мабуть, є використання, 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слід використовувати JavaScript з поліфіл для IE8. Тримайтеся подалі від таких сучасних речей, як .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

Використовуючи наш веб-сайт, ви визнаєте, що прочитали та зрозуміли наші Політику щодо файлів cookie та Політику конфіденційності.
Licensed under cc by-sa 3.0 with attribution required.