Проверьте, содержит ли массив значение в JavaScript

  1. Использование функции .indexOf() для проверки наличия значения в массиве в JavaScript
  2. Использование функции .includes() для проверки наличия значения в массиве в JavaScript
  3. Использование функции .find() для поиска элемента в массиве в JavaScript
  4. Использование функции .filter() для поиска элемента в массиве в JavaScript
  5. Использование простого цикла for для поиска элемента
  6. Примечание

Часто мы оказываемся в ситуации, чтобы проверить, содержит ли массив значение в JavaScript. Несмотря на то, что функции поиска могут быть закодированы с помощью базовых синтаксисов JavaScript с использованием циклов, полезно знать встроенные функции, доступные для поиска по массиву в JavaScript, их использование, типы возврата и поведение. Это значительно упрощает нашу задачу, поскольку нам нужно меньше писать код. Функциональность будет более эффективной и менее подверженной ошибкам со встроенными функциями. Давайте посмотрим, как искать элемент в массиве.

Использование функции .indexOf() для проверки наличия значения в массиве в JavaScript

Функция .indexOf() - это часто используемая функция в javascript. Он хорошо работает при поиске элемента в массиве или даже в строке.

Синтаксис

indexOf(element, index)

Параметр

Для поиска требуется элемент в качестве параметра. И необязательный параметр, который сообщает функции индекс, с которого должен начинаться поиск (начиная с 0). Если мы предоставим отрицательное значение, это будет означать, что поиск будет начинаться с конца массива в указанной позиции.

Возвращаемое значение

Функция возвращает индекс искомого элемента, начиная с 0 в массиве, если ей удалось найти элемент. В противном случае он вернет -1, указывая на то, что элемент не может быть найден. Если в массиве более одного совпадения, то функция .indexOf() вернет индекс первого совпадения.

Поддержка браузера

Функция .indexOf() поддерживается всеми основными версиями браузеров.

Применение

Использование функции indexOf() для массива выглядит следующим образом.

let fruits = ["Apple", "Mango", "Pear", "Peach"];
console.log(fruits.indexOf("Pear"));
console.log(fruits.indexOf("Tomato"))

Выход:

2
-1

Для функции поиска мы проверяем, не превышает ли возвращаемый тип .indexOf (searchText) значение -1. Если да, то результат поиска должен быть true иначе false. Давайте посмотрим на тот же пример, рассмотренный выше, чтобы проверить, существует ли элемент в массиве.

function isFruit(fruitName) {
    let fruits = ["Apple", "Mango", "Pear", "Peach"];
    if(fruits.indexOf(fruitName) > -1) {
        return true;
    } else {
        return false;
    }
}
isFruit("Pear");
isFruit("Cat");

Выход:

true
false

Использование функции .includes() для проверки наличия значения в массиве в JavaScript

Функция includes() в JavaScript проверяет, присутствует ли данный элемент в массиве. Возвращает логическое значение. Следовательно, он лучше всего подходит для проверки условия если.

Синтаксис

includes(keyword)
includes(keyword, index)

Параметр

Функция принимает два параметра. Обычно мы используем эту функцию в виде .includes(searchString). Параметр searchString - это элемент, который мы хотим найти, а параметр index относится к индексу массива, начиная с которого следует искать. Параметр index не является обязательным.

Возвращаемое значение

.includes() возвращает true, еслиsearchString найден как элемент массива. Если не найден, функция возвращает false.

Поддержка браузера

Функция .includes() работает почти во всех веб-браузерах, кроме Internet Explorer. Следовательно, если ваш проект поддерживается IE, возможно, вам придется воспользоваться функцией indexOf().

Применение

Давайте посмотрим на применение includes() в массиве.

let fruits = ["Apple", "Mango", "Pear", "Peach"];
console.log(fruits.includes("Pear"));
console.log(fruits.includes("Tomato"))

Выход:

true
false

Функцию includes() можно напрямую использовать в условиях если, поскольку она возвращает логическое значение в качестве вывода. Приведенный выше пример можно использовать в условном если следующим образом. Просто имейте в виду, что этот код может не работать в IE, так как .includes() в нем не поддерживается.

function isFruit(fruitName) {
    let fruits = ["Apple", "Mango", "Pear", "Peach"];
    if(fruits.includes(fruitName)) {
        return true;
    } else {
        return false;
    }
}
isFruit("Pear");
isFruit("Cat");

Выход:

true
false

Использование функции .find() для поиска элемента в массиве в JavaScript

Другой способ проверить наличие элемента в массиве - использовать функцию .find(). По сравнению с функциями .indexOf() и .includes(), .find() принимает функцию в качестве параметра и выполняет ее для каждого элемента массива. Он вернет первое значение, которому удовлетворяет условие, указанное в функции параметра.

Синтаксис

.find((keyword) => { /* Some condition checks */} )
.find((keyword, index) => { /* Some condition checks */} )

Параметр

