直接上代碼
<!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>
運行結果：
