了解 ES8 Array.prototype.includes() 的使用和原理-JavaScript中文网-JavaScript教程资源分享门户

ES8 中新增了一个 Array.prototype.includes() 方法，用于判断一个数组是否包含某个元素。本文将详细介绍这个方法的使用和原理，并提供示例代码和指导意义。

使用方法

Array.prototype.includes() 方法接收一个参数，表示要查找的元素。如果数组中包含该元素，则返回 true，否则返回 false。例如：

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

这个方法也可以接收第二个参数，表示从哪个下标开始查找。例如：

const arr = [1, 2, 3, 4, 5];
console.log(arr.includes(2, 2)); // true，从下标 2 开始查找
console.log(arr.includes(2, 3)); // false，从下标 3 开始查找，但是 2 的下标是 1

需要注意的是，Array.prototype.includes() 方法和 Array.prototype.indexOf() 方法的区别在于，前者可以正确处理 NaN 和 -0，而后者不能。

const arr = [NaN, -0];
console.log(arr.includes(NaN)); // true
console.log(arr.includes(-0)); // true
console.log(arr.indexOf(NaN)); // -1
console.log(arr.indexOf(-0)); // 0

原理解析

Array.prototype.includes() 方法的原理很简单，其实就是遍历数组，查找是否包含指定元素。但是，它的实现比我们手动遍历数组的效率要高得多。

在 V8 引擎中，Array.prototype.includes() 方法的实现如下：

-- -------------------- ---- -------
-------------------------------------- ----------- -
  ------ ----------------------- ---------- -
    -- ----- -- ----- -
      ----- --- ----------------- -- ---- -- --- ----------
    -

    --- - - -------------
    --- --- - -------- --- --

    -- ---- --- -- -
      ------ ------
    -

    --- - - --------- - --
    --- - - ---------- -- - - - - --- - ------------ ---

    ----- -- - ---- -
      -- ----- --- ------------- --
          ----- --- ---- -- ------------- --- -------------- -- --- --- -
        ------ -----
      -
      ----
    -

    ------ ------
  -
---展开代码

可以看到，这个方法首先判断 this 是否为 null 或 undefined，然后将 this 转换为对象，获取数组长度，计算出查找的起始下标，然后使用 while 循环遍历数组，查找是否包含指定元素。如果找到了，则返回 true，否则返回 false。

需要注意的是，这个方法使用了位运算符来处理 fromIndex，这是因为当 fromIndex 为负数时，它会从数组末尾开始查找，而不是从数组开头。例如：

const arr = [1, 2, 3, 4, 5];
console.log(arr.includes(2, -2)); // false，从倒数第二个元素开始查找
console.log(arr.includes(2, -3)); // true，从倒数第三个元素开始查找

示例代码

下面是一些示例代码，展示了 Array.prototype.includes() 方法的使用场景。

判断数组是否包含指定元素

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

从指定下标开始查找元素

const arr = [1, 2, 3, 4, 5];
console.log(arr.includes(2, 2)); // true，从下标 2 开始查找
console.log(arr.includes(2, 3)); // false，从下标 3 开始查找，但是 2 的下标是 1

判断数组是否包含 NaN 或 -0

const arr = [NaN, -0];
console.log(arr.includes(NaN)); // true
console.log(arr.includes(-0)); // true
console.log(arr.indexOf(NaN)); // -1
console.log(arr.indexOf(-0)); // 0

指导意义

Array.prototype.includes() 方法是一个非常实用的方法，可以用于判断一个数组是否包含某个元素。它的使用方法非常简单，而且在处理 NaN 和 -0 的时候比 Array.prototype.indexOf() 方法更加准确。

在实际开发中，我们经常需要判断一个数组是否包含某个元素，而以前我们通常使用 Array.prototype.indexOf() 方法来实现。但是，这个方法有一些缺点，比如不能正确处理 NaN 和 -0，不能从指定下标开始查找等。现在有了 Array.prototype.includes() 方法，我们可以更加方便地实现这个功能。

另外，Array.prototype.includes() 方法的原理也很有意思，它使用了位运算符来处理 fromIndex，这是一种非常巧妙的实现方式。如果你对 JavaScript 的底层实现感兴趣，可以深入了解一下这个方法的源码。

来源：JavaScript中文网，转载请注明来源 https://www.javascriptcn.com/post/67cabce3e46428fe9e337f11

了解 ES8 Array.prototype.includes() 的使用和原理