实现遍历嵌套JSON数组并删除指定row对象的函数需求

核心问题分析 #

你遇到的问题本质是递归遍历嵌套结构（主行-子行-孙行...）并精准删除目标行，之前失败的原因大概率是：

1. 只遍历了顶层数组，没处理深层的sub_row
2. 对象匹配方式错误（比如用JSON.stringify比较，或者引用不一致导致===不成立）
3. 直接修改原数组未触发视图更新（Vue/React等框架要求 immutable 更新）

实用实现方案 #

以下提供两种常用的删除函数，适配不同场景：

1. 按对象引用删除（适用于能拿到目标行原引用的场景） #

这种方式依赖目标行和数据中的行是同一个对象引用，适合框架中直接拿到渲染行对象的情况：

function deleteRow(targetRow, dataArray) {
  // 递归处理数组的内部函数
  const processArray = (arr) => {
    return arr.filter(row => {
      // 匹配到目标行，直接过滤掉
      if (row === targetRow) return false;
      // 存在子行时，递归处理子行数组
      if (row.sub_row && Array.isArray(row.sub_row)) {
        row.sub_row = processArray(row.sub_row);
      }
      // 保留非目标行
      return true;
    });
  };
  // 返回处理后的新数组（框架中用这个新数组替换原数据触发更新）
  return processArray(dataArray);
}

2. 按唯一ID删除（更通用，推荐生产环境使用） #

实际开发中更常用的方式，通过行的唯一标识（比如id）定位，无需依赖对象引用：

function deleteRowById(targetId, dataArray) {
  const processArray = (arr) => {
    return arr.filter(row => {
      if (row.id === targetId) return false;
      if (row.sub_row && Array.isArray(row.sub_row)) {
        row.sub_row = processArray(row.sub_row);
      }
      return true;
    });
  };
  return processArray(dataArray);
}

绑定删除功能示例（Vue为例） #

假设你的表格数据是示例结构，给每个行的删除按钮绑定事件：

<template>
  <div class="table-container">
    <!-- 递归渲染行和子行 -->
    <div v-for="row in tableData" :key="row.id" class="table-row">
      <span>{{ row.name }}</span>
      <button @click="handleDelete(row)">删除</button>
      <!-- 渲染子行 -->
      <div v-if="row.sub_row && row.sub_row.length" class="sub-row">
        <div v-for="subRow in row.sub_row" :key="subRow.id">
          <span>&nbsp;&nbsp;{{ subRow.name }}</span>
          <button @click="handleDelete(subRow)">删除</button>
        </div>
      </div>
    </div>
  </div>
</template>

<script>
export default {
  data() {
    return {
      // 示例表格数据
      tableData: [
        {
          id: 1,
          name: "主行1",
          sub_row: [
            { id: 11, name: "子行1-1", sub_row: [{ id: 111, name: "孙行1-1-1" }] },
            { id: 12, name: "子行1-2" }
          ]
        },
        { id: 2, name: "主行2" }
      ]
    };
  },
  methods: {
    handleDelete(targetRow) {
      // 调用删除函数，用新数组替换原数据触发视图更新
      this.tableData = deleteRow(targetRow, this.tableData);
      // 如果用ID删除，改成：this.tableData = deleteRowById(targetRow.id, this.tableData);
    }
  }
};
</script>

关键注意事项 #

• 框架更新规则：Vue/React等框架需要用新数组替换原数组触发更新，不能直接修改原数组的元素或长度
• 边界处理：函数中加了Array.isArray(row.sub_row)判断，避免非数组类型的sub_row导致报错
• 匹配逻辑：如果没有id这类唯一标识，必须确保传入的targetRow是数据中的原对象引用，否则匹配会失败

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