Как проверить массив на наличие элемента в JavaScript?
Массив — это тип данных, который может содержать несколько значений в одной переменной. Это будет отличным решением при наличии списка разных элементов, которые хотите хранить. Сортировка разных элементов также помогает при поиске. Знание основных операций массивов важно для улучшения ваших навыков программирования. Рассмотрим пример массива:
Пример
html> html> body> h2>Массивы JavaScript h2> p id="demo"> p> script> var flowers = ["rose", "daisy", "lily"]; document.getElementById("demo").innerHTML = flowers; script> body> html>Довольно часто нам может понадобится проверить наличие элемента в массиве JavaScript. В этой статье мы расскажем о подобных методах.
Прежде всего мы ознакомимся с простым, но работающим решением. Нам понадобится указать оператор:
var array = [11, 20, 8, 6, 17]; var el = 6; //Element to be searched for(var i=0; ilength; i++) < if(el === array[i]) < console.log('Element Found'); > >Как видите массив переходит из index 0 в array.length — 1 index. Он работает следующим образом: в условном операторе if мы проверяем, равен ли элемент в массиве значению элемента в поиске. Если это так, печатаем ‘Element found’.
Теперь укажем условный оператор for и переменную, чтобы указать найден ли элемент.
var array = [11, 20, 8, 6, 17]; var el = 6; //Element to be searched var flag = 0; // Initially 0 - Not found for(var i=0; ilength; i++) < if(el === array[i]) < flag = 1; > > //Check if flag value changed. if(flag == 1) < console.log('Element Found'); > else < console.log('Element Not Found'); >Если элемент найден, значение flag будет изменен внутри условного оператора if, и именно таким образом мы можем сделать проверку на наличие элемента.
Теперь рассмотрим другой метод проверки, который сегодня часто используется. Этот метод называется includes().
Данный метод возвращает true, если массив содержит указанный элемент, а в противном случае — false:
var array = [11, 20, 8, 6, 17]; console.log( array.includes(6) ); //TrueРассмотрим другой пример:
Пример
html> html> body> h1>Array includes() h1> p>Проверьте, содержит ли массив "Daisy": p> p id="demo"> p> p>strong>Note: strong> Метод includes не поддерживается в Edge 13 (и более старых версиях). p> script> var fruits = ["Rose", "Daisy", "Lily", "Jasmine"]; var n = flowers.includes("Daisy"); document.getElementById("demo").innerHTML = n; script> body> html>Метод includes() чувствителен к регистру.
Есть еще один полезный метод. Метод indexOf method используется, чтобы найти индекс элемента массива. Он указывает, содержит ли массив указанный элемент. Если указанный элемент найден в методе JavaScript indexOf, он возвращает номер индекса данного элемента. Если элемент не найден, indexOf возвращает значение -1. Код будет иметь такой вид:
var myArray = ["Rose", "Lily", "Daisy", "Jasmine"]; if (myArray.indexOf(searchTerm) === -1) < console.log("element doesn't exist"); > else < console.log("element found"); >Эти два метода имеют два параметра: element и start.
| Параметр | Описание |
|---|---|
| element | Необходимый параметр. Элемент, который хотим найти. |
| start | Дополнительный параметр. По умолчанию — 0. Указывает, с какой позиции в массиве начать поиск. |
Array.prototype.includes()
Метод includes() определяет, содержит ли массив определённый элемент, возвращая в зависимости от этого true или false .
Интерактивный пример
Синтаксис
arr.includes(searchElement[fromIndex = 0])
Параметры
Позиция в массиве, с которой начинать поиск элемента searchElement . При отрицательных значениях поиск производится начиная с индекса array.length + fromIndex по возрастанию. Значение по умолчанию равно 0.
Возвращаемое значение
Примеры
[1, 2, 3].includes(2); // true [1, 2, 3].includes(4); // false [1, 2, 3].includes(3, 3); // false [1, 2, 3].includes(3, -1); // true [1, 2, NaN].includes(NaN); // true
fromIndex больше или равен длине массива
Если fromIndex больше или равен длине массива, то возвращается false . При этом поиск не производится.
var arr = ["a", "b", "c"]; arr.includes("c", 3); // false arr.includes("c", 100); // false
Вычисленный индекс меньше нуля 0
Если fromIndex отрицательный, то вычисляется индекс, начиная с которого будет производиться поиск элемента searchElement . Если вычисленный индекс меньше нуля, то поиск будет производиться во всём массиве.
// длина массива равна 3 // fromIndex равен -100 // вычисленный индекс равен 3 + (-100) = -97 var arr = ["a", "b", "c"]; arr.includes("a", -100); // true arr.includes("b", -100); // true arr.includes("c", -100); // true
Использование includes() в качестве общих метода
includes() специально сделан общим. Он не требует, чтобы this являлся массивом, так что он может быть применён к другим типам объектов (например, к массивоподобным объектам). Пример ниже показывает использование метода includes() на объекте arguments.
(function () console.log([].includes.call(arguments, "a")); // true console.log([].includes.call(arguments, "d")); // false >)("a", "b", "c");
Полифил
// https://tc39.github.io/ecma262/#sec-array.prototype.includes if (!Array.prototype.includes) Object.defineProperty(Array.prototype, "includes", value: function (searchElement, fromIndex) if (this == null) throw new TypeError('"this" is null or not defined'); > // 1. Let O be ? ToObject(this value). var o = Object(this); // 2. Let len be ? ToLength(? Get(O, "length")). var len = o.length >>> 0; // 3. If len is 0, return false. if (len === 0) return false; > // 4. Let n be ? ToInteger(fromIndex). // (If fromIndex is undefined, this step produces the value 0.) var n = fromIndex | 0; // 5. If n ≥ 0, then // a. Let k be n. // 6. Else n < 0,// a. Let k be len + n. // b. If k < 0, let k be 0.var k = Math.max(n >= 0 ? n : len - Math.abs(n), 0); function sameValueZero(x, y) return ( x === y || (typeof x === "number" && typeof y === "number" && isNaN(x) && isNaN(y)) ); > // 7. Repeat, while k < lenwhile (k len) // a. Let elementK be the result of ? Get(O, ! ToString(k)). // b. If SameValueZero(searchElement, elementK) is true, return true. if (sameValueZero(o[k], searchElement)) return true; > // c. Increase k by 1. k++; > // 8. Return false return false; >, >); >
Если требуется поддержка устаревших движков JavaScript, которые не поддерживают Object.defineProperty , то наилучшим решением будет вообще не делать полифил для методов Array.prototype , так как не получится сделать их неперечисляемыми.
Спецификации
| Specification |
|---|
| ECMAScript Language Specification # sec-array.prototype.includes |
Совместимость с браузерами
BCD tables only load in the browser
Смотрите также
- TypedArray.prototype.includes() (en-US)
- String.prototype.includes()
- Array.prototype.indexOf()
- Array.prototype.find()
- Array.prototype.findIndex()
Проверить наличие элемента в массиве / объекте
Проверить наличие элемента в массиве можно через метод indexOf() , который возвращает позицию элемента в массиве. Если элемент не найден, то метод возвращает -1 .
let array = ['JavaScript', 'jQuery']; if (array.indexOf('JavaScript') !== -1) < // Выполнение кода, если элемент в массиве найден >
Проверить наличие объекта в объекте можно через код ниже:
let frameworks = < vuejs: true >; if ("vuejs" in frameworks) < // элемент есть в объекте >
Также есть вариант ниже, но его не рекомендуется использовать, т.к. если значения будет указано в undefined , то код его не найдёт:
// не рекомендуется использовать, код приведён в качестве примера let frameworks = < vuejs: undefined >; if (frameworks.vuejs !== undefined) < // элемент не найден, хотя он есть в объекте >
Обновлено: 03 апреля 2023
Комментарии
Авторизуйтесь, чтобы добавлять комментарии
- Создание массива
- Вывести элементы массива
- Добавить или удалить элемент в массиве
- Проверить наличие элемента в массиве / объекте
- Разбить строку на массив
- Преобразовать массив в строку
- Случайный элемент массива
- Количество элементов в массиве и объекте
- Выполнить функцию для каждого элемента массива
- Объединить массивы
- Удалить пустые элементы в массиве
Array.prototype.some()
Метод some() проверяет, удовлетворяет ли какой-либо элемент массива условию, заданному в передаваемой функции.
Примечание: метод возвращает false при любом условии для пустого массива.
Интерактивный пример
Синтаксис
arr.some(callback(element[, index[, array]])[, thisArg])
Параметры
Функция проверки каждого элемента, принимает три аргумента:
Текущий обрабатываемый элемент массива.
Индекс текущего обрабатываемого элемента массива.
Массив, по которому осуществляется проход.
Значение, используемое в качестве this при выполнении функции callback .
Возвращаемое значение
true , если функция проверки возвращает truthy значение хотя бы для одного элемента массива. Иначе, false .
Описание
Метод some() вызывает переданную функцию callback один раз для каждого элемента, присутствующего в массиве до тех пор, пока не найдёт такой, для которого callback вернёт истинное значение (значение, становящееся равным true при приведении его к типу Boolean ). Если такой элемент найден, метод some() немедленно вернёт true . В противном случае, если callback вернёт false для всех элементов массива, метод some() вернёт false . Функция callback вызывается только для индексов массива, имеющих присвоенные значения; она не вызывается для индексов, которые были удалены или которым значения никогда не присваивались.
Функция callback вызывается с тремя аргументами: значением элемента, индексом элемента и массивом, по которому осуществляется проход.
Если в метод some() был передан параметр thisArg , при вызове callback он будет использоваться в качестве значения this . В противном случае в качестве значения this будет использоваться значение undefined . В конечном итоге, значение this , наблюдаемое из функции callback , определяется согласно обычным правилам определения this , видимого из функции.
Метод some() не изменяет массив, для которого он был вызван.
Диапазон элементов, обрабатываемых методом some() , устанавливается до первого вызова функции callback . Элементы, добавленные в массив после начала выполнения метода some() , не будут посещены функцией callback . Если существующие элементы массива изменятся, значения, переданные в функцию callback , будут значениями на тот момент времени, когда метод some() посетит их; удалённые элементы посещены не будут.
Примеры
Проверка значений элементов массива
Следующий пример проверяет наличие в массиве элемента, который больше 10.
function isBiggerThan10(element, index, array) return element > 10; > [2, 5, 8, 1, 4].some(isBiggerThan10); // false [12, 5, 8, 1, 4].some(isBiggerThan10); // true
Проверка элементов массива с использованием стрелочных функций
Стрелочные функции предоставляют более краткий синтаксис для подобных проверок.
[2, 5, 8, 1, 4].some((elem) => elem > 10); // false [12, 5, 8, 1, 4].some((elem) => elem > 10); // true
Проверка наличия элемента в массиве
Чтобы имитировать функцию метода includes() , эта пользовательская функция возвращает true, если элемент существует в массиве:
const fruits = ["apple", "banana", "mango", "guava"]; function checkAvailability(arr, val) return arr.some(function (arrVal) return val === arrVal; >); > checkAvailability(fruits, "kela"); // false checkAvailability(fruits, "banana"); // true
Проверка наличия элемента в массиве с использованием стрелочной функции
const fruits = ["apple", "banana", "mango", "guava"]; function checkAvailability(arr, val) return arr.some((arrVal) => val === arrVal); > checkAvailability(fruits, "kela"); // false checkAvailability(fruits, "banana"); // true
Приведение значения к логическому типу
const TRUTHY_VALUES = [true, "true", 1]; function getBoolean(value) "use strict"; if (typeof value === "string") value = value.toLowerCase().trim(); > return TRUTHY_VALUES.some(function (t) return t === value; >); > getBoolean(false); // false getBoolean("false"); // false getBoolean(1); // true getBoolean("true"); // true
Полифил
Метод some() был добавлен к стандарту ECMA-262 в 5-м издании; поэтому он может не присутствовать в других реализациях стандарта. Вы можете работать с ним, добавив следующий код в начало ваших скриптов, он позволяет использовать some() в реализациях, которые не поддерживают этот метод. Этот алгоритм является точно тем, что описан в ECMA-262 5-го издания; и предполагает, что Object и TypeError имеют свои первоначальные значения и что callback.call вычисляется в оригинальное значение Function.prototype.call() .
// Шаги алгоритма ECMA-262, 5-е издание, 15.4.4.17 // Ссылка (en): http://es5.github.io/#x15.4.4.17 // Ссылка (ru): http://es5.javascript.ru/x15.4.html#x15.4.4.17 if (!Array.prototype.some) Array.prototype.some = function (fun /*, thisArg*/) "use strict"; if (this == null) throw new TypeError("Array.prototype.some called on null or undefined"); > if (typeof fun !== "function") throw new TypeError(); > var t = Object(this); var len = t.length >>> 0; var thisArg = arguments.length >= 2 ? arguments[1] : void 0; for (var i = 0; i len; i++) if (i in t && fun.call(thisArg, t[i], i, t)) return true; > > return false; >; >
Спецификации
| Specification |
|---|
| ECMAScript Language Specification # sec-array.prototype.some |
Совместимость с браузерами
BCD tables only load in the browser
Смотрите также
- Array.prototype.forEach()
- Array.prototype.every()
- Array.prototype.find()
- TypedArray.prototype.some() (en-US)