随着 JavaScript 语言的不断发展，新的语法和 API 不断涌现。在 ES8 中，新增了 Array.prototype.includes() 方法，这是一个相对于之前较为熟悉的 Array.prototype.indexOf() 来说比较新的方法。本文将深入探讨 Array.prototype.includes() 和 Array.prototype.indexOf() 的关系，帮助读者更好地理解这两个方法之间的区别以及在实际开发中的使用场景。
1. Array.prototype.indexOf() 方法
Array.prototype.indexOf() 方法用于查找数组中指定值的第一个匹配项，并返回该匹配项的索引。如果没有找到，则返回 -1。 下面是这个方法的语法：
array.indexOf(searchValue[, fromIndex])
其中，searchValue 是要查找的值，fromIndex 是开始查找的位置。若省略 fromIndex，则从数组的开头开始查找。如果fromIndex为负值，则在数组中从末尾向前查找。
然而，Array.prototype.indexOf() 方法有一个十分明显的缺点：在判断是否包含某个元素的时候，只能返回是否包含，而无法返回元素具体在哪个位置。同时，这个方法不支持查找 NaN 值类型，这一问题需使用额外的方法来解决。
2. Array.prototype.includes() 方法
Array.prototype.includes() 方法则是在该缺点的基础之上进行了改进。它用于检测数组是否包含某个元素，并返回 true 或 false。 下面是这个方法的语法：
array.includes(searchValue[, fromIndex])
其中，searchValue 是要查找的值，fromIndex 是开始查找的位置。若省略 fromIndex，则从数组的开头开始查找。如果fromIndex为负值，则在数组中从末尾向前查找。
相较于 Array.prototype.indexOf() ，Array.prototype.includes() 的返回值更为直观。而且无需额外的方法来解决查找 NaN 值类型的问题。虽然新方法比旧方法更方便，但新方法也有其局限性，仍然不能完全取代旧方法，尤其是在需要具体的位置索引的场景下。
3. 如何判断使用哪个方法？
在实际中，选择使用 Array.prototype.indexOf() 还是 Array.prototype.includes()，需要根据实际的需要进行选择，而不是单方面强调谁替代谁。下面是两个例子：
1）如果你只需要判断一个数组是否包含某个元素，那么建议使用 Array.prototype.includes():
let arr = [1, 2, 3, 4, 5];
if(arr.includes(3)) {
console.log('数组中包含 3');
}2）如果你需要查找一个字符串或者数字在一个数组中具体的索引位置，那么使用 Array.prototype.indexOf() 可以更方便。
let arr = ['one', 'two', 'three', 'four', 'five'];
let index = arr.indexOf('three');
console.log(`'three' 的索引为 ${index}`);
if(index !== -1) {
arr.splice(index, 1);
}4. 总结
尽管 Array.prototype.includes() 与 Array.prototype.indexOf() 存在一些相似的功能，但它们也具备各自独特的优势。当我们需要判断一个元素是否存在于数组中时，Array.prototype.includes() 提供了一种更加直观和简单的方式。而在需要具体的索引时，Array.prototype.indexOf() 则是更佳的选择。因此，在实际的开发中，我们需要灵活选择，结合具体场景来使用这两种方法。
希望本文能够帮助读者更深入理解 Array.prototype.includes() 和 Array.prototype.indexOf() 之间的差异和联系，以及如何使用它们来优化代码。
来源：JavaScript中文网 ，转载请注明来源 本文地址：https://www.javascriptcn.com/post/654a08627d4982a6eb43ea0c