ES6查找数组元素下标的两种方法

最新推荐文章于 2024-08-27 20:59:25 发布

原创最新推荐文章于 2024-08-27 20:59:25 发布 · 2.1w 阅读

2 ·

CC 4.0 BY-SA版权

文章标签：

#ES6 #查找数组元素下标

ES6基本算法专栏收录该内容

1 篇文章

订阅专栏

本文介绍了使用ES6语法查找数组元素下标的两种高效方法，通过示例代码展示了如何快速找到指定元素在数组中的位置。

摘要生成于 C知道，由 DeepSeek-R1 满血版支持，前往体验 >

直接上代码

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

<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <meta http-equiv="X-UA-Compatible" content="ie=edge">
    <title>ES6查找数组元素下标的两种方法</title>
</head>

<body>
    <h2>ES6查找数组元素下标的两种方法</h2>
    <div>
        <h3>方法1：使用for循环遍历数组查找元素</h3>
        <p>好处：支持自定义比较运算，可以自己定义比较的操作，复合条件的才返回下标。</p>
        <p>坏处：好像没啥坏处...</p>
    </div>
    <br>
    <div>
        <h3>方法2：使用Array 数组对象的indexOf方法</h3>
        <p>好处：代码简洁，直接调用JS的API。</p>
        <p>坏处：有的浏览器不支持这种API（IE），需要做兼容性处理。
            另外，indexOf()方法查找的数据查询基本数据类型的话，基本没有什么问题；
            但是查询复合数据类型，就会存在一些问题。因为indexOf内部使用的是===严格比较运算符，
            如果比较的数据类型不是基本数据类型，是复合数据类型，===运算符就会比较它们的内存地址，如果地址相同，===等式才会成立。
            因此，复合数据类型不太适合使用indexOf来查询在数组当中的下标。
        </p>
    </div>
</body>

<script>

    window.onload = function () {
        let arr = [1, 2, 3, 4, 5, 6];
        let arr1 = [
            { "name": "姓名1", "sex": "男" },
            { "name": "姓名2", "sex": "男" },
            { "name": "姓名3", "sex": "男" },
            { "name": "姓名4", "sex": "男" },
            { "name": "姓名5", "sex": "男" },
        ];
        //console.log(indexOf(arr, 3));

        //Array 对象的indexOf方法内部使用的是===严格比较运算符，
        //如果比较的数据类型不是基本数据类型，是复合数据类型，===运算符就会比较它们的内存地址，如果地址相同，===等式才会成立。
        console.log(indexOf(arr1, { "name": "姓名5", "sex": "男" }));    //返回-1
        console.log(indexOf(arr1, arr1[4]));                            //返回4

        console.log(indexOf1(arr, 3));  //返回-2
        console.log(indexOf2(arr, 3));  //返回-2

        console.log(indexOf1(arr1, { "name": "姓名5", "sex": "男" }));    //返回-1
        console.log(indexOf2(arr1, arr1[4]));                            //返回4
    }

    function indexOf(arr, item) {
        if (Array.prototype.indexOf) {
            return arr.indexOf(item);
        } else {
            for (var i = 0; i < arr.length; i++) {
                if (arr[i] === item) {
                    return i;
                }
            }
        }
        return -1;
    }

    //1、使用for循环遍历数组查找元素
    function indexOf1(arr, item) {
        let index = -1;
        for (let i = 0; i < arr.length; i++) {
            if (item === arr[i]) {
                index = i;
                break;
            }
        }
        return index;
    }

    //2、使用Array 数组对象的indexOf方法
    function indexOf2(arr, item) {
        return arr.indexOf(item);
    }



</script>

</html>

运行结果：