JavaScript indexOf的第二個(gè)參數(shù)用法
祝大家龍年快樂(lè)呀!indexOf 是我們非常熟悉的一個(gè)方法,它可以用來(lái)獲取某一個(gè)元素在一個(gè)數(shù)組里的位置,我們一般就會(huì)使用 array.indexOf(element) 的方法來(lái)進(jìn)行使用。
但是,大家有沒(méi)有使用過(guò) indexOf 的第二個(gè)參數(shù)呢?第二個(gè)參數(shù)的使用會(huì)經(jīng)常出現(xiàn)在一些優(yōu)秀的庫(kù)的源碼當(dāng)中,用于依次分析(或者說(shuō)掃描)某一個(gè)字符串。
比如命令行美化輸出的 chalk 庫(kù)中就有此應(yīng)用,因?yàn)?chalk 庫(kù)的原理就是對(duì)于我們輸出在終端的內(nèi)容進(jìn)行處理,然后將處理后的字符串顯示在終端上。
indexOf 基本用法
首先,我們還是先來(lái)回顧一下 indexOf 的最基本用法。
給定一個(gè)數(shù)組:[10, 20, 30],尋找這個(gè)數(shù)組中 30 的位置,是 2。
const arr = [10, 20, 30]; const element = 30; const index = arr.indexOf(element); console.log(index); // 2
indexOf 的第二個(gè)參數(shù)
明確了 indexOf 的基本用法以后,它的第 2 個(gè)參數(shù)有什么用呢?
其實(shí)是起到了一個(gè)調(diào)整從哪里開(kāi)始查找的作用。
我們來(lái)看一個(gè)例子:
const arr = [10, 20, 30]; const element = 10; const index = arr.indexOf(element); console.log(index); // 0 const arr2 = [10, 20, 30, 10]; const element2 = 10; const index2 = arr2.indexOf(element2, 1); console.log(index2); // 3
可以看到,同樣是查找 [10, 20, 30, 10] 當(dāng)中 10 的位置,但是因?yàn)榈谝淮问菑臄?shù)組第 1 個(gè)元素開(kāi)始查找的,所以得到的結(jié)果是 0。
而第二次是從數(shù)組的第 2 個(gè)元素開(kāi)始查找的,所以得到的結(jié)果是 3。
優(yōu)秀庫(kù)源碼里的使用
明確了 indexOf 第二個(gè)參數(shù)的使用之后,我們?cè)賮?lái)看一下在一些優(yōu)秀的庫(kù)的源碼里面,它們是如何利用起這個(gè)第二個(gè)參數(shù)的作用的。
注意:我下面會(huì)以
String.prototype.indexOf舉例,而上面舉的例子是以Array.prototype.indexOf為例,但是這兩個(gè) API 的第二個(gè)參數(shù)都是起到一個(gè)搜索位置的作用,所以在這里可以一起學(xué)習(xí)一下
這里,我們只會(huì)分析它的思想,具體的實(shí)現(xiàn)在具體的源碼里會(huì)存在差異,但思想是相同的。
我們首先定義一個(gè)方法,addEmoji,接受三個(gè)參數(shù):
/**
* 在一個(gè) string 的 targetString 后面,加上一個(gè) emoji
* @param string 原始 string
* @param targetString 加 emoji 的那個(gè) string
* @param emoji 加入的 emoji
* @returns 處理后的最終結(jié)果
*/
function addEmoji(string, targetString, emoji) {
let result = "";
// 一系列處理
// ...
return result;
}
我們最終會(huì)這樣調(diào)用,在 大家好,我是哈默,今天是一個(gè)好天氣。 的 好 這個(gè)字的后面,加上 ?? 的 emoji:
const res = addEmoji("大家好,我是哈默,今天是一個(gè)好天氣。", "好", "??");
console.log(res);
那么首先我們就可以使用 indexOf 方法來(lái)從輸入的字符串里找到 好 的位置:
function addEmoji(string, targetString, emoji) {
// 找到 targetString 的位置
let index = string.indexOf(targetString);
let result = "";
// 記錄當(dāng)前掃描到的位置,現(xiàn)在是在參數(shù) string 的開(kāi)頭位置
// 因?yàn)?string 當(dāng)中,可能會(huì)存在多個(gè) targetString,所以我們會(huì)跳著進(jìn)行掃描,也就是會(huì)使用 indexOf 的第二個(gè)參數(shù)
let currentScanIndex = 0;
return result;
}
如果我們找到了 targetString,即 index !== -1,那么我們就在 targetString 后,加上一個(gè) emoji:
function addEmoji(string, targetString, emoji) {
// 找到 targetString 的位置
let index = string.indexOf(targetString);
let result = "";
// 記錄當(dāng)前掃描到的位置,現(xiàn)在是在參數(shù) string 的開(kāi)頭位置
// 因?yàn)?string 當(dāng)中,可能會(huì)存在多個(gè) targetString,所以我們會(huì)跳著進(jìn)行掃描,也就是會(huì)使用 indexOf 的第二個(gè)參數(shù)
let currentScanIndex = 0;
// 如果找到了 targetString
if (index !== -1) {
// 在 targetString 后面增加 emoji
result += string.slice(currentScanIndex, index) + targetString + emoji;
// 將當(dāng)前掃描位置,移動(dòng)到 targetString 之后的那個(gè)位置上
currentScanIndex = index + targetString.length;
}
// 將 targetString 之后的內(nèi)容追加到 result 里
result += string.slice(currentScanIndex);
return result;
}
此時(shí),我們?cè)诘谝粋€(gè) 好 字后面,加上了 ??,得到的結(jié)果:

