将并行数组组合成单个对象数组并排序

Question

我有一个带有标题的输入表：内部尺寸、外部尺寸和数量。用户最多可以输入 20 个不同的实例。例如用户输入：

第 1 行 - ID = 20，OD = 30，QTY = 6
第 2 行 - ID = 10，OD = 15，QTY = 3
第 3 行 - ID = 40，OD = 52，QTY = 15
等等...

目前我正在以并行数组的形式收集所有 ID、OD 和 QTY，因此对于此示例：

IDarray = [20, 10, 40, etc...]
ODarray = [30, 15, 52, etc...]
QTYarray = [6, 3, 15, etc...]

我有一个循环遍历表格并在构建这些数组时忽略任何空白输入。所有这些都工作正常，但我希望能够根据外径 (OD) 从最大到最小对它们进行排序。看起来最好的方法是将 3 个并行数组组合成一个包含所有三个元素的对象数组，但是当输入值可以不断变化时，我似乎无法找到构建对象数组的指导不同的。我确信这是非常基本的，但我是 javascript 编码的新手，所以我正在努力解决这个问题。

我附上了我的代码片段，但我将其减少到 3 个输入以节省空间。

<script>

window.onload = function() {

$("#unit1").val(default_unit);

$("#unit2").val(default_unit);

$("#unit3").val(default_unit);

function myFunction() {

var unit1 = document.getElementById("unit1").value;

var unit2 = document.getElementById("unit2").value;

var unit3 = document.getElementById("unit3").value;

var id1 = (unit1 == 1) ? document.getElementById("id1").value:document.getElementById("id1").value / 25.4;

var id2 = (unit2 == 1) ? document.getElementById("id2").value:document.getElementById("id2").value / 25.4;

var id3 = (unit3 == 1) ? document.getElementById("id3").value:document.getElementById("id3").value / 25.4;

var od1 = (unit1 == 1) ? document.getElementById("od1").value:document.getElementById("od1").value / 25.4;

var od2 = (unit2 == 1) ? document.getElementById("od2").value:document.getElementById("od2").value / 25.4;

var od3 = (unit3 == 1) ? document.getElementById("od3").value:document.getElementById("od3").value / 25.4;

var qty1 = document.getElementById("qty1").value;

var qty2 = document.getElementById("qty2").value;

var qty3 = document.getElementById("qty3").value;

Array.prototype.clean = function(deleteValue) {

    for (var i = 0; i < this.length; i++) {

        if (this[i] == deleteValue) {         

            this.splice(i, 1);

            i--;

        }

    }

    return this;

};

var id_values = [id1, id2, id3].clean("");

var od_values = [od1, od2, od3].clean("");

var qty_values = [qty1, qty2, qty3].clean("");               

alert(id_values);

alert(od_values);

alert(qty_values);

}

</script>

Answer 1

据我了解，您最终得到了三个数组。这些数组将具有一致的长度，索引表示它们在表中的哪一行。您想要的是根据一个的值对所有三个数组的索引进行排序。这意味着您需要确保每当移动一个数组中的值时，所有其他数组的值都会从相同的位置移动。不幸的是，我知道本机函数无法做到这一点。您必须自己实现排序才能以这种方式管理它。在前端，最好将关联数据结构化为对象数组，而不是一组关联的表状数组。这样，您可以更直观地执行排序、搜索、过滤等。让我们来看看如何做到这一点。我将使用您的测试对象：var testObject = {&nbsp; id_values: [20, 10, 40],&nbsp; od_values: [30, 15, 2],&nbsp; qty_values: [6, 3, 15]};要将关联数组转换为包含关联数据的对象数组，我将实例化一个具有与表相同数量索引的零填充数组。然后，我们映射这个空白数组，从每个表中的数据创建一个对象：const dataArray = new Array(obj[by].length).fill(0).map((_, i) => {&nbsp; return {&nbsp; &nbsp; id_values: testObject.id_values[i],&nbsp; &nbsp; od_values: testObject.od_values[i],&nbsp; &nbsp; qty_values: testObject.qty_values[i]&nbsp; }}) .sort((a, b) => a[by] > b[by])此时，表格将被转换为对 JavaScript 更友好的对象数组，如下所示：const dataArray = [&nbsp;&nbsp; { id_values: 20, od_values: 30, qty_values: 6 },&nbsp;&nbsp;&nbsp; { id_values: 10, od_values: 15, qty_values: 3 },&nbsp;&nbsp;&nbsp; { id_values: 40, od_values: 2, qty_values: 15 }&nbsp;]现在可以使用本机数组排序轻松排序：dataArray.sort((a, b) => a.od_values > b.od_values)这将导致它被排序！const sortedData = [&nbsp;&nbsp; { id_values: 40, od_values: 2, qty_values: 15 },&nbsp;&nbsp;&nbsp; { id_values: 10, od_values: 15, qty_values: 3 },&nbsp;&nbsp;&nbsp; { id_values: 20, od_values: 30, qty_values: 6 }&nbsp;]通过减少对象数组，可以将这些值解构到它们的关联表中：dataArray.reduce((acc, el) => {&nbsp; Object.keys(el).map(col => {&nbsp; &nbsp; acc[col].push(el[col])&nbsp; })&nbsp; return acc}, {&nbsp; id_values: [],&nbsp; od_values: [],&nbsp; qty_values: []})产生原始数据结构，但按所选属性排序：const sortedArrays = {&nbsp;&nbsp; id_values: [ 40, 10, 20 ],&nbsp;&nbsp;&nbsp; od_values: [ 2, 15, 30 ],&nbsp;&nbsp;&nbsp; qty_values: [ 15, 3, 6 ]&nbsp;}把它们放在一起：var testObject = {&nbsp; id_values: [20, 10, 40],&nbsp; od_values: [30, 15, 2],&nbsp; qty_values: [6, 3, 15]};const sortTableObj = (obj, by) => {&nbsp; const dataArray = new Array(obj[by].length).fill(0).map((_, i) => {&nbsp; &nbsp; return {&nbsp; &nbsp; &nbsp; id_values: testObject.id_values[i],&nbsp; &nbsp; &nbsp; od_values: testObject.od_values[i],&nbsp; &nbsp; &nbsp; qty_values: testObject.qty_values[i]&nbsp; &nbsp; }&nbsp; }).sort((a, b) => a[by] > b[by])&nbsp; console.log('dataArray: ', dataArray)&nbsp;&nbsp; return dataArray.reduce((acc, el) => {&nbsp; &nbsp; Object.keys(el).map(col => {&nbsp; &nbsp; &nbsp; acc[col].push(el[col])&nbsp; &nbsp; })&nbsp; &nbsp; return acc&nbsp; }, {&nbsp; &nbsp; id_values: [],&nbsp; &nbsp; od_values: [],&nbsp; &nbsp; qty_values: []&nbsp; })}sortTableObj(testObject, 'od_values')如果您有任何问题，请告诉我！