随着 ECMAScript 标准的不断更新，新的语法和特性被逐渐加入到 JavaScript 中。其中，Array.prototype.includes 方法是 ES7 中加入的新方法，其可以用来判断数组中是否包含指定的元素。但在 IE 和 Edge 浏览器中，这个方法可能会有兼容问题，本文将介绍如何解决这个问题。
问题分析
在 IE 和 Edge 浏览器中，Array.prototype.includes 方法可能会出现以下问题：
- 方法不存在：由于 IE 和 Edge 浏览器的版本较旧，因此它们不支持这个方法。如果尝试在这些浏览器上使用这个方法，会出现 "Object doesn't support property or method 'includes'" 的错误。
- 第二个参数无效：Array.prototype.includes 方法接受两个参数：要查找的元素和一个可选的起始索引。在 IE 和 Edge 浏览器中，如果提供了第二个参数，其可能会被忽略，从而导致查找结果不正确。
兼容性解决方案
为了解决这个问题，我们可以使用以下两种方法：
1. 使用 polyfill
由于 Array.prototype.includes 方法是在 ES7 中才被加入到 JavaScript 标准中的，因此在一些较旧的浏览器中可能并不支持它。要解决这个问题，我们可以使用 polyfill 来为这些浏览器提供这个方法的实现。
以下是一个简单的 polyfill 实现：
-- -------------------- ---- -------
-- --------------------------- -
------------------------ - ----------------------- ---------- - -- -
--- ---- - - ----------- - - ------------ ---- -
-- -------- --- -------------- -
------ -----
-
-
------ ------
--
-这个实现会检查当前环境中是否存在 Array.prototype.includes 方法，如果不存在，则将其实现为一个 for 循环。其中 startIndex 参数使用了 ES6 的默认参数语法来提供默认值 0。
2. 使用 indexOf 方法
在 IE 和 Edge 浏览器中，indexOf 方法是一个可靠的代替品，可以用来判断一个元素是否存在于数组中。因此，我们可以使用这个方法来替代 Array.prototype.includes 方法。
以下是一个使用 indexOf 方法的实现：
if (!Array.prototype.includes) {
Array.prototype.includes = function(elementToFind, startIndex = 0) {
return this.indexOf(elementToFind, startIndex) !== -1;
};
}这个实现会检查当前环境中是否存在 Array.prototype.includes 方法，如果不存在，则将其实现为一个调用 indexOf 方法的语句。
示例代码
以下是一个简单的示例代码，演示如何使用 polyfill 来为 IE 和 Edge 浏览器提供 Array.prototype.includes 方法的实现。
-- -------------------- ---- -------
--------- -----
------
------
------------------------------- -------------
-------
------
--------
-- --------------------------- -
------------------------ - ----------------------- ---------- - -- -
--- ---- - - ----------- - - ------------ ---- -
-- -------- --- -------------- -
------ -----
-
-
------ ------
--
-
---------
--------
----- ------- - --------- --------- ----------
---------------------------------------- -- ----
--------------------------------------- -- -----
---------
-------
-------在这个示例中，我们检查 Array.prototype.includes 方法是否存在，如果不存在，则使用 polyfill 来为其提供一个实现。然后我们使用这个方法来判断数组中是否包含指定的元素。这个代码可以在 IE 和 Edge 浏览器中运行，并可以输出正确的结果。
结论
Array.prototype.includes 方法是在 ES7 中加入的新方法，用于判断数组中是否包含指定的元素。在 IE 和 Edge 浏览器中，这个方法可能会出现兼容性问题。为了解决这个问题，我们可以使用 polyfill 或使用 indexOf 方法来提供这个方法的实现。通过这些方法，我们可以在这些浏览器上正确地使用这个方法，而无需担心兼容性问题。
来源：JavaScript中文网 ，转载请注明来源 https://www.javascriptcn.com/post/67503d84fbd23cf89075dc9a