web-dev-qa-db-fra.com

Prise en charge du navigateur pour array.includes et alternatives

Je l'ai recherché et j'ai trouvé cela concernant la recherche d'une sous-chaîne dans une chaîne plus grande dans un tableau. Array.Prototype.includes

if (t.title.includes(searchString))

Mon t fait partie d'un $.each qui est en train d'itérer à travers un plus grand tableau d'objets (chaque objet a reçu un tas d'informations, à partir de chaînes, de dates, etc.). searchString est tout ce que l'utilisateur a tapé dans une boîte. Tout cela est une fonction de recherche simple pour une liste que j'ai sur la page.

Cela fonctionne très bien dans Chrome. Mais Firefox et IE génèrent des erreurs indiquant

TypeError: currentTicket.title.includes is not a function

Donc, soit je mets en place un signe d'avertissement que mon application ne fonctionne que sur Chrome ou je fabrique une fonction de recherche à la main? Une chose étrange est la page de documentation de MDN que j'ai publiée indique que seul Firefox prend en charge le array.includes, curieusement, c'est seulement Chrome qui l'exécute.

javascriptarraysecmascript-5ecmascript-7
20
Thaenor

Au lieu d'utiliser une API actuellement marquée comme "expérimentale", envisagez d'utiliser une méthode plus largement prise en charge, telle que Array.prototype.indexOf() (qui est également prise en charge par IE).

Au lieu de t.title.includes(string) vous pouvez utiliser t.title.indexOf(string) >= 0

Vous pouvez également utiliser Array.prototype.filter() pour obtenir un nouveau tableau de chaînes répondant à certains critères, comme dans l'exemple ci-dessous.

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>
39
Thriggle

Comme l'indique l'article MDN auquel vous avez lié, Firefox ne prend en charge que .includes dans les versions nocturnes, les autres navigateurs ne le supportaient pas du tout au moment de la dernière mise à jour de l'article (Chrome a peut-être été mis à jour pour le prendre en charge ultérieurement). Si vous souhaitez prendre en charge tous les navigateurs, vous pouvez utiliser le polyfill décrit dans le même article:

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

Cependant, il semble que votre problème ait une meilleure solution, mais il est difficile de le dire sans détails.

4
Nit