欧美bbbwbbbw肥妇,免费乱码人妻系列日韩,一级黄片

js?indexOf?的正確用法示例詳解

 更新時(shí)間：2023年02月04日 14:49:30   作者：逆風(fēng)優(yōu)雅  
indexOf()?方法可返回某個(gè)指定的字符串值在字符串中首次出現(xiàn)的位置，這篇文章主要介紹了js?indexOf?的正確用法,需要的朋友可以參考下

js indexOf 的正確用法

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

例如

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

又或者

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

那么，當(dāng)想刪除某個(gè)數(shù)組中的某個(gè)元素時(shí)，常常會(huì)這么寫

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));  //打印結(jié)果為-1

我們發(fā)現(xiàn)obj和arr數(shù)組中第1個(gè)元素時(shí)一樣的。但是卻返回-1。

再試試這個(gè)

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

這下明白了，就是因?yàn)槿绻麛?shù)組中存放的是對(duì)象或者數(shù)組的話，必須是該對(duì)象的引用,才可以使用indexOf得到正確的索引值。

那么，如果想判斷一個(gè)對(duì)象(數(shù)組)在一個(gè)數(shù)組中是否存在(值與元素相等)，如何實(shí)現(xiàn)呢？

只能自己寫一個(gè)方法去實(shí)現(xiàn)了。

最初我是這么寫的

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

上面這段代碼實(shí)現(xiàn)的原理是將數(shù)組中的元素和傳進(jìn)去的對(duì)象都通過JSON.stringify()來轉(zhuǎn)成字符串，然后比較兩個(gè)字符串是否相等，

這個(gè)方法看起來實(shí)現(xiàn)了功能，但是一個(gè)深深的坑藏在其中。

因?yàn)橐坏?duì)象中的字段順序前后顛倒，就會(huì)匹配不到，返回-1(曾經(jīng)被這個(gè)坑深深的傷了心)。

那么到底怎么規(guī)避這樣的問題呢，從原理上來說，就是挨個(gè)比較對(duì)象里每個(gè)元素是否都相等。

看下面代碼

//查找一個(gè)對(duì)象(數(shù)組)是否存在于一個(gè)數(shù)組中
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;
}
//遞歸調(diào)用比較對(duì)象每個(gè)字段
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;
    }
}
//判斷兩個(gè)對(duì)象長(zhǎng)度是否相同。
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;
}

補(bǔ)充：js中indexOf（）的使用

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

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

用法及實(shí)例

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

 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

需要注意的是，當(dāng)匹配到一個(gè)字符串時(shí)，會(huì)返回字符串中第一個(gè)字符的索引，如上例匹配word時(shí)，返回的是6。

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

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

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

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

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

示例4：判斷數(shù)組中是否包含某個(gè)元素

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

到此這篇關(guān)于js indexOf 的正確用法的文章就介紹到這了,更多相關(guān)js indexOf 用法內(nèi)容請(qǐng)搜索腳本之家以前的文章或繼續(xù)瀏覽下面的相關(guān)文章希望大家以后多多支持腳本之家！

相關(guān)文章

最新評(píng)論