ES2016：理解 Array.includes() 实现原理及使用技巧-JavaScript中文网-JavaScript教程资源分享门户

ES2016：理解 Array.includes() 实现原理及使用技巧

在ES2016（也被称为ES7）的新特性中，引入了一个新的 Array.includes() 方法，用于判断数组是否包含指定的元素。这是一个非常方便的新特性，因为以前我们需要使用indexOf()方法来检测数组中是否包含某个元素。

本文将介绍Array.includes()的实现原理、使用技巧以及在项目中的应用。

Array.includes() 的实现原理

Array.includes() 方法是ES7的新特性之一，其主要作用是判断一个数组是否包含指定的元素。这个方法只需要一个参数，即要搜索的元素，若数组中包含指定元素，则返回true；若不包含，则返回false。

该方法的实现原理非常简单，我们可以使用ECMAScript6正式定义的迭代器来实现该方法。它会依次遍历数组中的每个元素，比较与指定的值是否相等，若相等则直接返回true。

代码实现如下：

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

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

需要注意的是，如果参数fromIndex小于0，则会从数组的结尾往前搜索，也就是说，如果fromIndex传递了一个负数，它的值就是-1，那么includes()内部扫描的起始位置就是length-1。

Array.includes() 的使用技巧

在使用Array.includes()方法时，很多开发者可能会遇到以下三个问题：

如何判断数组中是否存在NaN？

Array.includes()方法的优势之一就是能够针对NaN的比较，因为在JS中NaN是比较特殊的，它与任何值都不相等，包括它本身。

比如：

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

但如果我们只是在数组里面检查NaN，那么这个方法就没有优势了，因为indexOf方法已经可以检查NaN了。

如何比较引用类型数据是否相等？

对于引用类型的数据，在数组中存储的仅仅是这个变量的引用值，而不是它实际的值。

下面的例子可以说明这个问题：

const o1 = {name: 'Tom'};
const o2 = {name: 'Tom'};
const arr = [o1];

console.log(arr.includes(o2))  // false

上述代码中，数组包含o1引用值，而不是o1本身的值。因为o1和o2的引用地址不同，所以即使它们具有相同的值，includes()方法也会返回false。

所以在这种情况下，使用includes()方法进行比较时，需要先将每个元素都序列化成字符串，再进行比较，如下所示：

const o1 = {name: 'Tom'};
const o2 = {name: 'Tom'};
const arr = [o1];

console.log(arr.map(JSON.stringify).includes(JSON.stringify(o2)));  // true

如何判断空数组？

当空数组使用includes()时，会返回false，因为数组中没有元素。而许多开发者却喜欢使用语法糖，直接在数组上进行操作，如下所示：

// 下面的语法糖在空数组上也能正常运行，并且返回undefined？
if([].includes(someVal)) {
    // ... do something
}

我们需要小心处理，因为这种写法可能会在包含undefined的数组内出现错误，要避免使用。正确的方法应该是：

if(Array.isArray(arr) && arr.includes(someVal)) {
    // ... do something
}

Array.includes() 的应用场景

Array.includes()可以用于很多场景，例如：

判断一个数组是否存在某个元素

这是Array.includes()的最常见使用场景，如下所示：

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

从一个数组中排除某些元素

有时候在一个数组中，我们需要过滤掉一些元素。我们可以使用Array.filter()方法，或者Array.includes()方法。

下面的例子中是使用Array.includes()方法：

const arr = [1, 2, 3, 4, 5];

const result = arr.filter(val => ![].includes(val)); // 过滤掉没有在一个空数组中的元素

console.log(result) // [1, 2, 3, 4, 5]

判断字符串是否包含某个子串

可以使用Array.includes()方法轻松地判断一个字符串是否包含另一个字符串。由于字符串可以通过split()方法分割成一个字符数组，所以我们可以使用Array.includes()来判断一个字符串是否包含另一个字符串。

例如：

const str = 'hello world';
console.log(str.split('').includes('w'))  // true
console.log(str.split('').includes('q'))  // false

判断一个元素是否为空

如果某个元素可能是空值，我们可以使用Array.includes()方法来判断，如下所示：

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

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

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

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

总结

在本文中，我们了解了Array.includes()的实现原理、使用技巧以及在项目中的应用。Array.includes()是一个非常简单和实用的方法，它可以用于检测数组中是否包含指定元素，简单易用，提高了代码的可读性。同时，我们也学会了避免可能会产生的一些错误情况，并在实践中掌握了其使用技巧。

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