直接上代码
<!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>运行结果：
