将 Javascript 数组键向前移动？

Question

我的对象中有 2 个项目，1 和 2。

我想为每个项目添加第二个框架 并移动：

---

第二帧 -> 第三帧，

---

第三帧 -> 第四帧

---

（请注意，我简化了问题，所以我通常会有很多帧，不应该对其进行编码）

window.onload = function() {
    localStorage.clear();
    const myObject = {
        "1": {
            keyframes: [
                {"posX": "0", "posY": "0"},
                {"posX": "150", "posY": "0"},
                {"posX": "300", "posY": "0"}
            ]
        },
        "2": {
            keyframes: [
                {"posX": "0", "posY": "0"},
                {"posX": "150", "posY": "0"},
                {"posX": "300", "posY": "0"}
            ]
        }
    };
    window.localStorage.setItem("myObject", JSON.stringify(myObject));
}

我尝试了 foreach 循环，但不知道如何实现其他 stackoverflow 问题中的数组修改...

Answer 1

使用

Array::splice()

将元素插入到数组的特定索引处：

    const myObject = {
        "1": {
            keyframes: [
                {"posX": "0", "posY": "0"},
                {"posX": "150", "posY": "0"},
                {"posX": "300", "posY": "0"}
            ]
        },
        "2": {
            keyframes: [
                {"posX": "0", "posY": "0"},
                {"posX": "150", "posY": "0"},
                {"posX": "300", "posY": "0"}
            ]
        }
    };
    
    const frame = {newFrame: true};
    
    Object.values(myObject).forEach(({keyframes}) => keyframes.splice(1, 0, frame));
    
    console.log(myObject);