如何按指定多条件规则对对象数组及DOM子元素进行排序？

排序规则 #

• 若元素的typeA为'p'，该类元素始终排在最顶部，保持原有顺序不做额外排序；
• 若元素的typeB为't'，先按typeC的数值降序排序；当typeC为0时，再按typeD的字母升序排序；
• 同时存在typeA='p'和typeB='t'的元素时，typeA='p'的元素整体排在typeB='t'的元素之前。

需求 #

将上述排序逻辑应用到以下DOM元素排序代码中，完成列表子元素的排序：

for (let i = 0; i < items.length; i++) {
    var list = document.getElementById('holder');
    [...list.children]
        .sort // 在此处实现排序逻辑
        .forEach(node => list.appendChild(node));
}

示例验证 #

示例1（仅typeA='p'的元素） #

输入：

[
  {typeA: 'p', typeB: '', typeC: 8, typeD: 'N'},
  {typeA: 'p', typeB: '', typeC: 0, typeD: 'C'},
  {typeA: 'p', typeB: '', typeC: 10, typeD: 'O'},
  {typeA: 'p', typeB: '', typeC: 3, typeD: 'H'},
  {typeA: 'p', typeB: '', typeC: 0, typeD: 'H'},
  {typeA: 'p', typeB: '', typeC: 5, typeD: 'N'},
  {typeA: 'p', typeB: '', typeC: 1, typeD: 'A'}
]

结果对应typeD顺序：N,C,O,H,H,N,A

示例2（仅typeB='t'的元素） #

输入：

[
  {typeA: '', typeB: 't', typeC: 10, typeD: 'O'},
  {typeA: '', typeB: 't', typeC: 8, typeD: 'N'},
  {typeA: '', typeB: 't', typeC: 5, typeD: 'N'},
  {typeA: '', typeB: 't', typeC: 3, typeD: 'H'},
  {typeA: '', typeB: 't', typeC: 1, typeD: 'A'},
  {typeA: '', typeB: 't', typeC: 0, typeD: 'C'},
  {typeA: '', typeB: 't', typeC: 0, typeD: 'M'}
]

结果对应typeD顺序：O,N,N,H,A,C,M

示例3（typeB='t'且typeC=0的元素） #

输入：

[
  {typeA: '', typeB: 't', typeC: 0, typeD: 'A'},
  {typeA: '', typeB: 't', typeC: 0, typeD: 'C'},
  {typeA: '', typeB: 't', typeC: 0, typeD: 'H'},
  {typeA: '', typeB: 't', typeC: 0, typeD: 'N'},
  {typeA: '', typeB: 't', typeC: 0, typeD: 'N'},
  {typeA: '', typeB: 't', typeC: 0, typeD: 'M'},
  {typeA: '', typeB: 't', typeC: 0, typeD: 'O'}
]

结果对应typeD顺序：A,C,H,N,N,M,O

示例4（同时存在typeA='p'和typeB='t'的元素） #

输入：

[
  {typeA: 'p', typeB: '', typeC: 8, typeD: 'N'},
  {typeA: 'p', typeB: '', typeC: 0, typeD: 'C'},
  {typeA: '', typeB: 't', typeC: 10, typeD: 'O'},
  {typeA: 'p', typeB: '', typeC: 3, typeD: 'H'},
  {typeA: 'p', typeB: '', typeC: 0, typeD: 'H'},
  {typeA: '', typeB: 't', typeC: 5, typeD: 'N'},
  {typeA: 'p', typeB: '', typeC: 1, typeD: 'A'}
]

结果对应typeD顺序：N,C,H,H,A,O,N

代码实现 #

假设DOM节点的typeA/typeB/typeC/typeD数据存储在节点的dataset属性中，以下是完整的排序逻辑实现：

for (let i = 0; i < items.length; i++) {
    var list = document.getElementById('holder');
    [...list.children]
        .sort((a, b) => {
            // 获取节点的属性数据，可根据实际存储方式调整
            const dataA = {
                typeA: a.dataset.typeA,
                typeB: a.dataset.typeB,
                typeC: parseInt(a.dataset.typeC) || 0,
                typeD: a.dataset.typeD
            };
            const dataB = {
                typeA: b.dataset.typeA,
                typeB: b.dataset.typeB,
                typeC: parseInt(b.dataset.typeC) || 0,
                typeD: b.dataset.typeD
            };

            // 处理typeA为p的优先级排序
            const isAP = dataA.typeA === 'p';
            const isBP = dataB.typeA === 'p';
            if (isAP && !isBP) return -1;
            if (!isAP && isBP) return 1;
            // 同为p类型，保持原顺序
            if (isAP && isBP) return 0;

            // 处理typeB为t的排序规则
            const isAT = dataA.typeB === 't';
            const isBT = dataB.typeB === 't';
            if (isAT && isBT) {
                // 先按typeC降序
                if (dataA.typeC !== dataB.typeC) {
                    return dataB.typeC - dataA.typeC;
                }
                // typeC为0时按typeD升序
                if (dataA.typeC === 0) {
                    return dataA.typeD.localeCompare(dataB.typeD);
                }
                return 0;
            }

            // 其他情况保持原顺序
            return 0;
        })
        .forEach(node => list.appendChild(node));
}

说明 #

• 如果属性不是存储在dataset中，可改为a.getAttribute('typeA')这类方式获取；
• parseInt(a.dataset.typeC) || 0确保非数字的typeC被视为0，避免排序错误；
• 利用ES2019及以后浏览器支持的稳定排序特性，保证typeA='p'的元素保留原有顺序；
• localeCompare实现字母的自然升序排序，符合预期的字典序规则。

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