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

偏执的太偏执、 2022-01-27 04:09 1847阅读 0赞

直接上代码

<!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>

运行结果：

![watermark_type_ZmFuZ3poZW5naGVpdGk_shadow_10_text_aHR0cHM6Ly9ibG9nLmNzZG4ubmV0L3FxXzMzNzIxMzgy_size_16_color_FFFFFF_t_70][]

[watermark_type_ZmFuZ3poZW5naGVpdGk_shadow_10_text_aHR0cHM6Ly9ibG9nLmNzZG4ubmV0L3FxXzMzNzIxMzgy_size_16_color_FFFFFF_t_70]: /images/20220127/a086c7fc1bf0464e8e4b15a6c77ac253.png