js删除嵌套数组对象中的某项,并重置其后的索引

场景

我有一个航线数组,里面的项的结构中包含另一个数组对象,我要对actions中的某一项进行操作

javascript 复制代码
[
  {
    lng: 120.06494672131818,
    lat: 30.858276044948518,
    height: "120",
    aircraftHeading: 0,
    yawRotate: 0,
    pitchRotate: 0,
    rollRotate: 0,
    hangdiansetting: false,
    actions: [
      {
        actionId: 0,
        type: 6,
        actionActuatorFunc: "takePhoto",
        name: "单拍"
      },
      {
        actionId: 1,
        type: 11,
        actionActuatorFunc: "openAI",
        name: "开启AI识别"
      },
      {
        actionId: 2,
        type: 8,
        actionActuatorFunc: "panoShot",
        name: "全景拍照动作"
      }
    ],
    showflag: false,
    openInputFlag: false
  },
  {
    lng: 120.06788979926445,
    lat: 30.860012282995804,
    height: "120",
    aircraftHeading: 0,
    yawRotate: 0,
    pitchRotate: 0,
    rollRotate: 0,
    hangdiansetting: true,
    actions: [
      {
        actionId: 0,
        type: 11,
        actionActuatorFunc: "openAI",
        name: "开启AI识别"
      },
      {
        actionId: 1,
        type: 8,
        actionActuatorFunc: "panoShot",
        name: "全景拍照动作"
      }
    ],
    showflag: true,
    openInputFlag: false
  }
]

我要删除掉actionActuatorFunc为openAI的,重置数据后为下面的样子

javascript 复制代码
[
  {
    lng: 120.06494672131818,
    lat: 30.858276044948518,
    height: "120",
    aircraftHeading: 0,
    yawRotate: 0,
    pitchRotate: 0,
    rollRotate: 0,
    hangdiansetting: false,
    actions: [
      {
        actionId: 0,
        type: 6,
        actionActuatorFunc: "takePhoto",
        name: "单拍"
      },
      {
        actionId: 1,
        type: 8,
        actionActuatorFunc: "panoShot",
        name: "全景拍照动作"
      }
    ],
    showflag: false,
    openInputFlag: false
  },
  {
    lng: 120.06788979926445,
    lat: 30.860012282995804,
    height: "120",
    aircraftHeading: 0,
    yawRotate: 0,
    pitchRotate: 0,
    rollRotate: 0,
    hangdiansetting: true,
    actions: [
      {
        actionId: 0,
        type: 8,
        actionActuatorFunc: "panoShot",
        name: "全景拍照动作"
      }
    ],
    showflag: true,
    openInputFlag: false
  }
]

我写了一个封装的方法,可自动处理数据

javascript 复制代码
function processActions(actions) {
  return actions
    .filter(a => a.actionActuatorFunc !== 'openAI')
    .map((a, i) => ({
      ...a,
      actionId: i,
    }));
}

这个办法可以在我原有的组装方法上直接添加使用

javascript 复制代码
let points = this.hangdianList.map(item=>{
  item.actions.map(v=>{
    let arr = []
      ...
    v.actionActuatorFuncParam = arr;
    return v;
  })
  item.actions = processActions(item.actions);
  return item;
})
相关推荐
mldong5 小时前
你的 Vue3 项目也能有钉钉同款审批流设计器:npm 装包,10 分钟画出第一条审批流
前端·vue.js
2分钟速写快排5 小时前
什么是 RAG?如何用 RAG 实现一个用户记忆?
前端·后端·ai编程
passerby60616 小时前
如何自己造一个时间处理库
前端·javascript·github
走到天涯海角7 小时前
react里面的长列表渲染优化
前端·react.js·前端框架
小羊没烦恼!7 小时前
Hello Web API系列教程——Web API与国际化
java·服务器·前端·javascript·php
北岛贰8 小时前
迷茫焦虑期,我做了一个带支付带官网的 AI 聊天虚拟恋人 App
前端·人工智能·后端
mayaairi9 小时前
Vue2 组件通讯(三):全局事件总线、PubSub、插槽与组件实例属性
前端·javascript·vue.js
kyriewen10 小时前
面试官问我:AI 都能写代码了,前端凭什么还值 25K
前端·javascript·人工智能
风骏时光牛马10 小时前
AI源码分析:拆解模型底层实现逻辑
前端
BillKu10 小时前
全局样式变量:CSS 自定义属性(--border-color)和SCSS 变量($border-color)的说明
javascript·css·scss