有时我们需要一个数组按另一数组的顺序来进行排序,总结一下方法,同时某些场景也会用到。
首先一个数组相对简单的情况:
var arr1 = [52,23,36,11,09];
var arr2 = [23,09,11,36,52];
// 要求arr1按照arr2的顺序来排序,可以看到两个数组都不是常规的从小到大排序的
既然数组不是按数字大小来排序的,我们就不能按他们的大小来比较。虽然数字本身不能用来比较,但是我们可以换一种思路,比较位置,也就是index。
arr1.sort((a,b) => arr2.indexOf(a)-arr2.indexOf(b))
// arr1 [23,09,11,36,52]
巧用下标就可以完成排序了,这里没明白可以先了解一下sort的原理。
https://blog.csdn.net/ws9029/article/details/106734256/
如果我们遇到的数组内是对象的情况下就不能用这种方法了,比如我们可能会遇到的场景:
场景:
一个多选的select,如果不排序会按照点击的顺序生成对应的数组,需求要按原本的顺序传给后端。
<el-select
v-model="listQuery.data"
placeholder="选择数据"
clearable
multiple
collapse-tags
>
<el-option
v-for="(item,index) in dataList"
:key="index"
:label="item.label"
:value="item.value"
></el-option>
</el-select>
dataList: [
{
value: 'dc033',
label: 'XX值'
}, {
value: 'dc015',
label: 'AA值'
}, {
value: 'dc037',
label: 'BB值'
}, {
value: 'dc025',
label: 'TT值'
}, {
value: 'dc028',
label: 'HH值'
}, {
value: 'dc020',
label: 'FF值'
}
]
当我们点击下拉选选项的时候,会按照点击的顺序给listQuery.data赋值,得到的就是
['dc025','dc015','dc033']
这是个无规则,无大小顺序的数组,而且原数组本身也没有大小顺序,但是后端需要我们按照元数组的正常顺序来传递,那么我们只能创造条件来排序了。
//先给原数组加个排序的条件
dataList: [
{
id: 1,
value: 'dc033',
label: 'XX值'
}, {
id: 2,
value: 'dc015',
label: 'AA值'
}, {
id: 3,
value: 'dc037',
label: 'BB值'
}, {
id: 4,
value: 'dc025',
label: 'TT值'
}, {
id: 5,
value: 'dc028',
label: 'HH值'
}, {
id: 6,
value: 'dc020',
label: 'FF值'
}
]
然后我们按id来进行排序即可
this.listQuery.data.sort((a, b) => {
let aid, bid
this.yleftList.forEach(item => {
if (item.value == a) aid = item.id
if (item.value == b) bid = item.id
})
return aid - bid
})
这样我们巧妙利用id大小来进行升序,正好得到的是原数组的顺序