亚洲在线久爱草,狠狠天天香蕉网,天天搞日日干久草,伊人亚洲日本欧美

為了賬號安全,請及時綁定郵箱和手機立即綁定
已解決430363個問題,去搜搜看,總會有你想問的

將并行數組組合成單個對象數組并排序

將并行數組組合成單個對象數組并排序

aluckdog 2022-05-22 11:06:25
我有一個帶有標題的輸入表:內部尺寸、外部尺寸和數量。用戶最多可以輸入 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>
查看完整描述

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

如果您有任何問題,請告訴我!


查看完整回答
反對 回復 2022-05-22
  • 1 回答
  • 0 關注
  • 149 瀏覽
慕課專欄
更多

添加回答

舉報

0/150
提交
取消
微信客服

購課補貼
聯系客服咨詢優惠詳情

幫助反饋 APP下載

慕課網APP
您的移動學習伙伴

公眾號

掃描二維碼
關注慕課網微信公眾號