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

2024-05-25 14:12:40 浏览数 (1)

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()​​​去除这些无效值。注意这里使用了扩展运算符​​...​​复制对象,以避免引用原始数据。

0 人点赞