【JavaScript】内置对象 - 数组对象 ④ ( 索引方法 | 查找给定元素的第一个索引 | 查找给定元素的最后一个索引 | 索引方法案例 - 数组元素去重 )

韩曙亮

发布于 2024-05-14 08:44:57

630

发布于 2024-05-14 08:44:57

文章被收录于专栏：韩曙亮的移动开发专栏韩曙亮的移动开发专栏

文章目录

一、索引方法
- 1、查找给定元素的第一个索引 - indexOf()
- 2、查找给定元素的最后一个索引 - lastIndexOf()
二、索引方法案例 - 数组元素去重
- 1、需求分析
- 2、代码实现

Array 数组对象参考文档 : https://developer.mozilla.org/zh-CN/docs/Web/JavaScript/Reference/Global_Objects/Array

一、索引方法

1、查找给定元素的第一个索引 - indexOf()

调用 Array 数组对象的 indexOf() 方法可以查找给定元素的第一个索引 , 语法如下 :

indexOf(searchElement)
indexOf(searchElement, fromIndex)

searchElement 参数是要查找的数组元素 ;
fromIndex 参数是开始搜索的索引值 , 查找时包含该索引值 ;
返回值就是在数组中第一个被找到的指定元素的索引位置 , 如果没有找到返回 -1 ;

参考文档 : https://developer.mozilla.org/zh-CN/docs/Web/JavaScript/Reference/Global_Objects/Array/indexOf

代码示例 :

        // 创建数组对象
        let arr = [9, 5, 2, 7, 5];

        // 查找数组中第一个 5 的索引值
        var indexOf5 = arr.indexOf(5);

        // 输出 : 1
        console.log(indexOf5);

        // 查找数组中 索引 1 的元素后 , 第一个 5 的索引值
        // 查找时 包含 该索引值
        // 这里 1 索引 本身的值就是 5 , 直接返回索引值 1
        var indexOf5After1 = arr.indexOf(5, 1);

        // 输出 : 1
        console.log(indexOf5After1);

        // 查找数组中 索引 2 的元素后 , 第一个 5 的索引值
        var indexOf5After2 = arr.indexOf(5, 2);

        // 输出 : 4
        console.log(indexOf5After2);

完整代码示例 :

<!DOCTYPE html>
<html lang="en">

<head>
    <meta charset="UTF-8">
    <!-- 设置 meta 视口标签 -->
    <meta name="viewport" content="width=device-width, initial-scale=1.0, user-scalable=no,maximum-scale=1.0,minimum-scale=1.0">
    <meta http-equiv="X-UA-Compatible" content="ie=edge">
    <title>JavaScript</title>
    <style></style>
    <script>
        // 创建数组对象
        let arr = [9, 5, 2, 7, 5];

        // 查找数组中第一个 5 的索引值
        var indexOf5 = arr.indexOf(5);

        // 输出 : 1
        console.log(indexOf5);

        // 查找数组中 索引 1 的元素后 , 第一个 5 的索引值
        // 查找时 包含 该索引值
        // 这里 1 索引 本身的值就是 5 , 直接返回索引值 1
        var indexOf5After1 = arr.indexOf(5, 1);

        // 输出 : 1
        console.log(indexOf5After1);

        // 查找数组中 索引 2 的元素后 , 第一个 5 的索引值
        var indexOf5After2 = arr.indexOf(5, 2);

        // 输出 : 4
        console.log(indexOf5After2);
    </script>
</head>

<body>
</body>

</html>

执行结果 :

2、查找给定元素的最后一个索引 - lastIndexOf()

调用 Array 数组对象的 lastIndexOf() 方法可以查找给定元素的最后一个索引 , 语法如下 :

lastIndexOf(searchElement)
lastIndexOf(searchElement, fromIndex)

searchElement 参数是要查找的数组元素 ;
fromIndex 参数是开始搜索的索引值 , 查找时包含该索引值 ;
返回值就是在数组中最后一个被找到的指定元素的索引位置 , 如果没有找到返回 -1 ;

