vue2两个数组嵌套循环返回的新数组item顺序要一致

const newArr = [] arr2.forEach(item => { this.allOriC.forEach(item2 => { if (item.dataIndex === item2.dataIndex) { newArr.push(item2) } }) })优化下这个代码,返回的新数组item顺序要一致

可以使用JavaScript的​​Array.prototype.map()​​​和​​Array.prototype.find()​​方法来优化这段代码,这样可以保持原数组(arr2)的顺序不变:

const newArr = arr2.map(item => {return this.allOriC.find(item2 => item.dataIndex === item2.dataIndex) || null;
}).filter(Boolean);

这里做了以下优化:

  1. 使用​​map()​​函数遍历​​arr2​​,对于​​arr2​​中的每个​​item​​,在​​allOriC​​中查找匹配的元素。
  2. 使用​​find()​​函数根据条件​​item.dataIndex === item2.dataIndex​​查找匹配项。
  3. 如果找到匹配项,则将其放入新数组;如果没有找到(​​find()​​返回​​undefined​​),则用​​null​​填充当前位置。
  4. 最后,使用​​filter(Boolean)​​去除新数组中的所有​​null​​值。

这样不仅提高了代码效率,而且确保了返回的新数组中元素顺序与​​arr2​​一致。

理解您的需求,您希望返回的新数组中新添加的元素的顺序与​​arr2​​​中元素的顺序一致,即使它们在​​this.allOriC​​中的位置不同。上面提供的代码确实能实现这一目标。但为了更明确地强调这一点,我将再次给出优化后的代码:

const newArr = arr2.map(item => {const foundItem = this.allOriC.find(item2 => item.dataIndex === item2.dataIndex);return foundItem ? {...foundItem} : undefined; // 或者使用null,具体取决于您是否允许undefined
}).filter(item => item !== undefined); // 或者item !== null// 如果需要避免undefined, 可以初始化为空对象:
const newArr = arr2.map(item => {const foundItem = this.allOriC.find(item2 => item.dataIndex === item2.dataIndex);return foundItem ? {...foundItem} : {};
});

这段代码通过​​map()​​​函数按照​​arr2​​​的顺序依次查找匹配项,并保留查找到的元素(按原顺序)。如果在​​this.allOriC​​​中未找到匹配项,则该位置的元素为​​undefined​​​或​​null​​​(取决于您的选择),最后通过​​filter()​​​去除这些无效值。注意这里使用了扩展运算符​​...​​复制对象,以避免引用原始数据。

本文来自互联网用户投稿,该文观点仅代表作者本人,不代表本站立场。本站仅提供信息存储空间服务,不拥有所有权,不承担相关法律责任。如若转载,请注明出处:http://www.hqwc.cn/news/543913.html

如若内容造成侵权/违法违规/事实不符,请联系编程知识网进行投诉反馈email:809451989@qq.com,一经查实,立即删除!

相关文章

LoadRunner性能测试基本步骤

前言 本文旨在指导初学者使用LoadRunner进行基础的性能测试。 我们在接到一个性能测试任务的时候,需要从以下几点考虑:我们的测试对象是什么,测试要求是什么,测试环境怎么部署的,业务规模如何,哪些业务点是…

【b站咸虾米】2 Vue基础(上) 2021最新Vue从基础到实例高级_vue2_vuecli脚手架博客案例

课程地址:【2021最新Vue从基础到实例高级_vue2_vuecli脚手架博客案例】 https://www.bilibili.com/video/BV1pz4y1S7bC/?share_sourcecopy_web&vd_sourceb1cb921b73fe3808550eaf2224d1c155 目录 2 Vue基础 上 2.0 补充知识 2.0.1 Vue实例的作用范围 2.0.2 t…

【视频图像取证篇】模糊图像增强技术之深度转化类滤波场景应用小结

【视频图像取证篇】模糊图像增强技术之深度转化类滤波场景应用小结 模糊图像增强技术之深度转化类滤波场景应用小结—【蘇小沐】 (一)转化类滤波器(Convert to filter) 1、灰度滤波器(Gray filter) 灰度…

【C++】string进一步介绍

个人主页 : zxctscl 如有转载请先通知 文章目录 1. 前言2. 迭代器2.1 反向迭代器2.2 const对象迭代器 3. Capacity3.1 size和length3.2 max_size3.3 capacity3.4 clear3.5 shrink_to_fit (了解即可)3.6 reserve3.7 resize 4. Element access4…

实验室管理系统 |基于springboot框架+ Mysql+JSP技术+Tomcat的实验室管理系统 设计与实现(可运行源码+数据库+设计文档)

推荐阅读100套最新项目 最新ssmjava项目文档视频演示可运行源码分享 最新jspjava项目文档视频演示可运行源码分享 最新Spring Boot项目文档视频演示可运行源码分享 目录 用户后台功能模块 用户后台管理 管理员功能登录前台功能效果图 系统功能设计 数据库E-R图设计 lunw…

宜搭faas服务器获取accessToken

可以用faas服务器的OpenAPIUtil.getCustomAccessTokenThenCache(Client ID,Client Secret)就可以获取 至于获取这个Client ID,Client Secret 就需要在钉钉开放平台创建一个应用 然后在这个应用的基础信息里面有 注意的是:如果需要…

场景案例:加油站网点设备远程运维,能源行业运维痛点分析

能源是工业发展的基础,但作为相对传统的工业领域,能源行业想要继续引领社会的发展,就势必要跟上数字化的浪潮,甚至主动拥抱数字化。 这种数字化有很多的表现形式,最直观的就是整个业务平台采用联网的数字化系统&#…

70城市房价同比继续下降

据北京商报的最新报道,昨(3月15日)天国家统计局发布《2月70个大中城市商品住宅销售价格》显示,2024年2月,在70个大中城市中,各线城市商品住宅销售价格同比继续下降。 一线城市二手住宅销售价格同比下降6.3…

Appium 自动化测试

1.Appium介绍 1,appium是开源的移动端自动化测试框架; 2,appium可以测试原生的、混合的、以及移动端的web项目; 3,appium可以测试ios,android应用(当然了,还有firefoxos&#xff09…

VUE3内置组件Transition的学习使用

更多ruoyi-nbcio功能请看演示系统 gitee源代码地址 前后端代码: https://gitee.com/nbacheng/ruoyi-nbcio 演示地址:RuoYi-Nbcio后台管理系统 更多nbcio-boot功能请看演示系统RuoYi-Nbcio亿事达企业管理平台 gitee源代码地址 后端代码:…

瑞_23种设计模式_策略模式

文章目录 1 策略模式(Strategy Pattern)★1.1 介绍1.2 概述1.3 策略模式的结构1.4 策略模式的优缺点1.5 策略模式的使用场景 2 案例一2.1 需求2.2 代码实现 3 案例二3.1 需求3.2 代码实现 4 JDK源码解析(Comparator) &#x1f64a…

Linux安装vLLM模型推理框架问题总汇

简介 vLLM 是一个专为大规模语言模型(Large Language Models, LLM)推理优化的服务框架和推理引擎。它可以高效地管理和部署预先训练好的大型语言模型,尤其是那些具有极高参数数量和复杂度的模型,如GPT系列及其他基于Transformer架…