1 回答

TA貢獻1780條經驗 獲得超5個贊
據我了解,您最終得到了三個數組。這些數組將具有一致的長度,索引表示它們在表中的哪一行。您想要的是根據一個的值對所有三個數組的索引進行排序。這意味著您需要確保每當移動一個數組中的值時,所有其他數組的值都會從相同的位置移動。
不幸的是,我知道本機函數無法做到這一點。您必須自己實現排序才能以這種方式管理它。
在前端,最好將關聯數據結構化為對象數組,而不是一組關聯的表狀數組。這樣,您可以更直觀地執行排序、搜索、過濾等。讓我們來看看如何做到這一點。
我將使用您的測試對象:
var testObject = {
id_values: [20, 10, 40],
od_values: [30, 15, 2],
qty_values: [6, 3, 15]
};
要將關聯數組轉換為包含關聯數據的對象數組,我將實例化一個具有與表相同數量索引的零填充數組。然后,我們映射這個空白數組,從每個表中的數據創建一個對象:
const dataArray = new Array(obj[by].length).fill(0).map((_, i) => {
return {
id_values: testObject.id_values[i],
od_values: testObject.od_values[i],
qty_values: testObject.qty_values[i]
}
}) .sort((a, b) => a[by] > b[by])
此時,表格將被轉換為對 JavaScript 更友好的對象數組,如下所示:
const dataArray = [
{ id_values: 20, od_values: 30, qty_values: 6 },
{ id_values: 10, od_values: 15, qty_values: 3 },
{ id_values: 40, od_values: 2, qty_values: 15 }
]
現在可以使用本機數組排序輕松排序:
dataArray.sort((a, b) => a.od_values > b.od_values)
這將導致它被排序!
const sortedData = [
{ id_values: 40, od_values: 2, qty_values: 15 },
{ id_values: 10, od_values: 15, qty_values: 3 },
{ id_values: 20, od_values: 30, qty_values: 6 }
]
通過減少對象數組,可以將這些值解構到它們的關聯表中:
dataArray.reduce((acc, el) => {
Object.keys(el).map(col => {
acc[col].push(el[col])
})
return acc
}, {
id_values: [],
od_values: [],
qty_values: []
})
產生原始數據結構,但按所選屬性排序:
const sortedArrays = {
id_values: [ 40, 10, 20 ],
od_values: [ 2, 15, 30 ],
qty_values: [ 15, 3, 6 ]
}
把它們放在一起:
var testObject = {
id_values: [20, 10, 40],
od_values: [30, 15, 2],
qty_values: [6, 3, 15]
};
const sortTableObj = (obj, by) => {
const dataArray = new Array(obj[by].length).fill(0).map((_, i) => {
return {
id_values: testObject.id_values[i],
od_values: testObject.od_values[i],
qty_values: testObject.qty_values[i]
}
}).sort((a, b) => a[by] > b[by])
console.log('dataArray: ', dataArray)
return dataArray.reduce((acc, el) => {
Object.keys(el).map(col => {
acc[col].push(el[col])
})
return acc
}, {
id_values: [],
od_values: [],
qty_values: []
})
}
sortTableObj(testObject, 'od_values')
如果您有任何問題,請告訴我!
添加回答
舉報