参考文档 : https://developer.mozilla.org/zh-CN/docs/Web/JavaScript/Reference/Global_Objects/Array/lastIndexOf

代码示例 :

        // 创建数组对象
        let arr = [9, 5, 2, 7, 5];

        // 查找数组中第一个 5 的索引值
        var lastIndexOf5 = arr.lastIndexOf(5);

        // 输出 : 4
        console.log(lastIndexOf5);

        // 查找数组中 索引 1 的元素后 , 第一个 5 的索引值
        // 查找时 包含 该索引值
        // 这里 1 索引 本身的值就是 5 , 直接返回索引值 1
        var lastIndexOf5After1 = arr.lastIndexOf(5, 1);

        // 输出 : 1
        console.log(lastIndexOf5After1);

        // 查找数组中 索引 2 的元素后 , 第一个 5 的索引值
        var lastIndexOf5After2 = arr.lastIndexOf(5, 2);

        // 输出 : 1
        console.log(lastIndexOf5After2);

完整代码示例 :

<!DOCTYPE html>
<html lang="en">

<head>
    <meta charset="UTF-8">
    <!-- 设置 meta 视口标签 -->
    <meta name="viewport" content="width=device-width, initial-scale=1.0, user-scalable=no,maximum-scale=1.0,minimum-scale=1.0">
    <meta http-equiv="X-UA-Compatible" content="ie=edge">
    <title>JavaScript</title>
    <style></style>
    <script>
        // 创建数组对象
        let arr = [9, 5, 2, 7, 5];

        // 查找数组中第一个 5 的索引值
        var lastIndexOf5 = arr.lastIndexOf(5);

        // 输出 : 4
        console.log(lastIndexOf5);

        // 查找数组中 索引 1 的元素后 , 第一个 5 的索引值
        // 查找时 包含 该索引值
        // 这里 1 索引 本身的值就是 5 , 直接返回索引值 1
        var lastIndexOf5After1 = arr.lastIndexOf(5, 1);

        // 输出 : 1
        console.log(lastIndexOf5After1);

        // 查找数组中 索引 2 的元素后 , 第一个 5 的索引值
        var lastIndexOf5After2 = arr.lastIndexOf(5, 2);

        // 输出 : 1
        console.log(lastIndexOf5After2);
    </script>
</head>

<body>
</body>

</html>

执行结果 :

二、索引方法案例 - 数组元素去重

1、需求分析

给定一个数组 ,

[9, 5, 2, 7, 5]

将数组中的重复元素删除 , 也就是将上述数组中重复的元素 5 删除 ;

创建一个新的空数组 ,

遍历旧数组 , 遍历每个旧数组元素时 , 查询该元素是否在新数组中 ,

如果在 , 不管该元素 ;
如果不在 , 则将该元素添加到新数组中 ;

2、代码实现

完整代码示例 :

<!DOCTYPE html>
<html lang="en">

<head>
    <meta charset="UTF-8">
    <!-- 设置 meta 视口标签 -->
    <meta name="viewport" content="width=device-width, initial-scale=1.0, user-scalable=no,maximum-scale=1.0,minimum-scale=1.0">
    <meta http-equiv="X-UA-Compatible" content="ie=edge">
    <title>JavaScript</title>
    <style></style>
    <script>
        // 旧数组 , 要对该数组去重
        var oldArray = [9, 5, 2, 7, 5];

        // 新的空数组
        var newArray = [];

        // 遍历旧数组
        for (var i = 0; i < oldArray.length; i++) {
            // 查询新数组中是否包含指定元素
            var existFlag = newArray.indexOf(oldArray[i]);

            // 如果新数组中不包含指定元素则返回 -1
            if (existFlag === -1) {
                newArray.push(oldArray[i]);
            }
        }

        console.log(newArray);
    </script>
</head>

<body>
</body>

</html>

执行结果 :