本文介绍如何使用 array.prototype.splice() 遍历嵌套对象中的多个数组，并在指定索引位置（如第 2 位）统一插入新帧数据，避免硬编码，适用于动画关键帧等场景。
本文介绍如何使用 array.prototype.splice() 遍历嵌套对象中的多个数组，并在指定索引位置（如第 2 位）统一插入新帧数据，避免硬编码，适用于动画关键帧等场景。
在前端开发中，尤其是处理时间轴动画或序列化关键帧（keyframes）时，常需对多个对象中同结构的数组进行批量、精准的插入操作。例如，你有一个包含多个动画项的对象，每项都有一个 keyframes 数组，现在需要为每个数组的第 2 个位置（即索引 1）插入一个新的帧对象，并自动将原有第 2 帧及之后的帧向后平移——这正是典型的“向前移动键值”需求（实质是「在指定索引前插入」）。
核心解决方案是：结合 Object.values() 遍历对象所有值，再对每个 keyframes 数组调用 splice(index, deleteCount, item)。其中：
- index = 1 表示在第 2 个位置前插入；
- deleteCount = 0 表示不删除任何元素；
- item 是你要插入的新帧对象（如 {posX: "75", posY: "0"}）。
以下是完整可运行示例：
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 newFrame = {"posX": "75", "posY": "0"};
// ✅ 批量插入：为每个 item.keyframes 的索引 1 处插入 newFrame
Object.values(myObject).forEach(item => {
if (Array.isArray(item.keyframes)) {
item.keyframes.splice(1, 0, newFrame);
}
});
console.log(JSON.stringify(myObject, null, 2));
// 输出中，每个 keyframes 数组现在为：
// [ {posX:"0",...}, {posX:"75",...}, {posX:"150",...}, {posX:"300",...} ]⚠️ 注意事项：
立即学习“Java免费学习笔记（深入）”；
- splice() 会直接修改原数组（mutating），若需不可变操作，请先使用 slice() 或展开语法创建副本，例如：[...keyframes].splice(1, 0, newFrame)（注意：splice 仍作用于副本，需显式赋值）；
- 确保 keyframes 字段存在且为数组，建议添加类型校验（如 if (item?.keyframes && Array.isArray(item.keyframes))）；
- 若需插入不同内容（如按 item ID 动态生成帧），可在 forEach 回调中访问 item 的父级上下文（需改用 Object.entries()）：
Object.entries(myObject).forEach(([id, item]) => { const dynamicFrame = { posX: String(Number(id) * 50), posY: "0" }; item.keyframes?.splice(1, 0, dynamicFrame); });
✅ 总结：splice(index, 0, newItem) 是实现“向前移动后续元素并插入新项”的标准、高效、无副作用（指逻辑清晰）方式。它天然支持任意长度数组，无需循环索引偏移或深拷贝整个结构，是处理此类嵌套数组批量编辑的首选方法。
