JavaScript使用splice计算数组平方首元素移至末尾问题排查

问题完全出在你调用splice方法时传入的第一个索引参数的逻辑错误上。

splice 负索引规则 #

Array.prototype.splice()的第一个参数为插入/修改的起始位置，当传入负值时，规则为：

• 若数组非空：从数组末尾向前倒推对应位数的位置，比如长度为N的数组，-1对应索引为N-1
• 若数组为空：所有负值索引都会被自动转为0

同时splice的插入逻辑是：新元素会被放置到你指定的起始索引位置，原索引及之后的元素统一后移。

逐次循环执行过程 #

我们可以跟着你的代码走完全部循环步骤，就能直观看到结果错位的原因：
初始状态：outputArray = []

1. 第一次循环处理元素1，平方值为1：
   数组为空，splice(-1,0,1)等价于splice(0,0,1)，执行后数组为[1]
2. 第二次循环处理元素2，平方值为4：
   数组长度为1，-1对应索引0，在索引0位置插入4，执行后数组为[4, 1]
3. 第三次循环处理元素3，平方值为9：
   数组长度为2，-1对应索引1，在索引1位置插入9，执行后数组为[4,9,1]
4. 第四次循环处理元素7，平方值为49：
   数组长度为3，-1对应索引2，在索引2位置插入49，执行后数组为[4,9,49,1]
5. 第五次循环处理元素4，平方值为16：
   数组长度为4，-1对应索引3，在索引3位置插入16，执行后数组为[4,9,49,16,1]
6. 第六次循环处理元素9，平方值为81：
   数组长度为5，-1对应索引4，在索引4位置插入81，执行后数组为[4,9,49,16,81,1]

和你实际得到的输出完全一致。你删掉第一个元素后新的第一个元素跑到末尾的原因也是完全相同的，本质都是每次新值都插入到了倒数第二个位置，第一个插入的值会被一步步挤到末尾。

方案1：替换splice为push #

向数组末尾追加元素直接用push方法即可，无需用splice：

const firstArr = [1, 2, 3, 7, 4, 9];

function arrayPow(arr) {
    const outputArray = [];
    arr.forEach(el => {
        console.log(el);
        outputArray.push(el**2);
    })
    return outputArray;
}

console.log(arrayPow(firstArr));

方案2：直接用map方法（更简洁） #

这种遍历数组返回处理后新数组的场景，原生map方法是最优选择：

const arrayPow = arr => arr.map(el => el ** 2);

内容的提问来源于stack exchange，提问作者Игорь Середа