带有“对象不支持属性或方法‘包含’”的奇怪 IE11 行为答案

【问题标题】：Strange IE11 behavior with "Object doesn't support property or method 'includes'"带有“对象不支持属性或方法‘包含’”的奇怪 IE11 行为
【发布时间】：2018-03-17 11:42:51
【问题描述】：

我在 IE11 中的项目遇到了一些问题（它是 react 项目，我使用 create-react-app prod build）。它在其他浏览器和 IE11 中也可以正常工作，除非我单击指向 IE11 中一个路由的精确链接（其他路由有效），它会引发错误“对象不支持属性或方法'包含'”。我添加了“babel-polyfill”，但问题仍然存在，但如果我不只是加载页面，而是重新加载它，然后单击该链接，或者当我直接加载该链接页面时它工作正常。

我没有在我的代码中使用“包含”，假设它在我使用的某些库中使用。

可能有人知道，为什么它在加载页面后和仅在重新加载后无法正常工作。

感谢您的帮助。

【问题讨论】：

标签： reactjs internet-explorer-11 create-react-app

【解决方案1】：

它似乎通过 this 插件与 babel 的其余部分分开处理。

includes 是一个 Javascript 函数，用于确定一个项目是否存在于数组中，它在 Internet Explorer 中不可用。请参阅下面的文档/图表。（显然它不是默认情况下 babel 的一部分，因为在识别变量是否为数组时存在一些困难。在 babel repos 中，这可以追溯到 2 年以上。）

https://developer.mozilla.org/en-US/docs/Web/JavaScript/Reference/Global_Objects/Array/includes

来自这些文档的浏览器兼容性图表的一部分：

【讨论】：

McGuireV10，谢谢你的解释。这很有帮助并解决了问题。
如果这回答了您的问题，您可能希望将问题标记为已回答并投票。
如何将您链接的插件正确添加到 create-react-app 的 babel 配置中？谢谢！
这个插件好像有一些大坑

【解决方案2】：

如果您可以控制 javascript 编译过程，McGuireV10 的答案非常好，但是包含 shim 可能会更快。

在我使用 react-select v2 的 create-react-app 项目中，我遇到了其中一些错误，因此包括 air-bnb's bundle：

yarn add airbnb-js-shims

然后将这一行添加到我的代码中：

import 'airbnb-js-shims';

祝你好运！

【讨论】：

【解决方案3】：

在所有导入的顶部添加以下函数。

if (!Array.prototype.includes) {
    Object.defineProperty(Array.prototype, 'includes', {
        value: function (searchElement, fromIndex) {

            if (this == null) {
                throw new TypeError('"this" is null or not defined');
            }

            // 1. Let O be ? ToObject(this value).
            var o = Object(this);

            // 2. Let len be ? ToLength(? Get(O, "length")).
            var len = o.length >>> 0;

            // 3. If len is 0, return false.
            if (len === 0) {
                return false;
            }

            // 4. Let n be ? ToInteger(fromIndex).
            //    (If fromIndex is undefined, this step produces the value 0.)
            var n = fromIndex | 0;

            // 5. If n ≥ 0, then
            //  a. Let k be n.
            // 6. Else n < 0,
            //  a. Let k be len + n.
            //  b. If k < 0, let k be 0.
            var k = Math.max(n >= 0 ? n : len - Math.abs(n), 0);

            function sameValueZero(x, y) {
                return x === y || (typeof x === 'number' && typeof y === 'number' && isNaN(x) && isNaN(y));
            }

            // 7. Repeat, while k < len
            while (k < len) {
                // a. Let elementK be the result of ? Get(O, ! ToString(k)).
                // b. If SameValueZero(searchElement, elementK) is true, return true.
                if (sameValueZero(o[k], searchElement)) {
                    return true;
                }
                // c. Increase k by 1. 
                k++;
            }

            // 8. Return false
            return false;
        }
    });
}

【讨论】：