Loading [MathJax]/jax/output/CommonHTML/config.js
前往小程序,Get更优阅读体验!
立即前往
首页
学习
活动
专区
圈层
工具
发布
首页
学习
活动
专区
圈层
工具
MCP广场
社区首页 >专栏 >vue2两个数组嵌套循环返回的新数组item顺序要一致

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

作者头像
JaneYork
发布于 2024-05-25 06:12:40
发布于 2024-05-25 06:12:40
17500
代码可运行
举报
运行总次数:0
代码可运行

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)的顺序不变:

代码语言:javascript
代码运行次数:0
运行
AI代码解释
复制
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​​中的位置不同。上面提供的代码确实能实现这一目标。但为了更明确地强调这一点,我将再次给出优化后的代码:

代码语言:javascript
代码运行次数:0
运行
AI代码解释
复制
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()​​​去除这些无效值。注意这里使用了扩展运算符​​...​​复制对象,以避免引用原始数据。

本文参与 腾讯云自媒体同步曝光计划,分享自作者个人站点/博客。
原始发表:2024-05-24,如有侵权请联系 cloudcommunity@tencent.com 删除

本文分享自 作者个人站点/博客 前往查看

如有侵权,请联系 cloudcommunity@tencent.com 删除。

本文参与 腾讯云自媒体同步曝光计划  ,欢迎热爱写作的你一起参与!

评论
登录后参与评论
暂无评论
推荐阅读
编辑精选文章
换一批
原生 JavaScript 手写数组 API
本文将会先了解数组 API 的用法再模拟实现这些 API ,如果各位大佬觉得有什么不对的地方麻烦指点以下!
小丞同学
2021/08/16
7970
前端学习(40)~js学习(十七):数组的常见方法&数组的遍历
unshift():在数组最前面插入一个或多个元素,返回结果为该数组新的长度。插入元素后,其他元素的索引会依次调整。
Vincent-yuan
2020/03/19
1.9K0
盘盘项目中你常用到的数组API
数组在业务中是一个非常高频的API,在业务中基本都有用它,必不可少,本文是笔者一篇关于数组常用API的总结,希望看完在项目中有所帮助。
Maic
2022/12/21
5760
盘盘项目中你常用到的数组API
es6数据类型Symbol以及es6操作数组常用的方法
在js中,常见的数据类型有undefined null string number boolean object,而es6中,则新增了第七种数据类型symbol。
前端迷
2019/12/03
5140
9种JS数组去重的高阶方法思路,值得借鉴
一般的方法此处也不列举了,还是有很多的,如双层循环判断是否相等,或新建数组比较再push等等,需要注意的是,使用splice方法移除元素时,有可能会导致数组塌陷问题,需要处理一下。
前端达人
2021/06/16
9130
for 循环不是目的,map 映射更有意义!【FP探究】
在 JavaScript 中,由于 Function 本质也是对象(这与 Haskell 中【函数的本质是值】思路一致),所以我们可以把 Function 作为参数来进行传递!
掘金安东尼
2022/09/19
2810
for 循环不是目的,map 映射更有意义!【FP探究】
【JS必知必会】高阶函数详解与实战
当大家看到这个面试题的时候,能否在第一时间想到使用高阶函数实现?想到在实际项目开发过程中,用到哪些高级函数?有没有想过自己创造一个高阶函数呢?开始本篇文章的学习
coder_koala
2019/07/30
8030
爆 肝 一 周 总 结 最全 JavaScript Array 方法详解
我们在日常开发中,与接口打交道最多了,前端通过访问后端接口,然后将接口数据二次处理渲染到页面当中。
程序员海军
2022/02/15
8160
爆 肝 一 周 总 结 最全 JavaScript Array 方法详解
【面试题】1887- 如何判断两个数组的内容是否相等
因为把判断的 转为了字符串 updatedArr.push({item}{count}) 所以出问题了
pingan8787
2023/12/13
2740
【面试题】1887- 如何判断两个数组的内容是否相等
徒手实现24+数组方法,谁说你只是“会用”数组?
「数组是我们日常工作中用的最频繁的一类数据结构,能帮助我们解决许多问题,而其本身也包含接近33个之多的方法,做了一个脑图分类如下,熟练使用数组的你,是否想知道他们内部的实现原理呢?」
前端胖头鱼
2022/07/24
6810
徒手实现24+数组方法,谁说你只是“会用”数组?
判断两个数组是否相似 (arraysSimilar)
请在 index.html 文件中,编写 arraysSimilar 函数,实现判断传入的两个数组是否相似。具体需求:
零式的天空
2022/03/22
6570
精学手撕系列——数组扁平化
在前端面试中,手写flat是非常基础的面试题,通常出现在笔试或者第一轮面试中,主要考察面试者基本的手写代码能力和JavaScript的基本功。
胡哥有话说
2020/11/03
9310
【收藏】JavaScript数组方法速查手册极简版
JavaScript数组方法速查手册极简版中共收了32个数组的常用方法和属性,并根据方法的用途进行重新排序和分类,在文中简要的介绍了方法作用和用例说明。收藏备用吧!
毛瑞
2019/04/30
5130
【收藏】JavaScript数组方法速查手册极简版
最全 JavaScript Array 方法 详解
我们在日常开发中,与接口打交道最多了,前端通过访问后端接口,然后将接口数据二次处理渲染到页面当中。 二次处理的过程是 考验 Coder 对 Array 是否熟练 以及 在 何种 场景下使用哪种方法处理最优 。 小编,在最近开发中就遇到了 Array 问题, 在处理复杂的业务需求时,没想到Array 有类似的方法,然后将方法 组合起来解决当下问题。
程序员海军
2021/10/11
1.1K0
最全 JavaScript Array 方法 详解
js数组的操作
数组的方法有数组原型方法,也有从object对象继承来的方法,这里我们只介绍数组的原型方法,数组原型方法主要有以下这些:
IT工作者
2022/01/15
3K0
JavaScript 函数式编程—数组方法
闲逛的时候发现一个有趣的网站,ECMAScript 里面介绍了各种JS引擎和Node版本对JavaScript特性的支持,从ECMAScript5开始到未来2017将会有的特性。 ES5是JavaScript历史上最具革命的一个版本,开发者们开始摒弃对旧版本 IE 浏览器的支持,使用统一的风格编写JavaScript,并且新的ECMAScript规范也开始启动。目前几乎所有的浏览器环境和Node.JS环境都支持ES5。
李振
2021/11/26
8550
JavaScript专题(二)数组去重,会就要会的理直气壮
如果数组中有NaN,你又正好需要判断数组是否有存在NaN,这时你使用indexOf是无法判断的,你必须使用includes这个方法。
全栈程序员站长
2022/07/04
4070
常见的数组基本用法
ES5方法:pop push shift unshift reverse sort splice
前端迷
2021/04/09
9490
22个超详细的 JS 数组方法
https://juejin.cn/post/6907109642917117965
前端达人
2021/01/27
3.7K0
JavaScript中数组的操作方法(含ES6)
push() 方法可向数组的末尾添加一个或多个元素,并返回新的数组长度。会改变原数组。
Caleb
2020/11/03
6100
推荐阅读
相关推荐
原生 JavaScript 手写数组 API
更多 >
领券
问题归档专栏文章快讯文章归档关键词归档开发者手册归档开发者手册 Section 归档
本文部分代码块支持一键运行,欢迎体验
本文部分代码块支持一键运行,欢迎体验