javascript 的 indexof 方法用于查找字符串或数组中指定元素或字符的首次出现位置，若未找到则返回 -1。1. 对字符串而言，indexof() 从指定 fromindex 开始搜索，返回第一次出现的索引，如 sentence.indexof("world") 返回 7；2. 对数组而言，它使用严格相等（===）比较元素，如 fruits.indexof("apple", 1) 返回 3；3. 若未找到匹配项，则统一返回 -1，常用于条件判断，例如检测敏感词或防止重复添加；4. 若需查找所有匹配项，可通过循环结合 fromindex 参数实现；5. indexof 与 lastindexof、find、findindex 和 includes 等方法有明显区别，分别适用于不同场景，如 includes() 更适合仅判断存在性，而 findindex() 支持复杂条件查询索引。
JavaScript 的 indexOf 方法，无论是对字符串还是数组，都是一个非常基础但实用的工具，它能帮你快速找到某个特定元素或字符的首次出现位置，并返回它的索引值。如果没找到，它会很干脆地告诉你：-1。
indexOf 方法的基本用法非常直观。它在字符串和数组上都有，但行为略有不同，值得我们分别来看。
对于字符串，indexOf() 方法返回调用它的 String 对象中第一次出现的指定值的索引，从 fromIndex 处进行搜索。如果未找到该值，则返回 -1。
立即学习“Java免费学习笔记（深入）”；
const sentence = "Hello, world! Welcome to JavaScript.";
const index1 = sentence.indexOf("world"); // 找到 "world" 的起始索引
console.log(index1); // 输出: 7
const index2 = sentence.indexOf("JavaScript", 20); // 从索引20开始查找 "JavaScript"
console.log(index2); // 输出: 23
const index3 = sentence.indexOf("Python"); // 查找不存在的字符串
console.log(index3); // 输出: -1
// 注意：indexOf 是区分大小写的
const index4 = sentence.indexOf("hello"); // "hello" 是小写，找不到
console.log(index4); // 输出: -1对于数组，indexOf() 方法返回在数组中可以找到一个给定元素的第一个索引，如果没有找到，则返回 -1。它使用严格相等（===）进行比较。
const fruits = ["apple", "banana", "orange", "apple", "grape"];
const index5 = fruits.indexOf("banana"); // 找到 "banana" 的索引
console.log(index5); // 输出: 1
const index6 = fruits.indexOf("apple", 1); // 从索引1开始查找 "apple"
console.log(index6); // 输出: 3
const index7 = fruits.indexOf("kiwi"); // 查找不存在的元素
console.log(index7); // 输出: -1
// 对于引用类型，它比较的是引用地址
const obj1 = { name: "Alice" };
const obj2 = { name: "Bob" };
const users = [obj1, obj2];
const index8 = users.indexOf(obj1);
console.log(index8); // 输出: 0
const obj3 = { name: "Alice" };
const index9 = users.indexOf(obj3); // 不同的对象引用，即使内容相同也找不到
console.log(index9); // 输出: -1fromIndex 参数是一个可选的整数，表示开始搜索的索引。如果省略，搜索将从索引 0 开始。如果 fromIndex 大于或等于字符串/数组的长度，则始终返回 -1。如果为负值，它将被视为 length + fromIndex。
对我来说，indexOf 返回 -1 就像是一个明确的信号：你寻找的东西，它不在那里。无论是在字符串里找一个特定的词，还是在数组里找一个元素，只要结果是 -1，就说明它“失踪”了。这在编写条件判断逻辑时尤其有用，因为我们经常需要根据某个元素是否存在来决定接下来的操作。
比如，你可能想检查用户输入是否包含某个敏感词：
const userInput = "我喜欢编程和学习新知识。";
const sensitiveWord = "敏感词汇";
if (userInput.indexOf(sensitiveWord) !== -1) {
console.log("检测到敏感词汇，请修改。");
} else {
console.log("内容正常。");
}
// 输出: 内容正常。或者，在处理一个列表时，你需要确保某个选项不重复添加：
const selectedItems = ["牛奶", "面包"];
const newItem = "鸡蛋";
if (selectedItems.indexOf(newItem) === -1) {
selectedItems.push(newItem);
console.log("添加成功:", selectedItems);
} else {
console.log("该商品已在列表中。");
}
// 输出: 添加成功: [ '牛奶', '面包', '鸡蛋' ]这种模式在日常开发中非常常见，它提供了一种简洁有效的方式来判断“存在性”。值得一提的是，如果你仅仅是想判断是否存在，而不需要知道具体位置，Array.prototype.includes() 或 String.prototype.includes() 会是更语义化的选择，它们直接返回 true 或 false。
indexOf 的一个特点是它只会返回第一次找到的索引。如果你想找出所有匹配项的位置，光用一次 indexOf 是不够的。我个人在使用时，会特别注意这一点，因为很多时候我们确实需要“全部”的结果。这时，我们通常会结合循环和 fromIndex 参数来达到目的。这有点像一个侦探，每次找到一个线索后，就从那个线索的后面继续搜寻。
下面是一个常见的模式，用于在字符串中查找所有匹配子串的索引：
function findAllIndexes(text, searchString) {
const indexes = [];
let currentIndex = text.indexOf(searchString); // 第一次查找
// 只要找到，就记录下来，并从找到位置的下一位开始继续查找
while (currentIndex !== -1) {
indexes.push(currentIndex);
currentIndex = text.indexOf(searchString, currentIndex + 1);
}
return indexes;
}
const longText = "Apple is red, apple is sweet, apple is healthy.";
const allAppleIndexes = findAllIndexes(longText, "apple");
console.log(allAppleIndexes); // 输出: [0, 14, 28] (注意这里是区分大小写的，所以只找到了小写的"apple")
// 对于数组也是类似
function findAllElementIndexes(arr, searchElement) {
const indexes = [];
let currentIndex = arr.indexOf(searchElement);
while (currentIndex !== -1) {
indexes.push(currentIndex);
currentIndex = arr.indexOf(searchElement, currentIndex + 1);
}
return indexes;
}
const numbers = [1, 2, 3, 2, 4, 2, 5];
const allTwoIndexes = findAllElementIndexes(numbers, 2);
console.log(allTwoIndexes); // 输出: [1, 3, 5]这种迭代查找的方式，虽然看起来稍微复杂一点，但它非常灵活，能够满足我们查找所有出现位置的需求。
当然，在 JavaScript 的世界里，从来都不只有一种解决问题的方法。indexOf 虽然好用，但在某些场景下，你可能会发现其他方法更趁手。理解它们之间的差异，能帮助我们选择最合适的工具。
indexOf vs. lastIndexOf:
const exampleStr = "banana";
console.log(exampleStr.indexOf("a")); // 输出: 1
console.log(exampleStr.lastIndexOf("a")); // 输出: 3const exampleArr = [1, 2, 3, 1, 4]; console.log(exampleArr.indexOf(1)); // 输出: 0 console.log(exampleArr.lastIndexOf(1)); // 输出: 3
选择哪个取决于你关心的是第一次出现还是最后一次出现。
indexOf vs. Array.prototype.find():
const users = [
{ id: 1, name: "Alice" },
{ id: 2, name: "Bob" },
{ id: 3, name: "Alice" }
];// 使用 find 查找第一个名字是 'Alice' 的用户对象 const aliceUser = users.find(user => user.name === "Alice"); console.log(aliceUser); // 输出: { id: 1, name: 'Alice' }
// indexOf 无法直接查找对象内容，只能查找引用 const someObj = { id: 1, name: "Alice" }; console.log(users.indexOf(someObj)); // 输出: -1 (因为引用不同)
当你需要基于更复杂的条件（不仅仅是严格相等）来查找元素本身时，`find()` 是更好的选择。
indexOf vs. Array.prototype.findIndex():
const products = [
{ id: 101, name: "Laptop", price: 1200 },
{ id: 102, name: "Mouse", price: 25 },
{ id: 103, name: "Keyboard", price: 75 }
];// 查找价格低于 50 的第一个产品的索引 const cheapProductIndex = products.findIndex(product => product.price
// 查找不存在的产品的索引 const expensiveProductIndex = products.findIndex(product => product.price > 2000); console.log(expensiveProductIndex); // 输出: -1
当你需要基于复杂条件查找元素的索引时，`findIndex()` 是理想选择。
indexOf vs. includes():
const colors = ["red", "green", "blue"];
console.log(colors.indexOf("green") !== -1); // 输出: true (传统方式判断是否存在)
console.log(colors.includes("green")); // 输出: true (更简洁的判断方式)如果你只关心是否存在，includes() 提供了更清晰、更易读的语法。
总的来说，indexOf 是一个非常基础且高效的工具，适用于简单的数据查找。但当你的查找需求变得更复杂，例如涉及对象属性比较、或者仅仅是判断存在性时，JavaScript 提供了更多专门的方法来应对，选择合适的工具能让你的代码更优雅、更高效。
以上就是JavaScript的indexOf方法怎么查找元素位置？的详细内容，更多请关注php中文网其它相关文章！
每个人都需要一台速度更快、更稳定的 PC。随着时间的推移，垃圾文件、旧注册表数据和不必要的后台进程会占用资源并降低性能。幸运的是，许多工具可以让 Windows 保持平稳运行。
广告![ThinkPHP5快速开发企业站点[全程实录]](https://img.php.cn/upload/course/000/000/068/6253d918a3ce7278.png)
收藏
收藏
Copyright 2014-2025 https://www.php.cn/ All Rights Reserved | php.cn | 湘ICP备2023035733号
103
