Javascript 浏览器对 array.includes 和替代品的支持

声明:本页面是StackOverFlow热门问题的中英对照翻译,遵循CC BY-SA 4.0协议,如果您需要使用它,必须同样遵循CC BY-SA许可,注明原文地址和作者信息,同时你必须将它归于原作者(不是我):StackOverFlow 原文地址: http://stackoverflow.com/questions/30461565/
Warning: these are provided under cc-by-sa 4.0 license. You are free to use/share it, But you must attribute it to the original authors (not me): StackOverFlow

提示:将鼠标放在中文语句上可以显示对应的英文。显示中英文
时间:2020-08-23 05:12:41  来源:igfitidea点击:

Browser support for array.includes and alternatives

javascriptarraysecmascript-5ecmascript-7

提问by Thaenor

I looked it up and found this regarding finding a substring in a larger string in an array. Array.Prototype.includes

我查了一下,发现这是关于在数组中的较大字符串中查找子字符串。Array.Prototype.includes

if (t.title.includes(searchString))

My tis part of a $.eachthat's iterating through a larger array of objects (each objects got a buttload of info, from strings, dates and such). searchStringis whatever the user typed in a box. All this is a simple search function for a list I have on the page.

Myt$.each迭代更大对象数组的一部分(每个对象都获得了大量信息,来自字符串、日期等)。searchString是用户在框中键入的任何内容。所有这些都是我在页面上的列表的简单搜索功能。

This works just fine in Chrome. But Firefox and IE are turning up errors stating

这在 Chrome 中工作得很好。但是 Firefox 和 IE 出现了错误说明

TypeError: currentTicket.title.includes is not a function

So I either put up a warning sign that my app only works on Chrome or I handcraft a find function? Weird thing is the doc page from MDN I posted states that only Firefox supports the array.includes, strangely enough it's only Chrome that runs it.

所以我要么提出一个警告标志,表明我的应用程序只能在 Chrome 上运行,要么我手工制作了一个查找功能?奇怪的是我发布的 MDN 文档页面指出只有 Firefox 支持array.includes,奇怪的是只有 Chrome 运行它。

回答by Thriggle

Instead of using an API that is currently marked as "experimental" consider using a more broadly supported method, such as Array.prototype.indexOf()(which is also supported by IE).

与其使用当前标记为“实验性”的 API,不如考虑使用更广泛支持的方法,例如Array.prototype.indexOf()(IE 也支持)。

Instead of t.title.includes(string)you could use t.title.indexOf(string) >= 0

而不是t.title.includes(string)你可以使用t.title.indexOf(string) >= 0

You can also use Array.prototype.filter()to get a new array of strings that meet a certain criteria, as in the example below.

您还可以使用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>

回答by Nit

As the MDN article you linked to says, Firefox only supports .includesin nightly builds, other browsers didn't support it at all at the time the article was last updated(Chrome may have been updated to support it at a later time). If you want to support all browsers, you can use the polyfill outlined in the same article:

正如您链接的 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;
  };
}

However, it sounds like your problem has a better solution, but it's hard to tell without any specifics.

但是,听起来您的问题有更好的解决方案,但如果没有任何细节,就很难说。