JS 数组两次打印结果异常，如何解决？(语言-javascript)

Question

问题遇到的现象和发生背景

第一次改变数组->打印数组->第二次改变数组->打印数组，本应打印各自的结果，实际上第一次打印的结果与第二次打印的结果一致

问题相关代码，请勿粘贴截图

myMysticArr = [{name:"D",index:40},{name:"C",index:308},{name:"A",index:127},{name:"B",index:259}];

    for(var i = 0 ; i < myMysticArr.length ; i ++){
        if(myMysticArr[i].name == "A"){
            myMysticArr.unshift(myMysticArr.splice(i,1)[0]); // 把A放到最前
        }
        if(myMysticArr[i].name == "D"){
            myMysticArr.push(myMysticArr.splice(i,1)[0]); // 把D放到最后
        }
    }
    console.log(1111,myMysticArr); // 打印结果 DACB (不符合 和下面的2222的打印一样了)
    
    
    for(var i = 0 ; i < myMysticArr.length ; i ++){
        if(myMysticArr[i].name == "A"){
            myMysticArr.splice(0,0,myMysticArr.splice(i,1)[0]); // 把A放到最前
        }
        if(myMysticArr[i].name == "D"){
            myMysticArr.splice(0,0,myMysticArr.splice(i,1)[0]); // 再把D放到最前
        }
    }
    console.log(2222,myMysticArr); // 打印结果 DACB (符合预期)

运行结果及报错内容

本应打印各自的结果，实际上第一次打印的结果与第二次打印的结果一致

我的解答思路和尝试过的方法

即使是第二次方法改变了原数组 也不应该影响第一次的打印

我想要达到的结果

想要打印各自的结果

Answer 1

用console.log()输出整个对象有值是因为console.log()输出对象或数组时是在控制台显示一个对象或数组的引用。
在用console.log()输出数组或对象时，对象（数组）的属性是折叠不显示的。
如果你在console.log()输出之后改变了对象（数组）的属性，当你点击三角展开属性时，会重新读取对象（数组）当前的属性，也就是显示出来的是你点击三角展开时的属性，而不是执行console.log()时的属性。

你用console.log(JSON.stringify(obj));以字符串方式输出就可以看到对象当前的值

如有帮助，请点击我的回答下方的【采纳该答案】按钮帮忙采纳下，谢谢!