JavaScript предлагает мощные встроенные функции, которые позволяют нам искать определенные значения в массивах или строках. Для этой цели широко используются два метода: indexOf() и include(). В этой статье мы углубимся в эти методы и рассмотрим 20 фрагментов кода JavaScript, демонстрирующих их функциональность. Поняв поток кода, стоящий за этими фрагментами, вы получите знания для эффективного поиска значений в своих программах на JavaScript.
Фрагмент кода 1: базовое использование indexOf()
const fruits = ['apple', 'banana', 'orange'];
const index = fruits.indexOf('banana');
console.log(index); // Output: 1
Объяснение. В этом фрагменте мы создаем массив с именем fruits и используем метод indexOf() для поиска индекса строки 'banana' в массиве. Метод возвращает позицию индекса (в данном случае 1), где найдено значение. Затем мы записываем индекс в консоль.
Фрагмент кода 2: обработка несуществующих значений с помощью indexOf()
const fruits = ['apple', 'banana', 'orange'];
const index = fruits.indexOf('grape');
console.log(index); // Output: -1
Объяснение. Если метод indexOf() не находит заданное значение в массиве, он возвращает -1. В этом примере, поскольку «виноград» отсутствует в массиве fruits, возвращаемый индекс равен -1.
Фрагмент кода 3: проверка включения массива с помощью include()
const fruits = ['apple', 'banana', 'orange'];
const includesFruit = fruits.includes('banana');
console.log(includesFruit); // Output: true
Объяснение. Метод includes() проверяет, существует ли указанное значение в массиве. В этом фрагменте мы определяем, присутствует ли «банан» в массиве fruits. Метод возвращает логическое значение (в данном случае true), указывающее, найдено ли значение.
Фрагмент кода 4: поиск подстрок с помощью include()
const sentence = 'I love JavaScript!';
const includesWord = sentence.includes('JavaScript');
console.log(includesWord); // Output: true
Объяснение. Метод includes() не ограничивается массивами; он также может искать подстроки в строке. В этом фрагменте мы проверяем, присутствует ли строка «JavaScript» в строке sentence. Метод возвращает true, так как подстрока найдена.
Фрагмент кода 5: учет регистра с помощью include()
const sentence = 'I love JavaScript!';
const includesWord = sentence.includes('javascript');
console.log(includesWord); // Output: false
Объяснение. Метод includes() выполняет поиск с учетом регистра. В этом примере «javascript» не найден в строке sentence, потому что регистр не соответствует «JavaScript».
Фрагмент кода 6: поиск по определенному индексу с помощью indexOf()
const fruits = ['apple', 'banana', 'orange', 'banana'];
const index = fruits.indexOf('banana', 2);
console.log(index); // Output: 3
Объяснение. Указав второй аргумент метода indexOf(), мы можем указать индекс, с которого должен начинаться поиск. В этом случае мы начинаем искать «банан» с индекса 2 и находим его с индексом 3. Следовательно, возвращаемый индекс равен 3.
Фрагмент кода 7: несколько вхождений с indexOf()
const fruits = ['apple', 'banana', 'orange', 'banana'];
let index = fruits.indexOf('banana');
while (index !== -1) {
console.log(index);
index = fruits.indexOf('banana', index + 1);
}
Объяснение. В этом фрагменте показано, как найти несколько вхождений значения в массиве с помощью метода indexOf(). Мы инициализируем переменную index первым вхождением «банана». Затем внутри цикла while мы регистрируем текущий индекс и обновляем переменную index, чтобы найти следующее вхождение. Цикл продолжается до тех пор, пока не будет найдено больше вхождений.
Фрагмент кода 8: сравнение include() и indexOf()
const fruits = ['apple', 'banana', 'orange'];
console.log(fruits.includes('apple')); // Output: true
console.log(fruits.indexOf('apple') !== -1); // Output: true
Объяснение. И includes(), и indexOf() можно использовать для определения наличия значения в массиве. В этом фрагменте мы сравниваем результаты обоих методов для значения «яблоко». Оба утверждения возвращают значение true, указывая на то, что в массиве fruits присутствует слово «яблоко».
Фрагмент кода 9. Проверка наличия в массиве подмассива
const nestedArray = [[1, 2], [3, 4], [5, 6]]; const subarray = [3, 4]; const includesSubarray = nestedArray.some(arr => arr.includes(...subarray)); console.log(includesSubarray); // Output: true
Объяснение. Метод includes() также можно использовать для проверки наличия в массиве определенного подмассива. В этом примере у нас есть вложенный массив с именем nestedArray, и мы хотим проверить, содержит ли он подмассив [3, 4]. Используя метод some() и распространяя элементы subarray в качестве аргументов в методе includes(), мы можем определить, существует ли подмассив в nestedArray.
Фрагмент кода 10: поиск последнего индекса с помощью lastIndexOf()
const fruits = ['apple', 'banana', 'orange', 'banana'];
const lastIndex = fruits.lastIndexOf('banana');
console.log(lastIndex); // Output: 3
Объяснение. Метод lastIndexOf() работает аналогично indexOf(), но начинает поиск с конца массива, а не с начала. В этом случае мы находим последнее вхождение «банана» в массиве fruits, который находится в индексе 3.
Фрагмент кода 11: определение уникальности массива
const numbers = [1, 2, 3, 4, 4, 5, 6, 6]; const uniqueNumbers = numbers.filter((value, index, array) => array.indexOf(value) === index); console.log(uniqueNumbers); // Output: [1, 2, 3, 4, 5, 6]
Объяснение. Чтобы отфильтровать повторяющиеся значения из массива, мы можем использовать комбинацию методов filter() и indexOf(). В этом фрагменте мы создаем новый массив с именем uniqueNumbers, отфильтровывая элементы, которые имеют тот же индекс, что и их первое вхождение. Результирующий массив содержит только уникальные значения.
Фрагмент кода 12: поиск без учета регистра
const sentence = 'I love JavaScript!';
const includesWord = sentence.toLowerCase().includes('javascript');
console.log(includesWord); // Output: true
Объяснение. Чтобы выполнить поиск без учета регистра, мы можем преобразовать строку в нижний (или верхний) регистр перед применением метода includes(). В этом примере мы преобразуем sentence в нижний регистр, а затем ищем «javascript». Метод возвращает true, независимо от разницы в регистре.
Фрагмент кода 13: поиск объектов с помощью include()
const persons = [
{ name: 'John', age: 25 },
{ name: 'Alice', age: 30 },
{ name: 'Bob', age: 35 }
];
const targetPerson = { name: 'Alice', age: 30 };
const includesPerson = persons.includes(targetPerson);
console.log(includesPerson); // Output: false
Объяснение. Метод includes() сравнивает значения, используя строгое равенство (===). При поиске объектов в массиве метод проверяет ссылку на конкретный объект. В этом фрагменте targetPerson не найдено в массиве persons, поскольку это другой объект, хотя свойства совпадают.
Фрагмент кода 14: Поиск объектов с помощью indexOf()
const persons = [
{ name: 'John', age: 25 },
{ name: 'Alice', age: 30 },
{ name: 'Bob', age: 35 }
];
const targetPerson = { name: 'Alice', age: 30 };
const index = persons.findIndex(person =>
person.name === targetPerson.name && person.age === targetPerson.age
);
console.log(index); // Output: 1
Объяснение: при поиске объектов в массиве нам нужно использовать метод findIndex() вместо indexOf(). В этом примере мы находим индекс объекта, который соответствует targetPerson, сравнивая свойства name и age. Возвращаемый индекс равен 1, что указывает на позицию соответствующего объекта в массиве.
Фрагмент кода 15: поиск значений NaN
const numbers = [1, 2, NaN, 4, 5]; console.log(numbers.includes(NaN)); // Output: true console.log(numbers.indexOf(NaN)); // Output: -1
Объяснение. Метод includes() может найти наличие NaN значений в массиве. Однако метод indexOf() не может найти NaN напрямую, потому что NaN не равно самому себе. Во втором console.log возвращается -1, чтобы указать, что NaN не найдено.
Фрагмент кода 16: поиск неопределенных значений
const values = [1, 2, undefined, 4, 5]; console.log(values.includes(undefined)); // Output: true console.log(values.indexOf(undefined)); // Output: 2
Объяснение. И includes(), и indexOf() могут обрабатывать поиск значений undefined в массиве. В этом фрагменте мы ищем наличие и индекс undefined в массиве values. Результаты показывают, что undefined присутствует в индексе 2.
Фрагмент кода 17: проверка префикса строки
const word = 'JavaScript is amazing!';
const hasPrefix = word.startsWith('JavaScript');
console.log(hasPrefix); // Output: true
Explanation: метод startsWith() проверяет, начинается ли строка с указанного префикса. В этом фрагменте мы определяем, начинается ли строка word с «JavaScript». Метод возвращает true, указывая, что строка действительно имеет этот префикс.
Фрагмент кода 18: проверка суффикса строки
const word = 'JavaScript is amazing!';
const hasSuffix = word.endsWith('amazing!');
console.log(hasSuffix); // Output: true
Объяснение. Метод endsWith() проверяет, заканчивается ли строка указанным суффиксом. Здесь мы проверяем, заканчивается ли word на «удивительно!». Метод возвращает true, указывая, что строка имеет желаемый суффикс.
Фрагмент кода 19: поиск пустой строки
const sentence = 'I love JavaScript!';
const includesEmpty = sentence.includes('');
console.log(includesEmpty); // Output: true
Объяснение: использование includes() с пустой строкой в качестве аргумента позволяет нам проверить, содержит ли строка вообще какие-либо символы. В этом фрагменте мы определяем, содержит ли sentence пустую строку, и метод возвращает true, поскольку строка не пуста.
Фрагмент кода 20: проверка равенства массивов с помощью include()
const arr1 = [1, 2, 3]; const arr2 = [1, 2, 3]; const isEqual = arr1.includes(...arr2) && arr2.includes(...arr1); console.log(isEqual); // Output: true
Объяснение.Метод includes() можно использовать для проверки равенства двух массивов. В этом фрагменте у нас есть arr1 и arr2, которые имеют одинаковые элементы. Распространяя элементы одного массива в качестве аргументов в методе includes() другого массива, мы можем проверить, включают ли они друг друга. Переменная isEqual равна true, поскольку оба массива включают все элементы другого массива.
Обзор:
В этой статье мы рассмотрели методы indexOf() и includes() в JavaScript, которые позволяют нам искать значения в массивах и строках. Мы рассмотрели различные варианты использования, такие как базовое использование, обработка несуществующих значений, чувствительность к регистру, поиск по определенным индексам, поиск последнего индекса и многое другое. Кроме того, мы рассмотрели такие сценарии, как проверка включения массива, поиск подстрок, сравнение include() и indexOf(), фильтрация уникальных значений массива и поиск объектов. Освоив эти методы, вы сможете эффективно искать значения в своих программах на JavaScript и расширять функциональные возможности своих приложений.
Надеюсь, что приведенная выше статья дала лучшее понимание. Если у вас есть какие-либо вопросы относительно областей, которые я обсуждал в этой статье, области улучшения, не стесняйтесь комментировать ниже.
[Раскрытие информации: эта статья является совместным творением, в котором мои собственные идеи сочетаются с помощью ChatGPT для оптимальной артикуляции.]
