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

JS删除嵌套数组对象项并重置索引
最新推荐文章于 2025-11-27 12:57:01 发布
原创 最新推荐文章于 2025-11-27 12:57:01 发布 · 193 阅读 · 0 ·
CC 4.0 BY-SA版权
版权声明：本文为博主原创文章，遵循 CC 4.0 BY-SA 版权协议，转载请附上原文出处链接和本声明。
文章标签：

#javascript #前端

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

[
  {
   
   
    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,
最低0.47元/天 解锁文章
JavaScriptES6新特性
vV_Leon的博客
08-01 1457
ES6（ECMAScript 2015）是JavaScript的第六版标准，于2015年正式发布。这一版本引入了众多新特性和语法改进，极大地提升了JavaScript的编程效率和代码质量。本文将详细介绍ES6中的几个重要新特性，并附带示例代码。
实现 select 中嵌套 tree 外加搜索
wu_2004的博客
04-01 574
【代码】【无标题】
51、JavaScript 数组在日历应用中的实践与应用
tcp8optimizer的博客
11-14 5
本文详细介绍了如何使用JavaScript数组、循环和条件语句创建一个动态的月度日历应用。通过实际项目，讲解了数组的创建、填充、排序、反转、切片与拼接等常用操作，并展示了在日历标题生成、星期行构建及日期单元格布局中的具体应用。同时探讨了多维数组和随机打乱数组的实现方式，帮助开发者深入理解JavaScript数组在实际项目中的灵活运用。
树形json扁平化，一维数组树状化，对象深拷贝，元素后插入新元素，格式或动态路由等常用js合集
SilenceJude的博客
12-12 1148
晚上写demo，需要在一个元素后面创建并插入一个新的元素，但是突然发现js中好像没有直接实现这项功能的函数，所以今天赶紧的写了一个，记录一下。 原生js中有insertBefore()函数，语法是 parentNode.insertBefore(newElement, targetElement)，在指定目标元素前面插入一个新的元素。 而查找元素有nextSibling，所以功能实现如下： ......
工作中用到的 —— 工作总结提炼出来的股文
技术前端，忠于热爱 @0.活在风浪里
03-15 1247
工作中将用到的总结出来、与大家分享讨论
2025java面试题（含答案，持续更新中）
东风麦芽糖
03-08 3万+
2023java面试题，java常见面试题及答案：SpringMVC、Redis、Shiro、集合、Oracle数据库、SpringBoot、java基础，线程池面试题
一文通关JavaScript语言：语法、结构、函数、数组、对象、类、模块、文件、异步、TypeScript
2401_87248407的博客
09-27 867
function 函数名(形参){函数体;return 返回数据;函数名(实参)
全文索引elasticsearch
mr-yhl的博客
11-06 1425
今日内容 全文检索 lucene实现全文索引 Elasticsearch Kibana 增删改查聚合 第一章 什么是全文检索1. 数据分类我们生活中的数据总体分为两种：结构化数据和非结构化数据。​ 结构化数据：指具有固定格式或有限长度的数据，如数据库，元数据等。​ 非结构化数据：指不定长或无固定格式的数据，如邮件，word 文档等磁盘上的文件 2...
knex.js笔记
热门推荐
liuyueyi1995的博客
12-21 3万+
knex.js是bookshelf框架的基础，其核心是query builder。这篇文章参考自Knex.js官网，翻译并总结了该框架的方法。
【JavaSE基础】02-面向对象
用编程认知世界，Just coding....
04-22 654
原文写于 2016 年，个人学习笔记，闲来无事，搬运至此，希望于各位有用。主要内容是：面向对象的基础概念、三大特性、链式编程等。
SCON：轻量级对象序列化格式入门指南
例如，在一个包含多个相同键名的嵌套哈希结构中，SCON 能够识别这些重复项，并通过内部索引或引用机制避免冗余存储，这正是它相较于传统 JSON 更加紧凑的原因之一。 进一步分析可知，SCON 的设计灵感显然来源于现有...
JavaScript实现插入排序算法详解
该函数内部通常会使用嵌套循环结构：外层循环遍历从索引1开始的每一个元素，内层循环则负责向前查找合适的插入位置，并通过临时变量完成元素的移动与插入操作。此外，为了增强代码的可维护性和学习价值，代码中很...
Vue开发工具使用技巧
2509_93946471的博客
11-24 347
打开DevTools的"Events"标签页，所有组件间传递的事件都会按时间顺序列出来，连事件负载数据都能展开看详情。更绝的是，你还能手动触发事件——比如在父组件里模拟一个事件，直接测试子组件的响应逻辑，省得反复修改代码来调试。如果组件用了作用域插槽，可以在"Scoped Slots"子面板里实时查看slot传递的数据内容，比在模板里写调试代码清爽得多。路由调试经常被忽略。热重载调试时，如果发现修改代码后页面没及时更新，可以到DevTools的"Settings"里勾选"Log reloads"选项。
【基础】EGG.js 框架内置基础对象
林见鹿鸣
11-24 917
在。
Vue 项目实战《尚医通》，路由鉴权完成，笔记71
Rockandrollman的博客
11-23 204
Vue 项目实战《尚医通》，路由鉴权完成，笔记71
Electron 与 OpenHarmony 的实战入门：手把手打造一个安全的简易记事本应用
最新发布
已掌握java全栈，简单的java项目逻辑。目前正在学习鸿蒙开发，有兴趣的小伙伴可以一起学习！！！
11-27 675
这个“简易记事本”虽只有几十行代码，却完整体现了 现代桌面应用的安全架构思想。它不仅是 Electron 的最佳入门实践，更是通往 OpenHarmony 全场景开发的桥梁。
Vue网站
2509_93947362的博客
11-24 200
给大家分享个实用技巧：组件通信时，简单的父子传参用props/$emit搞定，复杂场景就用Vuex，千万别为了省事滥用event bus，不然项目大了事件流会乱成麻花。以前写数据绑定总要搞一堆繁琐的DOM操作，现在一个双大括号{{data}}就能搞定，新手看了五分钟就能上手写页面。刚开始觉得小项目用Vuex太重量级，后来发现即便是最简单的购物车功能，随着业务复杂度的提升，最终还是得引入状态管理。特别是把相同业务逻辑抽离成composable函数后，在不同组件里直接引入就能用，代码复用率明显提升。
vue3 md文件预览和下载
zzzz121380的博客
11-26 263
本文介绍了两种在Vue3中预览Markdown文件的方法：使用md-editor-v3插件和@kangc/v-md-editor@next插件，并提供了MD内容下载为MD和PDF文件的实现方案。md-editor-v3方法简单易用，@kangc/v-md-editor支持更多主题选项。MD文件下载可通过Blob对象或downloadjs实现，PDF转换则利用html2pdf.js库将预览内容转为PDF。文章还指出markdown-it插件在表格样式上的不足，不推荐使用。两种方法都提供了完整的代码示例，包括依
TypeScript配置详解
2509_93942471的博客
11-23 268
target决定编译成哪个版本的JS，比如"ES5"兼容老浏览器，"ES2015"能用原生Promise。module则指定模块规范，如果是Node.js项目选"CommonJS"，前端项目建议"ES2015"。建议根据项目规模选择合适的严格度，小型项目可以宽松些，大型企业级项目还是建议开启所有严格检查。特别注意moduleResolution要设为"node"，这样TypeScript会按照Node.js的规则解析模块。如果用了Vue，还需要额外配置"jsx": "preserve"。
vue2 取出数组中某一项组成新数组
05-01
<think>嗯，用户现在的问题是在Vue2中如何从数组里提取特定项生成新数组。之前他们问过关于筛选不同ID的方法，现在可能是在同一项目中需要进一步处理数据。根据用户提供的引用内容，他们提到了计算属性、map方法以及数组合并操作，比如引用[2]中的map例子，还有引用[3]中的合并数组对象。 首先，我需要确定用户的具体需求。他们可能有一个对象数组，每个对象有多个属性，想提取其中某一属性组成新数组，比如所有ID或者名字。比如从[{id:1, name:'a'}, {id:2, name:'b'}]提取id得到[1,2]。 接下来，回顾之前的回答，用户已经了解计算属性和过滤方法。现在需要扩展使用map方法，因为引用[2]中的例子就是用map来提取字段。所以应该重点介绍map的基本用法，并结合Vue的计算属性来实现响应式。 然后，可能需要处理更复杂的情况，比如去重后的数组，这时候可以结合Set和map，如[...new Set(array.map(...))]，这在之前的回答里也有类似的方法，用于筛选唯一ID。用户可能还需要处理多条件提取，比如同时提取多个字段，这时候可以用map返回对象。 另外，引用[3]提到合并两个数组的相同项，用户可能需要将两个数组合并并提取特定项。比如根据某个ID合并，然后提取数据。这时候可以用reduce方法或者find方法，如之前的分组方案。 需要注意的是，用户可能对性能有要求，特别是数据量大的情况。在之前的回答中提到了Web Worker和虚拟滚动，这里可以建议在计算属性中使用高效的数组方法，避免重复计算。 可能还需要提醒用户关于Vue的响应式问题，比如直接修改数组可能不会触发更新，应该使用Vue.set或者替换数组。例如，在提取数据后，如果需要修改原数组，应该用正确的方法。 总结步骤：1. 使用map方法提取单一字段；2. 结合Set去重；3. 提取多个字段并重命名；4. 多条件筛选；5. 动态参数提取；6. 处理数组合并的情况。同时给出注意事项，如性能优化和响应式问题。</think>在Vue2中从数组提取特定项生成新数组，可以通过以下5种方法实现（含代码示例与数学原理说明）： --- ### 一、基础提取方法 #### 1. **`map`方法提取单字段** ```javascript computed: { // 提取所有ID组成新数组（线性时间复杂度$O(n)$） idArray() { return this.originalList.map(item => item.id) } } ``` 输入数组：`[{id:1,name:'a'}, {id:2,name:'b'}]` 输出结果：`[1, 2]` [^2] #### 2. **带筛选条件的提取** ```javascript filteredArray() { return this.originalList .filter(item => item.price > 100) // 筛选条件 .map(item => item.sku) // 提取字段 } ``` 满足不等式$price > 100$时提取sku字段 --- ### 二、高级提取方案 #### 3. **多字段提取与重命名** ```javascript formattedData() { return this.originalList.map(item => ({ newId: item.id * 2, // 字段转换 displayName: item.name.toUpperCase() // 字符串处理 })) } ``` 输出结构： $$ \text{[ {newId:2, displayName:"A"}, {newId:4, displayName:"B"} ]} $$ #### 4. **动态参数提取** ```javascript methods: { dynamicExtract(field) { return this.originalList.map(item => item[field]) } } ``` 调用方式：`this.dynamicExtract('price')` --- ### 三、跨数组联合操作 #### 5. **双数组合并提取（集合运算）** ```javascript mergedIds() { const setA = new Set(this.listA.map(item => item.id)) const setB = new Set(this.listB.map(item => item.id)) // 并集运算 $A \cup B = \{x | x \in A \lor x \in B\}$ return [...new Set([...setA, ...setB])] } ``` 时间复杂度：$O(m + n)$，空间复杂度$O(m + n)$[^3] --- ### 四、性能优化建议 | 数据量 | 推荐方案 | 时间复杂度 | |-------|---------|-----------| | <500 | 直接map | $O(n)$ | | 500-5000 | 分块处理 | $O(n/k)$ | | >5000 | Web Worker | 后台线程处理 | --- ### 五、注意事项 1. **响应式更新**：使用`Vue.set()`修改数组引用触发更新 2. **避免副作用**：在map回调中不要修改原始数据 3. **数据缓存**：对稳定数据使用`Object.freeze()` ---
评论
添加红包

请填写红包祝福语或标题

个

红包个数最小为10个

元

红包金额最低5元

当前余额3.43元 前往充值 >
需支付：10.00元
成就一亿技术人!
领取后你会自动成为博主和红包主的粉丝 规则
hope_wisdom
发出的红包
实付元
使用余额支付
点击重新获取
扫码支付
钱包余额 0

抵扣说明：

1.余额是钱包充值的虚拟货币，按照1:1的比例进行支付金额的抵扣。
2.余额无法直接购买下载，可以购买VIP、付费专栏及课程。

余额充值