JavaScript中indexOf()方法完整指南：从基础到实战
东城
·2026-01-31
学习如何使用JavaScript中的indexOf()方法，包含语法详解
这是一篇面向初学者的深度解析，涵盖JavaScript强大的indexOf()方法——从字符串到数组，以及真实世界的应用示例。
🔍 JavaScript中的indexOf()是什么？
indexOf()方法用于查找字符串或数组中特定元素的位置（索引）。如果未找到，则返回-1。
🧪 语法
对于字符串：
string.indexOf(searchValue, startIndex)
javascript
对于数组：
array.indexOf(searchElement, fromIndex)
javascript
📘 在字符串中使用indexOf()
const text = "JavaScript is amazing";
console.log(text.indexOf("Script")); // 4
javascript
✅ 大小写敏感性
console.log(text.indexOf("script")); // -1
javascript
🔁 查找第一次出现
const sentence = "I love JavaScript because JavaScript is fun!";
console.log(sentence.indexOf("JavaScript")); // 7
javascript
🕵️‍♂️ 查找所有出现位置
const str = "JS is cool. JS is powerful. JS is everywhere!";
let index = str.indexOf("JS");
while (index !== -1) {
console.log("Found at:", index);
index = str.indexOf("JS", index + 1);
}
javascript
🧾 在数组中使用indexOf()
const fruits = ["apple", "banana", "cherry", "apple"];
console.log(fruits.indexOf("apple")); // 0
console.log(fruits.indexOf("cherry")); // 2
javascript
const numbers = [1, 5, 10, 15];
console.log(numbers.indexOf(10)); // 2
console.log(numbers.indexOf(20)); // -1
javascript
🎯 检查元素是否存在
if (fruits.indexOf("banana") !== -1) {
console.log("Banana is in the list!");
}
javascript
🧠 indexOf() vs includes()
特性
indexOf()
includes()
返回值
索引或-1
true / false
使用场景
查找位置
检查存在性
⚡ 性能提示
// 更简单的检查
arr.includes("item");

// 更灵活
arr.indexOf("item") !== -1
javascript
📌 真实世界应用案例
const input = "Learn JavaScript the fun way!";
const term = "JavaScript";

if (input.indexOf(term) !== -1) {
console.log(`The term "${term}" exists in the sentence.`);
}
javascript
❓ 常见面试题
Q: 如何在不使用正则表达式的情况下检查字符串是否包含某个单词？
A: 使用.indexOf()并将结果与-1进行比较。
🧩 练习挑战
编写一个函数，查找句子中是否存在单词"React"并返回其位置。
function findReact(sentence) {
return sentence.indexOf("React");
}

console.log(findReact("I love React and JavaScript")); // 7
javascript
✅ 总结
适用于字符串和数组
找到时返回索引，未找到时返回-1
区分大小写
仅检查存在性时使用includes()
🧠 常见问题
Q: indexOf()能在数组中查找对象吗？
A: 不能，只能查找字符串、数字等原始值。
Q: 如果存在多个匹配项怎么办？
A: 只返回第一个索引。
Q: indexOf()会修改数组或字符串吗？
A: 不会，它是非变异的。
🔥 想要更多内容？
阅读完整博客（包含图片和格式）：
👉 https://webcodingwithankur.blogspot.com/2025/07/indexof-in-javascript-complete-guide.html
深入理解indexOf()方法
1. 基础用法详解
字符串搜索
// 基本搜索
const text = "Hello World";
console.log(text.indexOf("World")); // 6
console.log(text.indexOf("world")); // -1 (区分大小写)

// 从指定位置开始搜索
console.log(text.indexOf("o", 5)); // 7 (从索引5开始搜索'o')
console.log(text.indexOf("o", 8)); // -1 (从索引8开始搜索'o'，未找到)

// 搜索空字符串
console.log(text.indexOf("")); // 0 (空字符串总是存在于任何字符串的开始)
console.log(text.indexOf("", 5)); // 5 (从索引5开始，空字符串存在于索引5)
javascript
数组搜索
const numbers = [1, 2, 3, 4, 5, 2, 6];
console.log(numbers.indexOf(2)); // 1 (第一个2的位置)
console.log(numbers.indexOf(2, 2)); // 5 (从索引2开始搜索，找到第二个2)

const mixed = [1, "hello", true, null, undefined];
console.log(mixed.indexOf("hello")); // 1
console.log(mixed.indexOf(true)); // 2
console.log(mixed.indexOf(null)); // 3
console.log(mixed.indexOf(undefined)); // 4
javascript
2. 高级应用场景
查找所有匹配项
function findAllOccurrences(str, searchValue) {
const positions = [];
let index = str.indexOf(searchValue);
while (index !== -1) {
positions.push(index);
index = str.indexOf(searchValue, index + 1);
}
return positions;
}

