Array.prototype.includes：一个有关 ES7 新特性的实用方法-JavaScript中文网-JavaScript教程资源分享门户

Array.prototype.includes()是一个JavaScript数组的新方法，被添加到了ECMAScript 7 (ES7)中，它已经被大多数的现代浏览器所支持。这个方法主要是用来查找数组中是否包含某个特定的元素，它的返回值是布尔值 (true 或者 false)。在这篇文章中我将会对Array.prototype.includes()这个新特性进行详细的叙述，探讨其特点以及使用场景。

为什么需要Array.prototype.includes()?

在ES5以及之前的版本中，我们需要用Array.prototype.indexOf()方法来查找一个元素是否在一个数组中。indexOf()方法返回的是元素在数组中的位置，如果没有找到，则返回-1。例如：

var fruits = ['apple', 'banana', 'watermelon'];
var index = fruits.indexOf('banana'); // 1

但是，由于indexOf()方法返回一个数字，而不是一个布尔值，这就使得使用它的过程中变得有一些麻烦。为了判断一个元素是否在数组中，需要使用额外的条件判断。例如：

var fruits = ['apple', 'banana', 'watermelon'];
if (fruits.indexOf('banana') !== -1) {
    console.log('banana is in the fruits array');
}

这种写法还是比较麻烦的，而现在Array.prototype.includes()的出现则可以帮助我们更加方便地完成这项任务。

Array.prototype.includes()的使用方法

Array.prototype.includes()方法有两个参数：要查找的元素以及起始位置。

要查找的元素（必选）：要查找的元素值。
起始位置（可选）：从该索引处开始查找。如果该值是负数，则将其视为从数组末尾向前的偏移量。默认值为0。

下面是一个例子：

var fruits = ['apple', 'banana', 'watermelon'];
if (fruits.includes('banana')) {
    console.log('banana is in the fruits array');
}

if (fruits.includes('banana', 2)) {
    console.log('the third element of fruits is banana');
}

该方法返回布尔值。如果数组中包含该元素，则返回true；否则返回false。

Array.prototype.includes()与Array.prototype.indexOf()的区别

这两个方法都是用来查找数组中的元素，它们的区别在于返回值及使用方式。

indexOf()方法返回的是一个数字，表示要查找的元素在数组中的位置；如果没有找到，则返回-1。
includes()方法返回的是一个布尔值，表示要查找的元素是否在数组中。

无论使用哪种方法，都要注意的是，两者都是从左到右扫描整个数组来查找元素。

总结

Array.prototype.includes()是一个新特性，可以帮助我们更方便地查找数组中的元素。
与indexOf()方法不同，includes()方法返回的是一个布尔值，更加直观易懂。
在实际开发中，尤其是在处理数组的情况下，我们应该多加使用这个实用的方法，以提升开发效率和代码质量。

示例代码

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

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

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

以上示例代码可在现代浏览器中执行。

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