探索并手动封装ES5数组新增方法-indexOf和lastIndexOf
2024-01-11 09:15:49
在前端开发中，JavaScript 作为一门流行的脚本语言，经常被用于处理和操作数据。在 JavaScript 中，数组是一种非常重要的数据结构，它可以存储多个值，并通过索引来访问这些值。在 ES5 版本中，JavaScript 数组新增了两个非常有用的方法：indexOf 和 lastIndexOf。这两个方法可以帮助我们在数组中查找元素的位置，并在许多场景中非常有用。
indexOf 方法
indexOf 方法用于从数组的开头开始查找某个元素的位置。如果找到该元素，则返回其索引值；如果未找到，则返回 -1。该方法的语法如下：
array.indexOf(element, start)
其中，element 是要查找的元素，start 是查找的起始索引，默认为 0。
lastIndexOf 方法
lastIndexOf 方法与 indexOf 方法类似，但它是从数组的末尾开始查找某个元素的位置。如果找到该元素，则返回其索引值；如果未找到，则返回 -1。该方法的语法如下：
array.lastIndexOf(element, start)
其中，element 是要查找的元素，start 是查找的起始索引，默认为数组的长度减一。
手动封装 indexOf 和 lastIndexOf 方法
我们可以通过以下步骤手动封装 indexOf 和 lastIndexOf 方法：
- 创建一个名为 ArrayUtils 的类。
- 在 ArrayUtils 类中，定义 indexOf 和 lastIndexOf 方法。
- 在 indexOf 方法中，从数组的开头开始遍历，并使用严格相等运算符 (===) 来比较每个元素与给定的元素。如果找到该元素，则返回其索引值；如果未找到，则返回 -1。
- 在 lastIndexOf 方法中，从数组的末尾开始遍历，并使用严格相等运算符 (===) 来比较每个元素与给定的元素。如果找到该元素，则返回其索引值；如果未找到，则返回 -1。
下面是 indexOf 和 lastIndexOf 方法的封装代码：
class ArrayUtils {
static indexOf(array, element, start = 0) {
for (let i = start; i < array.length; i++) {
if (array[i] === element) {
return i;
}
}
return -1;
}
static lastIndexOf(array, element, start = array.length - 1) {
for (let i = start; i >= 0; i--) {
if (array[i] === element) {
return i;
}
}
return -1;
}
}
使用封装后的 indexOf 和 lastIndexOf 方法
我们可以使用封装后的 indexOf 和 lastIndexOf 方法来查找数组中元素的位置。例如，以下代码使用 indexOf 方法来查找数组中第一个出现的值为 5 的元素的位置：
const array = [1, 2, 3, 4, 5, 6, 7, 8, 9, 10];
const index = ArrayUtils.indexOf(array, 5);
console.log(index); // 4
以下代码使用 lastIndexOf 方法来查找数组中最后一个出现的值为 5 的元素的位置：
const array = [1, 2, 3, 4, 5, 6, 7, 8, 9, 5];
const index = ArrayUtils.lastIndexOf(array, 5);
console.log(index); // 9
总结
在本文中，我们探索并手动封装了 ES5 数组新增方法-indexOf 和 lastIndexOf。这两个方法可以帮助我们在数组中查找元素的位置，并在许多场景中非常有用。我们通过提供详细的步骤和示例代码来实现这些方法的封装。希望本文对您有所帮助。
