在前端开发中，我们经常需要对数组进行查找操作，比如查找数组中是否包含某个元素或者查找某个元素的下标位置。在 ES7 中，新增了 Array.prototype.indexOf() 方法来解决这个问题，本文将详细介绍这个方法的使用和指导意义。
介绍
Array.prototype.indexOf() 方法用于查找数组中指定元素的下标位置。如果数组中不存在该元素，则返回 -1。该方法接受两个参数，第一个参数是要查找的元素，第二个参数是可选的起始查找位置，默认值为 0。
示例
下面是一个简单的示例，演示了如何使用 Array.prototype.indexOf() 方法查找数组中的元素。
const arr = [1, 2, 3, 4, 5]; const index = arr.indexOf(3); console.log(index); // 输出 2
在上面的示例中，我们先定义了一个数组 arr，然后使用 indexOf() 方法查找元素 3 的下标位置，最后将结果输出到控制台。由于元素 3 在数组中的下标位置为 2，因此输出结果为 2。
深度学习
除了基本的使用方法外，我们还需要深入了解 indexOf() 方法的一些细节和注意事项。
1. 查找方向
indexOf() 方法从左往右查找数组中的元素，如果需要从右往左查找，可以使用 Array.prototype.lastIndexOf() 方法。
const arr = [1, 2, 3, 4, 5]; const index = arr.lastIndexOf(3); console.log(index); // 输出 2
在上面的示例中，我们使用 lastIndexOf() 方法查找元素 3 的下标位置，由于元素 3 在数组中的最后一个位置为 2，因此输出结果为 2。
2. NaN 的查找
indexOf() 方法无法正确查找 NaN 元素，因为 NaN 不等于任何值，包括它本身。如果需要查找 NaN，可以使用 Array.prototype.findIndex() 方法。
const arr = [1, 2, NaN, 4, 5]; const index = arr.findIndex(item => isNaN(item)); console.log(index); // 输出 2
在上面的示例中，我们使用 findIndex() 方法查找 NaN 元素的下标位置，由于 isNaN() 方法可以正确判断 NaN，因此输出结果为 2。
3. 对象的查找
当查找对象时，indexOf() 方法会按照对象的引用地址进行比较，而不是按照对象的属性值进行比较。因此，如果需要按照对象的属性值进行比较，可以使用 Array.prototype.find() 或者 Array.prototype.findIndex() 方法。
const arr = [{id: 1, name: '张三'}, {id: 2, name: '李四'}, {id: 3, name: '王五'}];
const item = arr.find(item => item.id === 2);
console.log(item); // 输出 {id: 2, name: '李四'}在上面的示例中，我们使用 find() 方法查找 id 为 2 的对象，由于 item.id === 2 成立，因此输出结果为 {id: 2, name: '李四'}。
指导意义
使用 indexOf() 方法可以方便地查找数组中的元素，避免了手动遍历数组的麻烦。同时，我们需要注意 indexOf() 方法的一些细节，比如查找方向、NaN 的查找和对象的查找。在实际开发中，我们需要根据具体的需求选择合适的查找方法，提高代码的效率和可维护性。
结论
本文介绍了 ES7 中的 Array.prototype.indexOf() 方法，包括基本的使用方法、深度学习和指导意义。通过学习本文，相信大家已经掌握了这个方法的使用和注意事项，可以在实际开发中灵活运用，提高代码的效率和可维护性。
来源：JavaScript中文网 ，转载请注明来源 https://www.javascriptcn.com/post/6763f6a5856ee0c1d4252e29