js?indexOf?的正確用法示例詳解
js indexOf 的正確用法
indexOf在js中有著重要的作用，可以判斷一個元素是否在數(shù)組中存在，或者判斷一個字符是否在字符串中存在，如果存在返回該元素或字符第一次出現(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)想刪除某個數(shù)組中的某個元素時，常常會這么寫
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個元素時一樣的。但是卻返回-1。
再試試這個
var arr = [{name:"racyily",age:22},{name:"susan",age:18}];
var arr2 = arr[1];
console.log(arr.indexOf(arr2)); //打印結(jié)果為1這下明白了，就是因為如果數(shù)組中存放的是對象或者數(shù)組的話，必須是該對象的引用,才可以使用indexOf得到正確的索引值。
那么，如果想判斷一個對象(數(shù)組)在一個數(shù)組中是否存在(值與元素相等)，如何實現(xiàn)呢？
只能自己寫一個方法去實現(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;
}上面這段代碼實現(xiàn)的原理是將數(shù)組中的元素和傳進(jìn)去的對象都通過JSON.stringify()來轉(zhuǎn)成字符串，然后比較兩個字符串是否相等，
這個方法看起來實現(xiàn)了功能，但是一個深深的坑藏在其中。
因為一旦對象中的字段順序前后顛倒，就會匹配不到，返回-1(曾經(jīng)被這個坑深深的傷了心)。
那么到底怎么規(guī)避這樣的問題呢，從原理上來說，就是挨個比較對象里每個元素是否都相等。
看下面代碼
//查找一個對象(數(shù)組)是否存在于一個數(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)用比較對象每個字段
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;
}補(bǔ)充：js中indexOf（）的使用
語法：
String.IndexOf(Char, [startIndex], [count])：
定義
----返回指定字符在原字符串中的第一個匹配項的索引。如省略第二個參數(shù)，則將從字符串的首字符開始檢索。
-----可指定字符開始檢索位置和指定長度的字符，若沒有找到該字符，則返回 -1。
-----也可以判斷數(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)匹配到一個字符串時，會返回字符串中第一個字符的索引，如上例匹配word時，返回的是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：判斷字符串中是否包含某個字符的情景中：
var str = "Hello world! wo shi oll"
console.log(str.indexOf("World") == -1) //true
console.log(str.indexOf("world") == -1) //false示例4：判斷數(shù)組中是否包含某個元素
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)容請搜索腳本之家以前的文章或繼續(xù)瀏覽下面的相關(guān)文章希望大家以后多多支持腳本之家！
相關(guān)文章
今天小編就為大家分享一篇使用layui的layer組件做彈出層的例子，具有很好的參考價值，希望對大家有所幫助。一起跟隨小編過來看看吧2019-09-09
這篇文章主要介紹了微信小程序緩存時效性，文中通過示例代碼介紹的非常詳細(xì)，對大家的學(xué)習(xí)或者工作具有一定的參考學(xué)習(xí)價值，需要的朋友們下面隨著小編來一起學(xué)習(xí)學(xué)習(xí)吧2019-05-05
用js實現(xiàn)彈出層效果，一般用于代替alert2008-03-03
這篇文章主要介紹了JS實現(xiàn)中文漢字按拼音排序的方法,涉及javascript針對中文字符串的轉(zhuǎn)換、遍歷、排序等相關(guān)操作技巧,需要的朋友可以參考下2017-10-10
最近在百度搜索的時候，當(dāng)你輸入一個字或者詞的時候，他會給你們彈出一個下拉框出來，里面是和你相關(guān)的搜索提示，效果非常人性化，基于js怎么實現(xiàn)搜索關(guān)鍵詞智能提示功能，下面小編通過實例代碼給大家介紹下，需要的的朋友參考下吧2017-07-07
這篇文章主要介紹了URL中“#” “？” &“”號的作用淺析,非常不錯，具有參考借鑒價值，需要的朋友可以參考下2017-02-02
用javascript實現(xiàn)div可編輯的常見方法
用javascript實現(xiàn)div可編輯的常見方法...2007-10-10
編寫更好的JavaScript條件式和匹配條件的技巧(小結(jié))
這篇文章主要介紹了編寫更好的JavaScript條件式和匹配條件的技巧(小結(jié))，文中通過示例代碼介紹的非常詳細(xì)，對大家的學(xué)習(xí)或者工作具有一定的參考學(xué)習(xí)價值，需要的朋友們下面隨著小編來一起學(xué)習(xí)學(xué)習(xí)吧2019-06-06
javascript中Date format(js日期格式化)方法小結(jié)
這篇文章主要介紹了javascript中Date format,即js日期格式化的方法.實例總結(jié)了三種常見的JavaScript日期格式化技巧,需要的朋友可以參考下2015-12-12
這篇文章主要分享了一些javascript下拉框選項單擊事件的例子，以及在例子中遇到的問題的解決方法，十分實用，推薦給小伙伴們參考下。2015-03-03