js indexOf 的正確用法示例詳解

Posted on 2023-02-05 by WalkonNet

js indexOf 的正確用法

indexOf在js中有著重要的作用，可以判斷一個元素是否在數組中存在，或者判斷一個字符是否在字符串中存在，如果存在返回該元素或字符第一次出現的位置的索引，不存在返回-1。

例如

var arr = [1, 2, 3];
console.log(arr.indexOf(2));    //打印結果為1

又或者

var str = "helloworld";
console.log(str.indexOf("w"));  //打印結果為5

那麼，當想刪除某個數組中的某個元素時，常常會這麼寫

var arr = [1, 2, 3];
var idx = arr.indexOf(2);
arr.splice(idx,1);
console.log(arr);

但是，indexOf真的就是好東西嗎？看下面的代碼。

var arr = [{name:"racyily",age:22},{name:"susan",age:18}];
var obj = {name:"susan",age:18};
console.log(arr.indexOf(obj));  //打印結果為-1

我們發現obj和arr數組中第1個元素時一樣的。但是卻返回-1。

再試試這個

var arr = [{name:"racyily",age:22},{name:"susan",age:18}];
var arr2 = arr[1];
console.log(arr.indexOf(arr2));  //打印結果為1

這下明白瞭，就是因為如果數組中存放的是對象或者數組的話，必須是該對象的引用,才可以使用indexOf得到正確的索引值。

那麼，如果想判斷一個對象(數組)在一個數組中是否存在(值與元素相等)，如何實現呢？

隻能自己寫一個方法去實現瞭。

最初我是這麼寫的

var myIndexOf = function(arr,el){
    for(var i=0;i<arr.length;i++){
        if(JSON.stringify(arr[i]) == JSON.stringify(el)){
            return i;
        }
    }
    return -1;
}

上面這段代碼實現的原理是將數組中的元素和傳進去的對象都通過JSON.stringify()來轉成字符串，然後比較兩個字符串是否相等，

這個方法看起來實現瞭功能，但是一個深深的坑藏在其中。

因為一旦對象中的字段順序前後顛倒，就會匹配不到，返回-1(曾經被這個坑深深的傷瞭心)。

那麼到底怎麼規避這樣的問題呢，從原理上來說，就是挨個比較對象裡每個元素是否都相等。

看下面代碼

//查找一個對象(數組)是否存在於一個數組中
function myIndexOf(arr, el) {
    var result = false;
    if (arr instanceof Array && el instanceof Object) {
        for (var i in arr) {
            if(checkLen(arr[i],el)){
                result = recursiveFunc(arr[i], el);
            }
            if (result) {
                return i;
            }
        }
        return -1;
    }
    return -1;
}

//遞歸調用比較對象每個字段
var recursiveFunc = function (arr, o) {
    var result = false;
    if (o instanceof Object) {
        if (!(arr instanceof Object)) {
            return false;
        }
        for (var p in arr) {
            if(checkLen(arr[p],o[p])){
                result = recursiveFunc(arr[p], o[p]);
                if (!result) {
                    return false;
                }
            }
        }
        return true;
    }
    else {
        if (arr == o) {
            return true;
        }
        return false;
    }
}

//判斷兩個對象長度是否相同。
var checkLen = function (o1, o2) {
    var count1 = 0,
        count2 = 0;
    if(o1 instanceof Object && o2 instanceof Object){
        for(var i in o1){
            count1++;
        }
        for(var p in o2){
            count2++;
        }
    }
    return count1==count2;
}

補充：js中indexOf（）的使用

語法：
String.IndexOf(Char, [startIndex], [count])：

定義
—-返回指定字符在原字符串中的第一個匹配項的索引。如省略第二個參數，則將從字符串的首字符開始檢索。
—–可指定字符開始檢索位置和指定長度的字符，若沒有找到該字符，則返回 -1。
—–也可以判斷數組中是否包含某個值。

用法及實例

示例1：查找字符串中某一字符從頭開始第一次出現的索引

 var str = "Hello world!"
   console.log(str.indexOf("o")) //4
  console.log(str.indexOf("Hello")) //0
  console.log(str.indexOf("World")) //-1
  console.log(str.indexOf("world")) //6

需要註意的是，當匹配到一個字符串時，會返回字符串中第一個字符的索引，如上例匹配word時，返回的是6。

示例2：查找字符串中某一字符從指定位置開始第一次出現的索引

   var str = "Hello world! wo shi ooo"
  console.log(str.indexOf("o",8)) //14

有indexOf，也就有lastIndexOf，它和indecOf相反，是匹配字符串最後一次出現的索引
var str = “Hello world! wo shi oll”
onsole.log(str.indexOf(“o”)) //4
console.log(str.lastIndexOf(“o”)) //20`

示例3：判斷字符串中是否包含某個字符的情景中：

var str = "Hello world! wo shi oll"
console.log(str.indexOf("World") == -1) //true
console.log(str.indexOf("world") == -1) //false

示例4：判斷數組中是否包含某個元素

const arr = [1,5,3,8,22]
console.log(arr.indexOf(2))//不存在，返回-1
console.log(arr.indexOf(8))//存在，返回索引3

到此這篇關於js indexOf 的正確用法的文章就介紹到這瞭,更多相關js indexOf 用法內容請搜索WalkonNet以前的文章或繼續瀏覽下面的相關文章希望大傢以後多多支持WalkonNet！

js indexOf 的正確用法示例詳解

目錄