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);

这里做了以下优化：

使用map()函数遍历arr2，对于arr2中的每个item，在allOriC中查找匹配的元素。
使用find()函数根据条件item.dataIndex === item2.dataIndex查找匹配项。
如果找到匹配项，则将其放入新数组；如果没有找到（find()返回undefined），则用null填充当前位置。
最后，使用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()去除这些无效值。注意这里使用了扩展运算符...复制对象，以避免引用原始数据。