JavaScript数组元素翻倍代码逻辑错误排查求助

你的代码核心问题出在array.indexOf(element)的使用上，具体原因如下：

• for...of循环遍历的是数组的当前元素值，而indexOf(element)只会返回数组中第一个匹配该值的元素索引。
• 当你修改了数组前面的元素后，后续遍历到和修改后值相同的元素时，indexOf会错误地指向前面已经被修改过的索引，而不是当前遍历到的元素的真实位置。

错误执行过程拆解 #

原数组：let array = [1,2,3,4,5,6]

1. 第一次循环：element=1，indexOf(1)返回0，修改后数组变为[2,2,3,4,5,6]
2. 第二次循环：element=2，indexOf(2)返回第一个匹配的索引0，修改后数组变为[4,2,3,4,5,6]
3. 第三次循环：element=3，indexOf(3)返回2，修改后数组变为[4,2,6,4,5,6]
4. 第四次循环：element=4，indexOf(4)返回第一个匹配的索引0，修改后数组变为[8,2,6,4,5,6]
5. 第五次循环：element=5，indexOf(5)返回4，修改后数组变为[8,2,6,4,10,6]
6. 第六次循环：element=6，indexOf(6)返回第一个匹配的索引2，修改后数组变为[8,2,12,4,10,6]

正确写法推荐 #

方法1：使用普通for循环（按索引遍历）

let array = [1,2,3,4,5,6]
for (let i = 0; i < array.length; i++) {
  array[i] = array[i] * 2
}
console.log(array) // 输出：[2,4,6,8,10,12]

方法2：使用map方法（返回新数组，不修改原数组）

let array = [1,2,3,4,5,6]
let doubledArray = array.map(element => element * 2)
console.log(doubledArray) // 输出：[2,4,6,8,10,12]

方法3：使用for...of结合entries获取索引

let array = [1,2,3,4,5,6]
for (const [index, element] of array.entries()) {
  array[index] = element * 2
}
console.log(array) // 输出：[2,4,6,8,10,12]

内容的提问来源于stack exchange，提问作者Mazen Maharoof