const text = "JavaScript is amazing and JavaScript is powerful";
console.log(findAllOccurrences(text, "JavaScript")); // [0, 25]
console.log(findAllOccurrences(text, "is")); // [11, 33, 36]
javascript
检查字符串是否以特定内容开始或结束
function startsWith(str, prefix) {
return str.indexOf(prefix) === 0;
}

function endsWith(str, suffix) {
const index = str.indexOf(suffix);
return index !== -1 && index === str.length - suffix.length;
}

console.log(startsWith("Hello World", "Hello")); // true
console.log(startsWith("Hello World", "World")); // false
console.log(endsWith("Hello World", "World")); // true
console.log(endsWith("Hello World", "Hello")); // false
javascript
提取子字符串
function extractBetween(str, startDelimiter, endDelimiter) {
const startIndex = str.indexOf(startDelimiter);
if (startIndex === -1) return null;
const endIndex = str.indexOf(endDelimiter, startIndex + startDelimiter.length);
if (endIndex === -1) return null;
return str.substring(startIndex + startDelimiter.length, endIndex);
}

const text = "Hello [World] and [Universe]";
console.log(extractBetween(text, "[", "]")); // "World"
javascript
3. 实际项目应用
表单验证
function validateEmail(email) {
// 检查是否包含@符号
const atIndex = email.indexOf("@");
if (atIndex === -1) {
return "邮箱必须包含@符号";
}
// 检查@符号不在开头或结尾
if (atIndex === 0 || atIndex === email.length - 1) {
return "@符号不能在开头或结尾";
}
// 检查是否包含域名
const dotIndex = email.indexOf(".", atIndex);
if (dotIndex === -1 || dotIndex === atIndex + 1) {
return "邮箱格式不正确";
}
return "邮箱格式正确";
}

console.log(validateEmail("user@example.com")); // "邮箱格式正确"
console.log(validateEmail("user@.com")); // "邮箱格式不正确"
console.log(validateEmail("@example.com")); // "@符号不能在开头或结尾"
javascript
文件路径处理
function getFileExtension(filename) {
const lastDotIndex = filename.lastIndexOf(".");
if (lastDotIndex === -1 || lastDotIndex === filename.length - 1) {
return null;
}
return filename.substring(lastDotIndex + 1);
}

function getFileNameWithoutExtension(filename) {
const lastDotIndex = filename.lastIndexOf(".");
if (lastDotIndex === -1) {
return filename;
}
return filename.substring(0, lastDotIndex);
}

console.log(getFileExtension("document.pdf")); // "pdf"
console.log(getFileExtension("image.jpg")); // "jpg"
console.log(getFileExtension("README")); // null
console.log(getFileNameWithoutExtension("document.pdf")); // "document"
javascript
URL参数解析
function getQueryParam(url, paramName) {
const queryIndex = url.indexOf("?");
if (queryIndex === -1) return null;
const queryString = url.substring(queryIndex + 1);
const paramStart = queryString.indexOf(paramName + "=");
if (paramStart === -1) return null;
const valueStart = paramStart + paramName.length + 1;
const valueEnd = queryString.indexOf("&", valueStart);
if (valueEnd === -1) {
return queryString.substring(valueStart);
}
return queryString.substring(valueStart, valueEnd);
}

const url = "https://example.com/page?name=John&age=25&city=NYC";
console.log(getQueryParam(url, "name")); // "John"
console.log(getQueryParam(url, "age")); // "25"
console.log(getQueryParam(url, "city")); // "NYC"
console.log(getQueryParam(url, "country")); // null
javascript
4. 性能优化技巧
使用includes()进行简单存在性检查
// 性能更好的方式
const fruits = ["apple", "banana", "cherry"];

// 推荐：使用includes()检查存在性
if (fruits.includes("banana")) {
console.log("Found banana!");
}

// 不推荐：使用indexOf()检查存在性
if (fruits.indexOf("banana") !== -1) {
console.log("Found banana!");
}
javascript
缓存indexOf()结果
function processText(text, searchTerm) {
const index = text.indexOf(searchTerm);
if (index !== -1) {
// 使用缓存的索引值，避免重复计算
const before = text.substring(0, index);
const after = text.substring(index + searchTerm.length);
return {
found: true,
position: index,
before,
after,
replacement: before + "[HIGHLIGHTED]" + after
};
}
return { found: false };
}

