如何将JavaScript对象中keyframes数组元素后移并插入新帧？

你可以用数组的splice()方法实现这个需求，完全不用硬编码处理每帧位置——核心逻辑是在每个keyframes数组的**第二个位置（对应索引1，数组从0开始计数）**插入新帧，插入操作会自动把原位置及之后的所有元素向后挪一位，正好达成你要的“原第二帧移到第三、原第三帧移到第四”的效果，不管原数组有多少帧都适用。

代码示例 #

假设你的对象结构如下：

// 示例对象，包含两个项，每个项带有keyframes数组
const animationItems = {
  1: { keyframes: [{ time: 0, val: 'a' }, { time: 0.5, val: 'b' }, { time: 1, val: 'c' }] },
  2: { keyframes: [{ time: 0, val: 'x' }, { time: 0.3, val: 'y' }, { time: 0.7, val: 'z' }, { time: 1, val: 'w' }] }
};

// 定义你要添加的第二帧内容，替换成你的实际数据即可
const newSecondFrame = { time: 0.2, val: 'new-frame-content' };

// 遍历每个项处理keyframes数组
Object.values(animationItems).forEach(item => {
  // 在索引1的位置插入新帧，第二个参数0表示不删除任何元素
  item.keyframes.splice(1, 0, newSecondFrame);
});

// 查看修改后的结果
console.log(animationItems);

关键逻辑说明 #

• Object.values(animationItems)：把对象里的所有项（每个包含keyframes的对象）提取为数组，方便用forEach遍历处理。
• splice(1, 0, newSecondFrame)：
  1. 第一个参数1：指定插入位置为数组的第二个元素位置（索引从0开始）。
  2. 第二个参数0：表示只做插入操作，不删除任何元素。
  3. 第三个参数newSecondFrame：要插入的新帧数据。

这个方法会自动处理后续所有帧的位置后移，完全不需要针对大量帧写硬编码逻辑。

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