js一數組按照另一數組進行排序

有時我們需要一個數組按另一數組的順序來進行排序，總結一下方法，同時某些場景也會用到。

首先一個數組相對簡單的情況：

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指派，得到的就是

這是個無規則，無大小順序的數組，而且原數組本身也沒有大小順序，但是後端需要我們按照元數組的正常順序來傳遞，那麼我們隻能創造條件來排序了。

//先給原數組加個排序的條件
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大小來進行升序，正好得到的是原數組的順序