Решение: метод indexOf не работает в IE8 для массивов

Быстрый ответ

В браузере IE8 не реализован метод indexOf для массивов, т.к. этот метод был внедрён позже, в стандарте ECMAScript 5. Однако, это можно исправить, добавив в вашего проект следующий полифилл:

if (!Array.prototype.indexOf) {
  Array.prototype.indexOf = function(searchElement) {
    for (var i = 0; i < this.length; i++) {
      if (this[i] === searchElement) return i; // Элемент обнаружен
    }
    return -1; // Элемент отсутствует
  };
}

После этого метод indexOf начнёт нормально работать в IE8.

Применяем на практике: использование полифилла в IE8

Браузер IE8 не поддерживает многие фичи ECMAScript 5, включая метод .indexOf(). В таких случаях нам на помощь приходят полифиллы, предоставляющие недостающую функциональность.

Ищем замены: функция $.inArray() в jQuery

Если вы используете библиотеку jQuery, функция $.inArray() может стать хорошей альтернативой:

var index = $.inArray(searchElement, array); // jQuery на выручку!

Данная функция обеспечит совместимость при выполнении поиска элементов в IE8.

Подробнее об этом расскажет наш спикер на видео

Сравнение: $.inArray() и indexOf

$.inArray() может быть полезной, но важно понимать его возможности и ограничения:

• Применим только к массивам, не к строкам.

• Возвращает -1, если элемент не обнаружен, а в других случаях — индекс найденного элемента, начинается с 0.

  Именно эти нюансы позволяют предотвратить ошибки при написании кода на JavaScript.

Визуализация

Вы можете представить поиск метода в IE8 как поиск подходящей книги (метода) в старой библиотеке:

Полки библиотеки IE8:
- Книга по `forEach` – 🚫
- Книга по `indexOf` – 🚫
- Книга по `filter`  – 🚫

Полки библиотеки современного браузера:
- Книга по `forEach` – ✅
- Книга по `indexOf` – ✅
- Книга по `filter`  – ✅

Отсутствие «книги» с indexOf в библиотеке IE8 делает задачу затруднительной, не так ли?

// В IE8 это наподобие игры в прятки
for (var i = 0; i < array.length; i++) {
    if (array[i] === itemToFind) {
        return i; // Искомый элемент найден!
    }
}

Но не беспокойтесь, современные браузеры всегда на страже:

var index = array.indexOf(itemToFind); // Современные браузеры к вашим услугам!

Лучшие практики для обеспечения совместимости с IE8

Для обеспечения работы кода в устаревших браузерах как IE8 используйте следующие подходы:

• Проверка функциональности. Перед использованием функции, удостоверьтесь в её наличии.
• Условные комментарии. Вы можете помечать участки кода для специфичных версий IE.

• Шимы и полифиллы. Используйте внешние скрипты, реализующие недостающую функциональность.

  Используя эти средства, вы сможете соблюсти совместимость вашего кода с любыми браузерами.

Необходимые материалы для разработчиков JavaScript

Для разработчиков всегда важно постоянно расширять свои знания и следить за новинками. Существуют два полезных ресурса для работы с JavaScript:

• Документация MDN — для более глубокого понимания функций JavaScript и проверки их совместимости с различными браузерами.
• "Can I use" — ресурс для проверки поддерживаемых веб-технологий в старых версиях браузеров, включая IE8.

Сильные знания обеспечивают возможность прогнозировать и решать возникающие проблемы заблаговременно.

Полезные материалы

1. Array.prototype.indexOf() – JavaScript | MDN — Документация MDN по методу indexOf.
2. Can I use... Support tables for HTML5, CSS3, etc — Проверьте совместимость с браузерами для indexOf, включая IE8.
3. GitHub – es-shims/es5-shim: ECMAScript 5 compatibility shims for legacy (and modern) JavaScript engines — Данный ресурс содержит шимы и полифиллы для старых браузеров, в частности IE8.
4. Defining document compatibility (Internet Explorer) | Microsoft Learn — Познакомьтесь с методами поддержки JavaScript и режимами совместимости в IE8.
5. About conditional comments (Internet Explorer) | Microsoft Learn — Используйте условные комментарии для оптимизации кода под IE8 и исправления ошибок JavaScript.