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

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 = {

  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')

如果您有任何问题，请告诉我！