解决 ES7 中的 Array.Prototype.includes() 方法在 Safari 浏览器下的兼容性问题

在前端开发中，我们常常使用 Array.Prototype.includes() 方法用于判断数组中是否包含某个元素。该方法可以很好地提高代码的可读性和可维护性。然而在实际开发中，我们经常会遇到 Safari 浏览器下 Array.Prototype.includes() 方法的兼容性问题，本文将以此为例，介绍如何解决此类兼容性问题，同时对 ES6/ES7 中的 Array 类型方法做一些总结。

ES6/ES7 中的 Array 类型方法

ES6/ES7 中相较于 ES5 而言，新增了一些 Array 原型方法，以方便我们对数组进行各种各样的操作。以下是一些在 ES6/ES7 中引入的 Array 原型方法：

• Array.prototype.flatMap()
• Array.prototype.at()
• Array.prototype.flat()
• Array.prototype.includes()

我们在撰写本文主要有关新方法的解决方案时，也会顺带给出各种方法的使用及规范。

Array.Prototype.includes() 方法

来看看该方法的使用。

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

如上例所示，该方法会返回一个布尔值，用于判断某个元素是否在数组中。

Safari 浏览器下的问题

上述方法在 Safari 浏览器下存在问题。在 Safari 9 及之前的版本中，该方法并未被支持，因此在使用时需要手动定义该方法。下面给出一个兼容处理方法：

if (![].includes) {
  Array.prototype.includes = function(searchElement /*, fromIndex*/ ) {
    'use strict';
    if (this == null) {
      throw new TypeError('Array.prototype.includes called on null or undefined');
    }

    var O = Object(this);
    var len = parseInt(O.length, 10) || 0;
    if (len === 0) {
      return false;
    }
    var n = parseInt(arguments[1], 10) || 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)) { // NaN !== NaN
        return true;
      }
      k++;
    }
    return false;
  };
}

通过上面的兼容处理方法，我们可以在 Safari 浏览器上正常地使用 Array.Prototype.includes() 方法。

为什么需要兼容性

在纯前端或者同团队内部进行开发时，不太需要考虑兼容性的问题。可是当我们要开发给大部分人使用的产品或者启用了较高的前端交互时，就需要考虑浏览器兼容性问题。

总结

ES6/ES7 在 Array 类型原型方法的拓展上，令前端开发人员有机会更好地脱离语言限制，而根据业务开发做到更多的高度聚合，提高代码质量。对于 Array.Prototype.includes() 方法的在 Safari 浏览器下的兼容性问题，我们可以提前进行处理，保证代码的可靠性。

本文着重阐释了在 Safari 浏览器下 ES7 中 Array.Prototype.includes() 方法的兼容性问题，同时对 ES6/ES7 中新增的一些 Array 类型原型方法做出了说明。希望本文对读者有所帮助和启示。

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