JavaScript中如何按排序字段对指定属性值进行有序字符串拼接？

我们有如下格式的JavaScript对象数组：

[
  {
    a1: 234,
    a2: 493,
    a3: 123,
    a1Rk: 4,
    a2Rk: 9,
    a3Rk: 6
  },{
    a1: 455,
    a2: 654,
    a3: 982,
    a1Rk: 7,
    a2Rk: 2,
    a3Rk: 2
  }
]

需要给每个对象新增output字段，字段值是a1、a2、a3的值按规则拼接的字符串：

• 拼接顺序由对应的a1Rk、a2Rk、a3Rk字段值决定，rank值越小越靠前
• 若rank值相同，则对应属性值更小的优先

预期输出如下：

[
  {
    a1: 234,
    a2: 493,
    a3: 123,
    a1Rk: 4,
    a2Rk: 9,
    a3Rk: 6,
    output: '234-123-493'
  },{
    a1: 455,
    a2: 654,
    a3: 982,
    a1Rk: 7,
    a2Rk: 2,
    a3Rk: 2,
    output: '654-982-455'
  }
]

可以通过数组遍历+自定义排序的方式实现需求，具体代码如下：

const originalArray = [
  { a1: 234, a2: 493, a3: 123, a1Rk: 4, a2Rk: 9, a3Rk: 6 },
  { a1: 455, a2: 654, a3: 982, a1Rk: 7, a2Rk: 2, a3Rk: 2 }
];

const resultArray = originalArray.map(item => {
  // 提取a1/a2/a3的属性值、对应的rank，组成排序用的数组
  const sortedItems = [
    { value: item.a1, rank: item.a1Rk },
    { value: item.a2, rank: item.a2Rk },
    { value: item.a3, rank: item.a3Rk }
  ].sort((x, y) => {
    // 先按rank升序排序
    if (x.rank !== y.rank) {
      return x.rank - y.rank;
    }
    // rank相同时，按属性值升序排序
    return x.value - y.value;
  });

  // 提取排序后的value，用'-'拼接成字符串
  const output = sortedItems.map(item => item.value).join('-');

  // 返回包含output字段的新对象，不修改原对象
  return { ...item, output };
});

console.log(resultArray);

代码说明 #

1. 遍历原数组：用map方法遍历每个对象，确保不修改原数组，返回新对象
2. 构建排序数组：把每个a属性的value和对应的rank整理成数组元素，方便后续排序
3. 自定义排序规则：
   • 优先比较rank值，rank小的元素排在前面
   • 若rank相等，则比较属性值，值小的排在前面
4. 生成output字段：把排序后的属性值提取出来，用join('-')拼接成目标字符串
5. 返回新对象：用扩展运算符...item保留原对象所有字段，再新增output字段

内容的提问来源于stack exchange，提问作者Canovice