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

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

这篇关于vue2两个数组嵌套循环返回的新数组item顺序要一致的文章就介绍到这儿，希望我们推荐的文章对编程师们有所帮助！

---