但是,我們這個(gè)字符串中,還有一個(gè) 好天氣 的 好,也就是存在多個(gè) targetString,所以我們這里不能是 if 只執(zhí)行一次,而是要做一個(gè)循環(huán)。
我們可以使用一個(gè) while 循環(huán):
function addEmoji(string, targetString, emoji) {
// 找到 targetString 的位置
let index = string.indexOf(targetString);
let result = "";
// 記錄當(dāng)前掃描到的位置,現(xiàn)在是在參數(shù) string 的開(kāi)頭位置
// 因?yàn)?string 當(dāng)中,可能會(huì)存在多個(gè) targetString,所以我們會(huì)跳著進(jìn)行掃描,也就是會(huì)使用 indexOf 的第二個(gè)參數(shù)
let currentScanIndex = 0;
// 如果找到了 targetString
while (index !== -1) {
// 在 targetString 后面增加 emoji
result += string.slice(currentScanIndex, index) + targetString + emoji;
// 將當(dāng)前掃描位置,移動(dòng)到 targetString 之后的那個(gè)位置上
currentScanIndex = index + targetString.length;
+ // 重點(diǎn)來(lái)了?。?!我們要從當(dāng)前掃描的位置開(kāi)始,去尋找 targetString
+ index = string.indexOf(targetString, currentScanIndex);
}
// 將 targetString 之后的內(nèi)容追加到 result 里
result += string.slice(currentScanIndex);
return result;
}
此時(shí),我們便成功的給第二個(gè) 好,也加上了 emoji:

這個(gè)地方我們就使用到了之前提到的 indexOf 的第二個(gè)參數(shù):
// 重點(diǎn)來(lái)了?。?!我們要從當(dāng)前掃描的位置開(kāi)始,去尋找 targetString index = string.indexOf(targetString, currentScanIndex);
這個(gè)地方我們就使用到了之前提到的 indexOf 的第二個(gè)參數(shù):
// 重點(diǎn)來(lái)了?。?!我們要從當(dāng)前掃描的位置開(kāi)始,去尋找 targetString index = string.indexOf(targetString, currentScanIndex);
我們是從當(dāng)前掃描到的位置 currentScanIndex 開(kāi)始,查找 targetString 的,這樣我們就可以找到下一個(gè) targetString 了。
所以,這里的思想就是通過(guò) indexOf 的第二個(gè)參數(shù),幫助我們能夠依次掃描一個(gè)字符串,依次找到我們想要找的那個(gè)元素的位置,然后做相應(yīng)的處理。
總結(jié)
indexOf 的第二個(gè)參數(shù),叫 fromIndex,看到這里,大家應(yīng)該也能很好的理解這個(gè) fromIndex 的作用了,就是從哪里開(kāi)始找嘛!
以上就是JavaScript indexOf的第二個(gè)參數(shù)用法的詳細(xì)內(nèi)容,更多關(guān)于JavaScript indexOf第二個(gè)參數(shù)的資料請(qǐng)關(guān)注腳本之家其它相關(guān)文章!
相關(guān)文章
前端頁(yè)面在移動(dòng)設(shè)備上顯示不正常的原因及解決方案
當(dāng)頁(yè)面在移動(dòng)設(shè)備上顯示不正常時(shí),通常是由于布局、樣式或響應(yīng)式設(shè)計(jì)設(shè)置不當(dāng)所引起的,移動(dòng)設(shè)備的屏幕尺寸、分辨率和交互方式與桌面設(shè)備有很大的不同,本文將詳細(xì)介紹常見(jiàn)的導(dǎo)致頁(yè)面在移動(dòng)設(shè)備上顯示不正常的原因,以及如何解決這些問(wèn)題,需要的朋友可以參考下2024-09-09
JavaScript原生對(duì)象之String對(duì)象的屬性和方法詳解
這篇文章主要介紹了JavaScript原生對(duì)象之String對(duì)象的屬性和方法詳解,本文講解了length、charAt()、charCodeAt()、concat()、indexOf()、lastIndexOf()等方法屬性,需要的朋友可以參考下2015-03-03
js無(wú)后端實(shí)現(xiàn)點(diǎn)擊加載查看更多(提示SEO友好度)
為了提示SEO友好度,并且避免調(diào)用后端接口給服務(wù)器造成負(fù)擔(dān),可以使用js無(wú)后端實(shí)現(xiàn)點(diǎn)擊加載查看更多,比如HTML中源碼存在60條記錄,預(yù)先顯示20條記錄,點(diǎn)擊“查看更多”一次追加10條,最后一次后按鈕文本改為“已查看全部”,在JavaScript中,你可以使用以下步驟來(lái)實(shí)現(xiàn)2024-10-10
JS獲取當(dāng)前網(wǎng)頁(yè)大小以及屏幕分辨率等
這篇文章主要介紹了JS獲取當(dāng)前網(wǎng)頁(yè)大小以及屏幕分辨率等,方法雖簡(jiǎn)單,但比較實(shí)用,需要的朋友可以參考下2014-09-09
JavaScript實(shí)現(xiàn)DOM對(duì)象選擇器
這篇文章主要為大家詳細(xì)介紹了JavaScript實(shí)現(xiàn)DOM對(duì)象選擇器,具有一定的參考價(jià)值,感興趣的小伙伴們可以參考一下2016-09-09

