当前位置：首页 > news >正文

js一数组按照另一数组进行排序

news 2025/7/4 6:00:12

有时我们需要一个数组按另一数组的顺序来进行排序，总结一下方法，同时某些场景也会用到。

首先一个数组相对简单的情况：

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-selectv-model="listQuery.data"placeholder="选择数据"clearablemultiplecollapse-tags
><el-optionv-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: '统调负荷预测值'}, {id: 2,value: 'dc015',label: '统调负荷实际值'}, {id: 3,value: 'dc037',label: '火电竞价空间预测值'}, {id: 4,value: 'dc025',label: '火电竞价空间实际值'}, {id: 5,value: 'dc028',label: '新能源出力预测值'}, {id: 6,value: 'dc020',label: '新能源出力实际值'}
]

然后我们按id来进行排序即可

this.listQuery.data.sort((a, b) => {let aid, bidthis.yleftList.forEach(item => {if (item.value == a) aid = item.idif (item.value == b) bid = item.id})return aid - bid
})