前往小程序,Get更优阅读体验!
立即前往
首页
学习
活动
专区
工具
TVP
发布
社区首页 >专栏 >vue2两个数组嵌套循环返回的新数组item顺序要一致

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

作者头像
JaneYork
发布2024-05-25 14:12:40
500
发布2024-05-25 14:12:40
举报

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
复制
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
复制
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 删除。

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

评论
登录后参与评论
0 条评论
热度
最新
推荐阅读
领券
问题归档专栏文章快讯文章归档关键词归档开发者手册归档开发者手册 Section 归档