Какие знаешь методы поиска в JS?

Методы поиска в JavaScript

В JavaScript существует множество методов для поиска элементов в коллекциях (массивы, строки, объекты) и DOM-дереве. Их можно разделить на несколько категорий.

Поиск в массивах (Array Methods)

Для поиска в массивах используются методы, которые принимают функцию-предикат или значение.

Методы, возвращающие значение элемента:

• find(): возвращает первый элемент, удовлетворяющий условию функции-предиката. Если элемент не найден, возвращает undefined.

  const numbers = [5, 12, 8, 130, 44];
  const found = numbers.find(num => num > 10); // 12
  

• findLast() (ES2023): работает аналогично find(), но начинает поиск с конца массива.

  const numbers = [5, 12, 8, 130, 44];
  const foundLast = numbers.findLast(num => num > 10); // 44
  

Методы, возвращающие индекс элемента:

• indexOf(): возвращает первый индекс, по которому найден указанный элемент. Если элемент отсутствует, возвращает -1. Поиск осуществляется с использованием строгого равенства (===).

  const fruits = ['apple', 'banana', 'orange'];
  const index = fruits.indexOf('banana'); // 1
  

• lastIndexOf(): аналогичен indexOf(), но поиск начинается с конца массива.

  const nums = [2, 5, 2, &9, 2];
  const lastIndex = nums.lastIndexOf(2); // 4
  

• findIndex(): возвращает индекс первого элемента, удовлетворяющего условию функции-предиката. Если элемент не найден, возвращает -1.

  const numbers = [5, 12, 8, 130, 44];
  const index = numbers.findIndex(num => num > 13); // 3 (индекс элемента 130)
  

• findLastIndex() (ES2023): возвращает индекс последнего элемента, удовлетворяющего условию функции-предиката.

  const numbers = [5, 12, 8, 130, 44];
  const lastIndex = numbers.findLastIndex(num => num > 13); // 4 (индекс элемента 44)
  

Методы, проверяющие наличие элементов:

• includes(): возвращает true или false, указывая, содержит ли массив указанный элемент. Использует строгое равенство (===).

  const arr = [1, 2, 3];
  const hasTwo = arr.includes(2); // true
  

• some(): возвращает true, если хотя бы один элемент массива удовлетворяет условию функции-предиката.

  const array = [1, 2, 3, 4, 5];
  const hasEven = array.some(num => num % 2 === 0); // true
  

• every(): возвращает true, если все элементы массива удовлетворяют условию функции-предиката.

  const array = [2, 4, 6, 8];
  const allEven = array.every(num => num % 2 === 0); // true
  

Поиск в строках (String Methods)

Для поиска подстроки в строке используются следующие методы:

• indexOf(): возвращает индекс первого найденного совпадения подстроки. Если подстрока не найдена, возвращает -1.

  const str = 'Hello world';
  const index = str.indexOf('world'); // 6
  

• lastIndexOf(): возвращает индекс последнего найденного совпадения подстроки.

  const str = 'Hello world, world';
  const lastIndex = str.lastIndexOf('world'); // 13
  

• includes(): возвращает true или false, указывая, содержит ли строка указанную подстроку.

  const str = 'JavaScript is powerful';
  const hasScript = str.includes('Script'); // true
  

• search(): принимает регулярное выражение и возвращает индекс первого совпадения. Если совпадений нет, возвращает -1.

  const str = 'The price is 123 USD';
  const index = str.search(/[0-9]+/); // 12 (индекс начала числа)
  

• match(): также работает с регулярными выражениями, но возвращает массив совпадений или null.

  const str = 'The numbers are 123 and 456';
  const matches = str.match(/[0-9]+/g); // ['123', '456']
  

Поиск в DOM-дереве (DOM Traversal)

Для поиска элементов в DOM используются методы, начинающиеся с document или вызываемые на конкретном элементе.

• getElementById(): возвращает элемент с указанным id. Самый быстрый метод.

  const header = document.getElementById('main-header');
  

• querySelector(): возвращает первый элемент, соответствующий CSS-селектору.

  const firstButton = document.querySelector('.btn-primary');
  

• querySelectorAll(): возвращает статическую коллекцию (NodeList) всех элементов, соответствующих CSS-селектору.

  const allButtons = document.querySelectorAll('button');
  

• getElementsByClassName(): возвращает живую коллекцию элементов с указанным классом.

  const cards = document.getElementsByClassName('card');
  

• getElementsByTagName(): возвращает живую коллекцию элементов с указанным тегом.

  const paragraphs = document.getElementsByTagName('p');
  

Ключевые различия и рекомендации по использованию

• Критерий поиска: indexOf(), lastIndexOf(), includes() используют строгое равенство (===). find(), findIndex(), some(), every() используют функцию для более сложных условий.
• DOM-поиск: getElementById() — самый эффективный. querySelector() и querySelectorAll() — наиболее гибкие благодаря поддержке сложных CSS-селекторов.
• Возвращаемое значение: важно понимать, возвращает метод само значение (find()), его индекс (findIndex()), булево состояние (includes()) или коллекцию (querySelectorAll()).
• Производительность: для простых проверок наличия элемента в массиве метод includes() часто более читаемый и эффективный, чем комбинация indexOf() !== -1.

Выбор конкретного метода зависит от задачи: нужно найти элемент, его индекс, просто проверить наличие или получить коллекцию. Знание этих методов позволяет писать эффективный и читаемый код для обработки данных и манипуляции DOM.