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;
}

 

調第一個方法就可以了，第一個參數是一個數組，第二個參數傳一個對象或者數組。

代碼寫的不好，見諒，只是提供一個思路。