Поддержка браузерами для array.includes и альтернатив

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

if (t.title.includes(searchString))

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

Это прекрасно работает в Chrome. Но Firefox и IE выдают ошибки с указанием

TypeError: currentTicket.title.includes is not a function

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


person Thaenor    schedule 26.05.2015    source источник
comment
В общем, функция, которая не работает ни в одном браузере, кроме может быть новейших версий Chrome и Firefox, и вам интересно, почему она не работает? Эту функцию должно быть легко полифилить, кстати, она прямо в ссылке, которую вы разместили.   -  person adeneo    schedule 26.05.2015
comment
Я голосую за то, чтобы закрыть этот вопрос как не по теме, потому что решение опубликовано в вопросе!   -  person adeneo    schedule 26.05.2015
comment
Кстати, вы используете не Array.prototype.includes, а скорее String.prototype.includes. С таким же успехом вы можете использовать обычный метод indexOf для подобных вещей.   -  person Qantas 94 Heavy    schedule 26.05.2015
comment
Пробовали использовать Array.prototype.some ?   -  person guest271314    schedule 26.05.2015
comment
@adeneo Это не так уж черно-бело. Я только что добавил соответствующую документацию к моему вопросу, но я не очень хорошо понимаю, что это значит. Я не уверен, что такое полифил и как его использовать (см. мой комментарий к другому ответу). Что касается использования indexof, я получаю ту же ошибку от Firefox и IE.   -  person Thaenor    schedule 26.05.2015
comment
Что такое currentTicket.title и что вы пытаетесь сопоставить. Если вы показываете, что пытаетесь сделать, вероятно, есть лучший кросс-браузерный способ сделать это.   -  person adeneo    schedule 26.05.2015
comment
kangax.github.io/compat-table/es6   -  person kangax    schedule 28.05.2015
comment
@Thaenor: отметьте ответ, получивший наибольшее количество голосов, как принятый, я почти уверен, что он также решил вашу проблему.   -  person Tim Schmelter    schedule 30.11.2018


Ответы (2)


Вместо использования 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>

person Thriggle    schedule 26.05.2015

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

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;
  };
}

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

person Etheryte    schedule 26.05.2015
comment
Что такое Polyfill и как его применить на js? Извините, я пытался погуглить этот, но не смог найти ничего подходящего. - person Thaenor; 26.05.2015
comment
Первый результат Google довольно хорошо раскрывает тему: polyfill — это фрагмент кода, который обеспечивает наличие в браузере определенных функций (например, Array.prototype.includes) независимо от того, поддерживается ли он изначально. Вы захотите включить его где-нибудь на своей странице, прежде чем использовать этот метод, поэтому, скорее всего, как можно раньше. - person Etheryte; 26.05.2015
comment
Я попытался скопировать этот фрагмент кода, но он ничего не делает. Это работает как обычная функция или... - person Thaenor; 26.05.2015
comment
Если приведенное выше не решает вашу проблему, вероятно, ваш целевой объект не является массивом для начала. Невозможно сказать без дополнительного кода. - person Etheryte; 26.05.2015