与另一个数组相比如何对数组进行排序

Question

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 遵循的顺序相同

Answer 1

也许你可以试试这个：

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

console.log(order)

Answer 2

基于这个问题的公认答案：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);

与另一个数组相比如何对数组进行排序

how to sort an array in comparison to another array

javascript

输出