向旧浏览器中添加 ES7/ES8 中缺失的 Array.includes() 方法

在前端开发中，我们经常会使用 JavaScript 来操作数组。ES7/ES8 中新增的 Array.includes() 方法可以帮助我们更方便地判断一个元素是否在数组中。然而，由于一些旧版的浏览器不支持该方法，我们需要手动添加该方法以确保兼容性。

为什么要手动添加 Array.includes() 方法？

在 ES7/ES8 中，Array.includes() 方法被添加到了 JavaScript 标准库中，因此在支持 ES7/ES8 的现代浏览器中，该方法可以直接使用。然而，在旧版的浏览器中，该方法并不被支持，这就需要我们手动添加该方法以确保代码的兼容性。

如何手动添加 Array.includes() 方法？

我们可以通过以下代码来手动添加 Array.includes() 方法：

// javascriptcn.com 代码示例
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');
      }

      var o = Object(this);
      var len = o.length >>> 0;

      if (len === 0) {
        return false;
      }

      var n = fromIndex | 0;
      var k = Math.max(n >= 0 ? n : len - Math.abs(n), 0);

      while (k < len) {
        if (o[k] === searchElement) {
          return true;
        }
        k++;
      }

      return false;
    }
  });
}

以上代码中，我们首先判断 Array.prototype.includes 是否被定义，如果没有被定义，则通过 Object.defineProperty 方法来为其添加一个新的属性。该属性的 value 是一个函数，用于实现 Array.includes() 方法的功能。

示例代码

下面是一个使用 Array.includes() 方法的示例代码：

var arr = [1, 2, 3, 4, 5];
console.log(arr.includes(3)); // true
console.log(arr.includes(6)); // false

如果我们在旧版的浏览器中运行上述代码，会发现控制台报错，提示“Uncaught TypeError: arr.includes is not a function”。这是因为该浏览器不支持 Array.includes() 方法。为了解决这个问题，我们需要手动添加 Array.includes() 方法，然后再次运行代码即可。

总结

手动添加 ES7/ES8 中缺失的 Array.includes() 方法可以帮助我们在旧版的浏览器中实现该方法的功能，从而提高代码的兼容性。虽然手动添加该方法可能会增加代码的体积和复杂度，但是这是一种必要的做法，尤其是在需要兼容多种浏览器的情况下。

来源：JavaScript中文网 ，转载请注明来源 本文地址：https://www.javascriptcn.com/post/65843da8d2f5e1655defa649