console.log(processText("Hello World", "World"));
// { found: true, position: 6, before: "Hello ", after: "", replacement: "Hello [HIGHLIGHTED]" }
javascript
5. 常见陷阱和解决方案
陷阱1：NaN的处理
const arr = [1, 2, NaN, 4];
console.log(arr.indexOf(NaN)); // -1 (NaN !== NaN)

// 解决方案：使用includes()
console.log(arr.includes(NaN)); // true

// 或者自定义函数
function indexOfNaN(arr) {
for (let i = 0; i < arr.length; i++) {
if (Number.isNaN(arr[i])) {
return i;
}
}
return -1;
}

console.log(indexOfNaN(arr)); // 2
javascript
陷阱2：对象比较
const objects = [{ id: 1 }, { id: 2 }, { id: 3 }];
console.log(objects.indexOf({ id: 2 })); // -1 (对象引用不同)

// 解决方案：使用findIndex()
const index = objects.findIndex(obj => obj.id === 2);
console.log(index); // 1

// 或者使用some()检查存在性
const exists = objects.some(obj => obj.id === 2);
console.log(exists); // true
javascript
陷阱3：稀疏数组
const sparseArray = [1, , 3, , 5];
console.log(sparseArray.indexOf(undefined)); // -1 (稀疏数组的空槽不是undefined)

// 解决方案：检查长度
for (let i = 0; i < sparseArray.length; i++) {
if (!(i in sparseArray)) {
console.log(`Empty slot at index ${i}`);
}
}
javascript
6. 现代JavaScript替代方案
使用findIndex()查找复杂条件
const users = [
{ id: 1, name: "Alice", age: 25 },
{ id: 2, name: "Bob", age: 30 },
{ id: 3, name: "Charlie", age: 35 }
];

// 使用indexOf()无法实现
// const index = users.indexOf({ name: "Bob" }); // -1

// 使用findIndex()
const bobIndex = users.findIndex(user => user.name === "Bob");
console.log(bobIndex); // 1

// 使用find()获取对象
const bob = users.find(user => user.name === "Bob");
console.log(bob); // { id: 2, name: "Bob", age: 30 }
javascript
使用includes()和startsWith()/endsWith()
const text = "Hello World";

// 检查包含
console.log(text.includes("World")); // true

// 检查开始
console.log(text.startsWith("Hello")); // true

// 检查结束
console.log(text.endsWith("World")); // true

// 这些方法比indexOf()更语义化
javascript
7. 面试题和练习
面试题1：实现自定义indexOf
function customIndexOf(str, searchValue, fromIndex = 0) {
if (fromIndex < 0) fromIndex = 0;
if (fromIndex >= str.length) return -1;
const searchLength = searchValue.length;
if (searchLength === 0) return fromIndex;
for (let i = fromIndex; i <= str.length - searchLength; i++) {
let match = true;
for (let j = 0; j < searchLength; j++) {
if (str[i + j] !== searchValue[j]) {
match = false;
break;
}
}
if (match) return i;
}
return -1;
}

console.log(customIndexOf("Hello World", "World")); // 6
console.log(customIndexOf("Hello World", "World", 7)); // -1
javascript
面试题2：查找最长重复子字符串
function findLongestRepeatedSubstring(str) {
let longest = "";
for (let i = 0; i < str.length; i++) {
for (let j = i + 1; j < str.length; j++) {
const substring = str.substring(i, j);
const nextIndex = str.indexOf(substring, j);
if (nextIndex !== -1 && substring.length > longest.length) {
longest = substring;
}
}
}
return longest;
}

console.log(findLongestRepeatedSubstring("banana")); // "ana"
console.log(findLongestRepeatedSubstring("abcd")); // ""
javascript
面试题3：检查字符串是否为回文
function isPalindrome(str) {
const cleanStr = str.toLowerCase().replace(/[^a-z0-9]/g, "");
const length = cleanStr.length;
for (let i = 0; i < length / 2; i++) {
if (cleanStr[i] !== cleanStr[length - 1 - i]) {
return false;
}
}
return true;
}

console.log(isPalindrome("A man, a plan, a canal: Panama")); // true
console.log(isPalindrome("race a car")); // false
javascript
总结
indexOf()方法是JavaScript中处理字符串和数组搜索的基础工具。虽然现代JavaScript提供了更多语义化的方法（如includes()、findIndex()等），但indexOf()仍然在需要获取位置信息的场景中发挥着重要作用。
关键要点：
基本用法：查找元素位置，未找到返回-1
大小写敏感：字符串搜索区分大小写
性能考虑：简单存在性检查优先使用includes()
实际应用：表单验证、文件处理、URL解析等
现代替代：复杂条件使用findIndex()、find()等方法
掌握indexOf()方法将帮助你更好地处理字符串和数组操作，为更复杂的JavaScript开发打下坚实基础。
Aa