数组元素索引为-1致替换错误，求问题原因与解决方法

问题原因 #

1. 索引计算逻辑错误：arr.includes('<')返回的是布尔值（存在含<的元素就返回true，否则false），你接着用arr.indexOf(true)去数组里查找这个布尔值，但原数组里根本没有布尔类型元素，所以返回-1。
2. 遍历+修改原数组的操作混乱：在map遍历过程中用splice修改原数组，本身会打乱遍历流程；加上索引是-1，splice(-1, 1, 'blocked')会把原数组最后一个元素替换成'blocked'，同时map还会按原数组长度返回所有元素，最终导致结果完全不符合预期。

解决办法 #

方法一：先找目标索引再替换（适合需要修改原数组的场景） #

const arr = ['this', 'is', '<a/>', 'apple'];
// 找到第一个包含 '<' 的元素的索引
const targetIndex = arr.findIndex(item => item.includes('<'));
if (targetIndex !== -1) {
  arr.splice(targetIndex, 1, 'blocked');
}
console.log(arr); // 输出：['this', 'is', 'blocked', 'apple']

方法二：用map直接生成新数组（推荐，不修改原数组） #

如果不需要保留原数组，直接用map遍历判断生成新数组，逻辑更简洁安全：

const arr = ['this', 'is', '<a/>', 'apple'];
const newArray = arr.map(item => {
  return item.includes('<') ? 'blocked' : item;
});
console.log(newArray); // 输出：['this', 'is', 'blocked', 'apple']
console.log(arr); // 原数组保持不变：['this', 'is', '<a/>', 'apple']

额外说明 #

• 如果数组里有多个含<的元素，方法一只会替换第一个；方法二会替换所有符合条件的元素，可根据需求选择。
• 尽量避免在map、forEach这类遍历方法里修改原数组，很容易引发遍历顺序、数组长度变化的问题，优先用纯函数方式生成新数组。

内容的提问来源于stack exchange，提问作者Rocket Monkey