與另一個陣列相比如何對陣列進行排序

let selected_variation = [{
    "type": "Capacity",
    "value": "512G",
  },
  {
    "type": "Color",
    "value": "#000000",
  }
]

let attributes = [{
    "id": "Color",
    "name": "Color",
    "type": "swatch",
    "items": [{
        "displayValue": "Green",
        "value": "#44FF03",
        "id": "Green"
      },
      {
        "displayValue": "Cyan",
        "value": "#03FFF7",
        "id": "Cyan"
      },
      {
        "displayValue": "Blue",
        "value": "#030BFF",
        "id": "Blue"
      },
      {
        "displayValue": "Black",
        "value": "#000000",
        "id": "Black"
      },
      {
        "displayValue": "White",
        "value": "#FFFFFF",
        "id": "White"
      }
    ]
  },
  {
    "id": "Capacity",
    "name": "Capacity",
    "type": "text",
    "items": [{
        "displayValue": "512G",
        "value": "512G",
        "id": "512G"
      },
      {
        "displayValue": "1T",
        "value": "1T",
        "id": "1T"
      }
    ]
  }
]

所以我有這兩個陣列我正在創建一個來跟蹤用戶選擇的產品變體其中有一個錯誤我創建的陣列中的變體順序取決于用戶單擊我需要的輸入欄位的順序按結果 api 的順序映射我的陣列，并且變化不固定它實際上根據產品而變化，所以我的預期輸出

輸出

let selected_variation = [
   {"type":"Color","value":"#000000"},
   {"type":"Capacity","value":"512G"}
]

API 遵循的順序相同

uj5u.com熱心網友回復：

也許你可以試試這個：

const order = attributes.map((attribute) =>
  selected_variation.find((v) => v.type === attribute.id)
);

console.log(order)

uj5u.com熱心網友回復：

基于這個問題的公認答案：Javascript - sort array based on another array

const selected_variation = [{
    "type": "Capacity",
    "value": "512G",
  },
  {
    "type": "Color",
    "value": "#000000",
  }
]

const attributes = [{
    "id": "Color",
    "name": "Color",
    "type": "swatch",
    "items": [{
        "displayValue": "Green",
        "value": "#44FF03",
        "id": "Green"
      },
      {
        "displayValue": "Cyan",
        "value": "#03FFF7",
        "id": "Cyan"
      },
      {
        "displayValue": "Blue",
        "value": "#030BFF",
        "id": "Blue"
      },
      {
        "displayValue": "Black",
        "value": "#000000",
        "id": "Black"
      },
      {
        "displayValue": "White",
        "value": "#FFFFFF",
        "id": "White"
      }
    ]
  },
  {
    "id": "Capacity",
    "name": "Capacity",
    "type": "text",
    "items": [{
        "displayValue": "512G",
        "value": "512G",
        "id": "512G"
      },
      {
        "displayValue": "1T",
        "value": "1T",
        "id": "1T"
      }
    ]
  }
]

selected_variation.sort((a, b) => {  
  return attributes.findIndex(attr => attr.id === a.type) - attributes.findIndex(attr => attr.id === b.type);
});

console.log(selected_variation);

但是如果有很多元素，它會作業很長時間，因為我們必須attributes一次又一次地回圈拋出陣列。但是如果我們使用更多的記憶體，我們可以大大優化演算法。主要思想是創建一個字典，其中鍵是屬性的 id，值是它們在attributes陣列中的索引：

const selected_variation = [{
    "type": "Capacity",
    "value": "512G",
  },
  {
    "type": "Color",
    "value": "#000000",
  }
]

const attributes = [{
    "id": "Color",
    "name": "Color",
    "type": "swatch",
    "items": [{
        "displayValue": "Green",
        "value": "#44FF03",
        "id": "Green"
      },
      {
        "displayValue": "Cyan",
        "value": "#03FFF7",
        "id": "Cyan"
      },
      {
        "displayValue": "Blue",
        "value": "#030BFF",
        "id": "Blue"
      },
      {
        "displayValue": "Black",
        "value": "#000000",
        "id": "Black"
      },
      {
        "displayValue": "White",
        "value": "#FFFFFF",
        "id": "White"
      }
    ]
  },
  {
    "id": "Capacity",
    "name": "Capacity",
    "type": "text",
    "items": [{
        "displayValue": "512G",
        "value": "512G",
        "id": "512G"
      },
      {
        "displayValue": "1T",
        "value": "1T",
        "id": "1T"
      }
    ]
  }
]

const attributesMap = new Map();

attributes.forEach((attribute, index) => attributesMap.set(attribute.id, index))

selected_variation.sort((a, b) => attributesMap.get(a.type) - attributesMap.get(b.type));

console.log(selected_variation);

標籤：javascript

上一篇：簡化if陳述句JavaScript中的數字驗證

下一篇：為什么地圖回傳[未定義]？我該如何解決？