Браузерная поддержка для array.include и альтернатив

Я просмотрел его и нашел это относительно поиска подстроки в большей строке в массиве. Array.Prototype.includes

if (t.title.includes(searchString))

My t является частью $.each, который выполняет итерацию с помощью большего массива объектов (каждый объект получает информацию об ошибках, строки, даты и т.д.). searchString - это то, что пользователь вводил в поле. Все это простая функция поиска для списка, который у меня есть на странице.

Это отлично работает в Chrome. Но Firefox и IE вызывают ошибки, указывающие

TypeError: currentTicket.title.includes is not a function

Итак, я либо вставил предупреждающий знак, что мое приложение работает только на Chrome или я нахожу функцию поиска? Странно, что страница doc из MDN, опубликованной мной, гласит, что только Firefox поддерживает array.includes, как ни странно, это только Chrome, который ее запускает.

Ответ 1

Вместо использования API, который в настоящее время помечен как "экспериментальный", рассмотрите использование более широко поддерживаемого метода, например Array.prototype.indexOf() (который также поддерживается IE).

Вместо t.title.includes(string) вы можете использовать t.title.indexOf(string) >= 0

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

var arr = ["one", "two", "three", "four", "five", "six", "seven", "eight", "nine", "ten"];
document.getElementById("input").onkeyup = function() {
  document.getElementById("output").innerHTML = arrayContainsString(arr,this.value);
}
document.getElementById("header").innerHTML = JSON.stringify(arr);

function arrayContainsString(array, string) {
  var newArr = array.filter(function(el) {
    return el.indexOf(string) >= 0;
  });
  return newArr.length > 0;
}

<input id="input" type="text" />
<br/>
<div>array contains text:<span id="output" />
</div>
<div id="header"></div>

Ответ 2

В статье MDN, в которой вы ссылаетесь, говорится, что Firefox поддерживает только .includes в ночных сборках, другие браузеры вообще не поддерживали его на момент последнего обновления статьи (возможно, Chrome был обновлен, чтобы поддерживать его на позднее время). Если вы хотите поддерживать все браузеры, вы можете использовать polyfill, описанные в той же статье:

if (![].includes) {
  Array.prototype.includes = function(searchElement /*, fromIndex*/ ) {
    'use strict';
    var O = Object(this);
    var len = parseInt(O.length) || 0;
    if (len === 0) {
      return false;
    }
    var n = parseInt(arguments[1]) || 0;
    var k;
    if (n >= 0) {
      k = n;
    } else {
      k = len + n;
      if (k < 0) {k = 0;}
    }
    var currentElement;
    while (k < len) {
      currentElement = O[k];
      if (searchElement === currentElement ||
         (searchElement !== searchElement && currentElement !== currentElement)) {
        return true;
      }
      k++;
    }
    return false;
  };
}

Однако, похоже, что у вашей проблемы есть лучшее решение, но трудно сказать без каких-либо специфических особенностей.