基于uid的vue数组排序解决方案
本文介绍一种高效的方法，用于根据一个数组的顺序调整另一个数组的顺序。假设我们有两个数组arr1和arr2，它们都包含uid属性，目标是根据arr1中uid的顺序重新排列arr2。
解决方案：
以下代码利用map和filter方法实现：
const reorderedArr2 = arr1.map(item1 => arr2.find(item2 => item1.uid === item2.uid)).filter(Boolean);
代码解释：
立即学习“前端免费学习笔记（深入）”；
-
arr1.map(item1 => ...): 遍历arr1中的每个元素item1。 -
arr2.find(item2 => item1.uid === item2.uid): 对于每个item1，在arr2中查找uid相同的元素item2。find方法返回第一个匹配的元素，如果没有匹配项，则返回undefined。 -
.filter(Boolean): 过滤掉map操作返回的undefined值，只保留找到匹配元素的结果。
示例代码及输出：
let arr1 = [
{ uid: 1638867875084 },
{ uid: 1638867869536 },
{ uid: 1638867872121 },
{ uid: 1638867882077 }
];
let arr2 = [
{ uid: 1638867869536, name: 'orange.png' },
{ uid: 1638867872121, name: 'pro_map.gif' },
{ uid: 1638867875084, name: 'avatar-3.png' },
{ uid: 1638867882077, name: 'qcode.jpg' }
];
const reorderedArr2 = arr1.map(item1 => arr2.find(item2 => item1.uid === item2.uid)).filter(Boolean);
console.log(reorderedArr2);
输出结果：
[
{ uid: 1638867875084, name: 'avatar-3.png' },
{ uid: 1638867869536, name: 'orange.png' },
{ uid: 1638867872121, name: 'pro_map.gif' },
{ uid: 1638867882077, name: 'qcode.jpg' }
]
如你所见，arr2的顺序已根据arr1中uid的顺序重新排列。 此方法简洁高效，适合在Vue.js项目中使用。 需要注意的是，如果arr1中的uid在arr2中找不到对应项，则结果数组中会缺少该元素。 如果需要处理这种情况，可以添加额外的错误处理逻辑。
