无法正确移除数组中的嵌套子数组元素，代码仅删除首个元素

问题分析 #

你的代码意图是根据父索引parIndex定位目标widget，删除其child数组中指定index位置的元素，但仅能移除第一个元素，大概率是因为以下原因：

• 未对数组索引和空值做有效校验，导致越界或找不到目标widget时无操作
• 使用forEach遍历所有widget时，可能误处理多个匹配项，或因索引不合法导致删除失败

修正方案 #

场景1：仅删除单个匹配widget的child元素

如果widgetNumber是唯一标识，用find替代forEach更高效，且能精准定位目标：

removeChildWidget(parIndex: number, index: number) {
  // 校验父索引合法性
  if (parIndex < 0 || parIndex >= this.dashboardWidgets.length) return;

  const targetWidgetNumber = this.dashboardWidgets[parIndex]?.widgetNumber;
  if (!targetWidgetNumber) return;

  // 精准定位目标widget
  const targetWidget = this.widgets.find(widget => widget.widgetNumber === targetWidgetNumber);
  if (!targetWidget || !targetWidget.child) return;

  // 校验child数组索引合法性
  if (index < 0 || index >= targetWidget.child.length) return;

  // 执行删除
  targetWidget.child.splice(index, 1);
  console.log('删除后widget:', targetWidget);
  console.log('最终dashboardWidgets:', this.dashboardWidgets);
}

场景2：删除所有匹配widget的child元素

如果需要对所有widgetNumber匹配的widget执行删除，保留forEach但增加校验：

removeChildWidget(parIndex: number, index: number) {
  if (parIndex < 0 || parIndex >= this.dashboardWidgets.length) return;

  const targetWidgetNumber = this.dashboardWidgets[parIndex]?.widgetNumber;
  if (!targetWidgetNumber) return;

  this.widgets.forEach(widget => {
    if (widget.widgetNumber === targetWidgetNumber && widget.child) {
      // 确保索引在有效范围内
      if (index >= 0 && index < widget.child.length) {
        widget.child.splice(index, 1);
        console.log('删除后widget:', widget);
      }
    }
  });

  console.log('最终dashboardWidgets:', this.dashboardWidgets);
}

关键优化点 #

1. 增加多重重校验：父索引合法性、目标widget编号存在性、child数组存在性、删除索引合法性，避免因空值或越界导致的无操作
2. 用find精准定位单个widget，避免forEach遍历所有元素造成的误操作或性能浪费
3. 明确删除逻辑，确保仅在合法条件下执行splice

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