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