JavaScript indexOf的第二個(gè)參數(shù)用法
祝大家龍年快樂呀！indexOf 是我們非常熟悉的一個(gè)方法，它可以用來獲取某一個(gè)元素在一個(gè)數(shù)組里的位置，我們一般就會(huì)使用 array.indexOf(element) 的方法來進(jìn)行使用。
但是，大家有沒有使用過 indexOf 的第二個(gè)參數(shù)呢？第二個(gè)參數(shù)的使用會(huì)經(jīng)常出現(xiàn)在一些優(yōu)秀的庫的源碼當(dāng)中，用于依次分析（或者說掃描）某一個(gè)字符串。
比如命令行美化輸出的 chalk 庫中就有此應(yīng)用，因?yàn)?chalk 庫的原理就是對(duì)于我們輸出在終端的內(nèi)容進(jìn)行處理，然后將處理后的字符串顯示在終端上。
indexOf 基本用法
首先，我們還是先來回顧一下 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)整從哪里開始查找的作用。
我們來看一個(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è)元素開始查找的，所以得到的結(jié)果是 0。
而第二次是從數(shù)組的第 2 個(gè)元素開始查找的，所以得到的結(jié)果是 3。
優(yōu)秀庫源碼里的使用
明確了 indexOf 第二個(gè)參數(shù)的使用之后，我們?cè)賮砜匆幌略谝恍﹥?yōu)秀的庫的源碼里面，它們是如何利用起這個(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 方法來從輸入的字符串里找到 好 的位置：
function addEmoji(string, targetString, emoji) {
// 找到 targetString 的位置
let index = string.indexOf(targetString);
let result = "";
// 記錄當(dāng)前掃描到的位置，現(xiàn)在是在參數(shù) string 的開頭位置
// 因?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 的開頭位置
// 因?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 的開頭位置
// 因?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)來了?。。∥覀円獜漠?dāng)前掃描的位置開始，去尋找 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)來了！??！我們要從當(dāng)前掃描的位置開始，去尋找 targetString index = string.indexOf(targetString, currentScanIndex);
這個(gè)地方我們就使用到了之前提到的 indexOf 的第二個(gè)參數(shù)：
// 重點(diǎn)來了?。?！我們要從當(dāng)前掃描的位置開始，去尋找 targetString index = string.indexOf(targetString, currentScanIndex);
我們是從當(dāng)前掃描到的位置 currentScanIndex 開始，查找 targetString 的，這樣我們就可以找到下一個(gè) targetString 了。
所以，這里的思想就是通過 indexOf 的第二個(gè)參數(shù)，幫助我們能夠依次掃描一個(gè)字符串，依次找到我們想要找的那個(gè)元素的位置，然后做相應(yīng)的處理。
總結(jié)
indexOf 的第二個(gè)參數(shù)，叫 fromIndex，看到這里，大家應(yīng)該也能很好的理解這個(gè) fromIndex 的作用了，就是從哪里開始找嘛！
以上就是JavaScript indexOf的第二個(gè)參數(shù)用法的詳細(xì)內(nèi)容，更多關(guān)于JavaScript indexOf第二個(gè)參數(shù)的資料請(qǐng)關(guān)注腳本之家其它相關(guān)文章！
相關(guān)文章
JavaScript事件驅(qū)動(dòng)2008-08-08
本文主要介紹了Javascript中的prototype與繼承，具有一定的參考價(jià)值，下面跟著小編一起來看下吧2017-02-02
這篇文章主要介紹了基于ajax實(shí)現(xiàn)上傳圖片代碼示例解析,文中通過示例代碼介紹的非常詳細(xì)，對(duì)大家的學(xué)習(xí)或者工作具有一定的參考學(xué)習(xí)價(jià)值,需要的朋友可以參考下2020-12-12
前端頁面在移動(dòng)設(shè)備上顯示不正常的原因及解決方案
當(dāng)頁面在移動(dòng)設(shè)備上顯示不正常時(shí),通常是由于布局、樣式或響應(yīng)式設(shè)計(jì)設(shè)置不當(dāng)所引起的,移動(dòng)設(shè)備的屏幕尺寸、分辨率和交互方式與桌面設(shè)備有很大的不同,本文將詳細(xì)介紹常見的導(dǎo)致頁面在移動(dòng)設(shè)備上顯示不正常的原因,以及如何解決這些問題,需要的朋友可以參考下2024-09-09
JavaScript原生對(duì)象之String對(duì)象的屬性和方法詳解
這篇文章主要介紹了JavaScript原生對(duì)象之String對(duì)象的屬性和方法詳解,本文講解了length、charAt()、charCodeAt()、concat()、indexOf()、lastIndexOf()等方法屬性,需要的朋友可以參考下2015-03-03
js無后端實(shí)現(xiàn)點(diǎn)擊加載查看更多（提示SEO友好度）
為了提示SEO友好度,并且避免調(diào)用后端接口給服務(wù)器造成負(fù)擔(dān),可以使用js無后端實(shí)現(xiàn)點(diǎn)擊加載查看更多,比如HTML中源碼存在60條記錄,預(yù)先顯示20條記錄,點(diǎn)擊“查看更多”一次追加10條,最后一次后按鈕文本改為“已查看全部”,在JavaScript中,你可以使用以下步驟來實(shí)現(xiàn)2024-10-10
這篇文章主要為大家詳細(xì)介紹了JavaScript實(shí)現(xiàn)更換背景圖片,文中示例代碼介紹的非常詳細(xì)，具有一定的參考價(jià)值，感興趣的小伙伴們可以參考一下2019-10-10
JS獲取當(dāng)前網(wǎng)頁大小以及屏幕分辨率等
這篇文章主要介紹了JS獲取當(dāng)前網(wǎng)頁大小以及屏幕分辨率等,方法雖簡(jiǎn)單，但比較實(shí)用，需要的朋友可以參考下2014-09-09
JavaScript實(shí)現(xiàn)DOM對(duì)象選擇器
這篇文章主要為大家詳細(xì)介紹了JavaScript實(shí)現(xiàn)DOM對(duì)象選擇器,具有一定的參考價(jià)值，感興趣的小伙伴們可以參考一下2016-09-09
這篇文章主要介紹了Cookies 和 Session的詳解及區(qū)別的相關(guān)資料,需要的朋友可以參考下2017-04-04