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 庫的原理就是對于我們輸出在終端的內(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ù)的使用之后，我們再來看一下在一些優(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í)，我們在第一個(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ù)的資料請關(guān)注腳本之家其它相關(guān)文章！
相關(guān)文章
這篇文章主要介紹了純js實(shí)現(xiàn)遮罩層效果，下面就它的原理做下分析，感興趣的朋友可以參考下2014-05-05
詳談ES6中的迭代器(Iterator)和生成器(Generator)
下面小編就為大家?guī)硪黄斦凟S6中的迭代器(Iterator)和生成器(Generator)。小編覺得挺不錯(cuò)的，現(xiàn)在就分享給大家，也給大家做個(gè)參考。一起跟隨小編過來看看吧2017-07-07
這篇文章主要為大家詳細(xì)介紹了js仿iphone秒表功能，可以計(jì)算平均數(shù)，具有一定的參考價(jià)值，感興趣的小伙伴們可以參考一下2017-01-01
前端JavaScript實(shí)現(xiàn)添加防刪除水印的方案
最近在做一個(gè) AI 多模態(tài)項(xiàng)目,有個(gè)需求是在對話記錄下載預(yù)覽彈窗中加水印,還要要防止用戶去掉我們的水印,所以本文給大家介紹了前端添加防刪除水印的技術(shù)實(shí)現(xiàn),需要的朋友可以參考下2025-10-10
js 動(dòng)態(tài)創(chuàng)建 html元素
最近在學(xué)習(xí)js 寫了個(gè)簡單的效果,菜鳥可以學(xué)習(xí)學(xué)習(xí),基本原理：使用隨即數(shù)設(shè)置top 和left的值，2009-07-07
javascript中attachEvent用法實(shí)例分析
這篇文章主要介紹了javascript中attachEvent用法,實(shí)例分析了javascript中事件綁定的相關(guān)技巧,需要的朋友可以參考下2015-05-05
這篇文章主要介紹了js中!和!!的區(qū)別與用法,js中!的用法是比較靈活的，它除了做邏輯運(yùn)算常常會(huì)用！做類型判斷，可以用！與上對象來求得一個(gè)布爾值，需要的朋友可以參考下2020-05-05
js判斷代碼，比較全，大家可以看下代碼，熟悉常見判斷代碼。2009-04-04
JavaScript實(shí)現(xiàn)圖片懶加載(Lazyload)
這篇文章主要介紹了JavaScript實(shí)現(xiàn)圖片懶加載(Lazyload)的相關(guān)資料,需要的朋友可以參考下2016-11-11
js實(shí)現(xiàn)可控制左右方向的無縫滾動(dòng)效果
這篇文章主要介紹了js實(shí)現(xiàn)可控制左右方向的無縫滾動(dòng)效果,頁面中添加了兩個(gè)按鈕，控制圖片滾動(dòng)的方向，感興趣的小伙伴們可以參考一下2016-05-05