使用 ES7 中的 Array.includes 解决 indexOf 的问题
在 JavaScript 中，数组是一个非常常见的数据类型，开发者经常需要对数组进行操作。其中，查找数组中是否包含某个元素是一个常用操作。最初的时候，我们使用 indexOf 方法来查找一个元素是否在数组中存在。然而，随着 ECMAScript 2016 的发布，我们现在有了一个更好用、更易读的方法 Array.includes。
在本篇文章中，我们将深入介绍 ES7 中 Array.includes 的用法，并通过与 indexOf 的对比来突显它的优势，同时还会提供一些示例代码和实用性建议。
Array.includes 的使用方法
Array.includes() 方法用于确定是否数组中包含某个元素，如果包含，则返回 true；否则返回 false。它可以替代 indexOf 方法来进行元素查找。该方法的语法如下：
array.includes(searchElement[, fromIndex]);
其中，searchElement 为要查找的元素，fromIndex 是可选参数，表示开始查找的索引位置。默认值为 0。
举个例子：
let arr = [1, 2, 3]; console.log(arr.includes(2)); // true console.log(arr.includes(4)); // false
可以看到，在以上代码中，我们首先定义了一个数组 arr，然后使用 includes 方法查找其中是否包含 2 和 4 两个元素，得到的结果分别为 true 和 false。
与 indexOf 的对比
在 ES6 之前，indexOf 是我们常用的数组元素查找方法。下面是一个使用 indexOf 实现查找的例子：
let arr = [1, 2, 3]; console.log(arr.indexOf(2));
在上面这个例子中，我们首先定义了一个数组 arr，然后使用 indexOf 方法查找其中是否包含 2 元素。它将返回元素在数组中的索引位置。
然而，indexOf 存在一些限制。例如，当搜索字符串时，我们通常不得不扫描整个数组，因为它不能在非正序的数组中工作。
而 Array.includes 更加现代、高效、直观。我们可以立即看出代码的含义，而无需花费太多精力想象其作用。比如，下面这个例子：
let arr = ['apple', 'banana', 'mango']; console.log(arr.includes('apple'));
与上面的例子非常相似，我们使用 includes 方法查找数组中是否包含 apple 元素。与使用 indexOf 方法的区别是，这个数组只有字符串类型。
使用 Array.includes 更加清晰，因为它能够正确地在数组落后的索引位置开始查找元素。如果我们执行一个从未出现过的查询，我们可以在调用 indexOf 之前加上 includes 检查，以防止出现 index of -1 的错误，如下所示：
let arr = ['apple', 'banana', 'mango']; if (arr.includes('grapes')) { console.log(arr.indexOf('grapes')); }
在这个例子中，includes() 方法将在 arr 数组中查找元素。如果元素存在，则可能使用 indexOf() 方法获得其索引位置。
示例代码
现在我们来看看一些示例代码，以便更好地理解 Array.includes 的实用性。下面的示例使用 Array.from() 和 Array.includes() 方法生成一个从起始索引开始的范围内的数组。
const range = (start, end) => { let arr = Array.from({ length: end - start + 1 }, (_, i) => start + i); return arr; } console.log(range(1, 10)); // [1, 2, 3, 4, 5, 6, 7, 8, 9, 10]
在这个例子中，range 函数使用 Array.from 方法和箭头函数返回一个从 start 开始，到 end 结束范围内的数组。
接下来，我们再看一个示例。在这个示例中，我们使用 includes 方法来检查一个对象是否存在于数组中，并根据包含或不包含对象的情况返回不同的结果：
let array = [{ a: 1 }, { b: 2 }, { c: 3 }]; let obj1 = { a: 1 }; let obj2 = { b: 2 }; console.log(array.includes(obj1)); // true console.log(array.includes(obj2)); // true
在这个示例中，我们首先定义了一个包含三个对象元素的数组 array。然后，我们定义了两个要查找的对象 obj1 和 obj2。
最后，我们使用 includes 方法检查 obj1 和 obj2 是否在数组中存在。由于这是对象，所以我们通过引用相等性查找，而不是元素内容的相等性查找。
指导意义
综上所述，ES7 中的 Array.includes 方法是一个非常有用的工具，可替代 indexOf 方法进行数组元素查找。它的一些优点包括：
- 可读性：Array.includes 方法提高了代码的可读性，使代码更加易于理解。
- 容错性：通过使用 includes 方法可以更好地处理数组中不存在的元素，避免了 indexOf 方法出现查找失败时出现的 index of -1 错误。
- 兼容性：需要注意的是，由于 ES7 标准仍是较新的标准，一些旧版本的浏览器不支持，我们需要在使用前确保该特性对于我们的目标浏览器是可用的。
除此之外，新特性的引入也意味着新的学习机会。通过了解新特性及其所提供的解决方案，我们可以更好地深入了解 JavaScript 的发展历史和技术趋势。
来源：JavaScript中文网 ，转载请注明来源 https://www.javascriptcn.com/post/67ca6016e46428fe9e274ace