Функция Array.find() принимает функцию в качестве входного параметра. Обычно в качестве параметров мы используем стрелочные функции. И эти стрелочные функции могут содержать проверки условий типа item => item> 21. Еще один необязательный параметр - index, который представляет индекс текущей итерации. .Find() выполняет стрелочную функцию для каждого элемента массива. Следовательно, он предоставляет итератор в качестве аргумента функции стрелки для помощи в дальнейших условных проверках.

Возвращаемое значение

.find() немного отличается от функций indexOf(), includes() в javascript. Он возвращает значение элемента, если он найден, иначе функция возвращает undefined.

Поддержка браузера

Как и функция .includes(), .find() работает почти во всех веб-браузерах, кроме Internet Explorer. Следовательно, мы должны быть уверены, что наш проект не поддерживается для IE, прежде чем планировать использовать такие функции для операций с массивами.

Применение

Обратитесь к следующему использованию в массиве.

let age = [21, 43, 23, 1, 34, 12, 8];
console.log(age.find(i => i > 20));
console.log(age.find(i => i > 21))

Выход:

21
43

Нас может немного удивить результат age.find (i => i> 21), поскольку он возвращает 43 вместо 23, которое было следующим по величине числом после 21 в age. множество. Обратите внимание, что функция .find() возвращает следующий элемент, который удовлетворяет условию, указанному в функции массива, в хронологическом порядке. Для поиска элемента с блоком if мы можем использовать следующий код.

function findPeerAge(myAge) {
    let age = [21, 43, 23, 1, 34, 12, 8];
    if(age.find(i => (i === myAge))) {
        return true;
    } else {
        return false;
    }
}
findPeerAge(23);
findPeerAge(40);
true
false

Использование функции .filter() для поиска элемента в массиве в JavaScript

Функция .filter() в основном используется в операциях обработки массивов. Особенно, когда речь идет о фильтрации элементов, удовлетворяющих критерию, вне массива. Он возвращает массив элементов, удовлетворяющих критериям, определенным в функции, переданной в качестве аргумента.

Синтаксис

Имеет тот же синтаксис, что и Array.find().

.filter((keyword) => { /* Some condition checks */} )
.filter((keyword, index) => { /* Some condition checks */} )

Параметр

Функция Array.filter() принимает в качестве параметра встроенную функцию или стрелочную функцию. Стрелочная функция будет содержать критерии фильтра. Функция .filter() выполняет стрелочную функцию для каждого элемента массива и возвращает элементы, которые удовлетворяют условиям, указанным в стрелочной функции. Стрелочная функция будет иметь на входе keyword, а текущую итерацию - как index.

Возвращаемое значение

В отличие от функций поиска по массиву, которые мы видели до сих пор, .filter() возвращает массив, содержащий элементы, удовлетворяющие условиям, указанным в стрелочной функции. Если элемент найден, возвращаемый массив будет содержать необходимые элементы, иначе функция вернет пустой массив.

Поддержка браузера

Функция .filter() поддерживается всеми браузерами, включая Internet Explorer. Таким образом, вы можете использовать функцию .filter(), не беспокоясь о ожидаемой поддержке браузером.

Использование: Использование этой функции следующее

let age = [21, 43, 23, 1, 34, 12, 8];
console.log(age.filter(i => i > 20));
console.log(age.filter(i => i > 21));

Выход:

[21, 43, 23, 34]
[43, 23, 34]

Как видно из результата, функция filter() возвращает массив. Если нам нужно найти элемент в массиве, мы можем использовать функцию filter(), как показано в следующем примере кода. Мы используем атрибут .length массива, возвращаемого функцией filter(), чтобы определить, может ли он найти элемент или нет. Если функция возвращает пустой массив, это означает, что не удалось найти ключевое слово для поиска.

function findAge(myAge) {
    let age = [21, 43, 23, 1, 34, 12, 8];
    if( age.filter(i => (i === myAge)).length ) {
        return true;
    } else {
        return false;
    }
}
findAge(23);
findAge(40);

Выход:

true
false

Использование простого цикла for для поиска элемента

Мы можем найти элемент в массиве с помощью базовых методов javascript, условия if и цикла for. Следующий код вернет истину, если элемент найден, иначе вернет ложь. Если один и тот же элемент встречается более чем один раз, функция возвращает только первое совпадение.

function findAge(myAge, ageAry) {
    let elementFound = false;
    for (let i = 0; i < ageAry.length; i++) {
        if (ageAry[i] === myAge) {
            return true;
        }
    }
    return elementFound;
}
let srcArray = [21, 43, 23, 1, 34, 12, 8];
findAge(23, srcArray);
findAge(40, srcArray);
findAge(8, srcArray);
findAge(23, srcArray);

Выход:

true
false
true
true

Примечание

  • Функции .indexOf(), .includes() ищут точное совпадение элемента. Мы не можем использовать его для поиска частичных строк. Это означает предоставление части элемента, так как параметр поиска работать не будет.
  • Мы можем реализовать частичный поиск элементов с помощью функций Array.filter() и Array.find(), поскольку они позволяют нам настраивать критерии поиска.

Сопутствующая статья - JavaScript Array

  • Преобразование аргументов в массив в JavaScript
  • Удалить последний элемент из массива в JavaScript
  • JavaScript выбирает случайное значение из массива