如何根据对象的字母数字名称值正确对对象数组进行排序？

Question

我试图按名称字段对对象数组进行排序，但顺序错误。

我得到的顺序是 [1, 10, 11, 2, 20, 21, 3]

而不是 [1, 2, 3, .... 10, 11, 20, 21]

它正在排序，但将 10 放在前面2

这是我当前使用的代码。

const arr = [
    
    {
        "name": "Action 10",
        "color": "transparent",
        "type": "components"
    },
    {
        "name": "Action 11",
        "color": "transparent",
        "type": "components"
    },
    {
        "name": "Action 2",
        "color": "transparent",
        "type": "components"
    },
    {
        "name": "Action 20",
        "color": "transparent",
        "type": "components"
    },
    {
        "name": "Action 21",
        "color": "transparent",
        "type": "components"
    },
    {
        "name": "Action 3",
        "color": "transparent",
        "type": "components"
    },
    {
        "name": "Action 4",
        "color": "transparent",
        "type": "components"
    },
    {
        "name": "Action 5",
        "color": "transparent",
        "type": "components"
    },
    {
        "name": "Action 6",
        "color": "transparent",
        "type": "components"
    },
    {
        "name": "Action 1",
        "color": "transparent",
        "type": "components"
    }
]

function sorter(a, b) {
    if (a.name < b.name) return -1;
    if (a.name > b.name) return 1;
    return 0;
}

console.log(arr.sort(sorter));

Answer 1

人们可以给出数字 排序选项 href="https://developer.mozilla.org/en-US/docs/Web/JavaScript/Reference/Global_Objects/String/localeCompare" rel="nofollow noreferrer">String.prototype.localeCompare尝试一下...

const arr = [{
  name: "Action 10", color: "transparent", type: "components"
}, {
  name: "Action 11", color: "transparent", type: "components"
}, {
  name: "Action 2", color: "transparent", type: "components"
}, {
  name: "Action 20", color: "transparent", type: "components"
}, {
  name: "Action 21", color: "transparent", type: "components"
}, {
  name: "Action 3", color: "transparent", type: "components"
}, {
  name: "Action 4", color: "transparent", type: "components"
}, {
  name: "Action 5", color: "transparent", type: "components"
}, {
  name: "Action 6", color: "transparent", type: "components"
}, {
  name: "Action 1", color: "transparent", type: "components"
}];

function sorter(a, b) {
  return a.name.localeCompare(b.name, undefined, { numeric: true });
}
console.log(arr.sort(sorter));

.as-console-wrapper { min-height: 100%!important; top: 0; }

Answer 2

顺序是正确的。字符串“Action 10”将大于 Action 1 且小于 Action 2，因为字符串比较是逐个字符进行的。

字符串比较的算法可以在这里找到： https://262.ecma- International.org/5.1/#sec-11.8.5

[如果] px 和 py 都是字符串

• 如果py是px的前缀，则返回false。 （字符串值 p 是字符串值 q 的前缀，如果 q 可以是连接 p 和一些其他字符串 r 请注意，任何字符串都是其自身的前缀，因为 r 可能是空字符串。）

• 如果px是py的前缀，则返回true。

设k为最小非负整数，使得px内位置k处的字符与位置处的字符不同k 在 py 内。 （必须有这样一个k，因为两个字符串都不是另一个字符串的前缀。）

• 令m为整数，即px内位置k处的字符的代码单元值。

• 令n为整数，即py内位置k处的字符的代码单元值。

• 如果m < n，返回true。否则，返回false。

或者，作为 JavaScript 函数，表达式 str1 < str2 的计算就像调用此函数一样（并不是任何理智的人都会实现规范中描述的算法）：

function lt( px, py ) {
    const prefixOf = (x,y) => x.slice(0,y.length) === y;

    if ( prefixOf(px,py) ) return false;
    if ( prefixOf(py,px) ) return true;

    let k = 0 ;
    while ( px[k] === py[k] ) {
        ++k;
    }
 
    m = px.charCodeAt(k);
    n = py.charCodeAt(k);

    return m < n ? true : false;
  }

如果您想根据语义含义对事物进行排序 of name，您需要将字符串划分为非数字段和数字段的列表，将数字位转换为数字，然后按从左到右的顺序比较这些段向右。

Answer 3

您可以使用正则表达式：

const sorter = (a, b) => +a.name.match(/\d+/) - +b.name.match(/\d+/);

DEMO

const arr = [{"name": "Action 10","color": "transparent","type": "components"}, {"name": "Action 11","color": "transparent","type": "components"}, {"name": "Action 2","color": "transparent","type": "components"}, {"name": "Action 20","color": "transparent","type": "components"}, {"name": "Action 21","color": "transparent","type": "components"}, {"name": "Action 3","color": "transparent","type": "components"}, {"name": "Action 4","color": "transparent","type": "components"}, {"name": "Action 5","color": "transparent","type": "components"}, {"name": "Action 6","color": "transparent","type": "components"}, {"name": "Action 1","color": "transparent","type": "components"}]

function sorter(a, b) {
    return +a.name.match(/\d+/)[0] - +b.name.match(/\d+/)[0];
}

console.log(arr.sort(sorter));

Answer 4

const arr = [{"name": "Action 10","color": "transparent","type": "components"}, {"name": "Action 11","color": "transparent","type": "components"}, {"name": "12Action 2","color": "transparent","type": "components"}, {"name": "Action","color": "transparent","type": "components"}, {"name": "Action 21","color": "transparent","type": "components"}, {"name": "Action 3","color": "transparent","type": "components"}, {"name": "Action 4","color": "transparent","type": "components"}, {"name": "Action 5","color": "transparent","type": "components"}, {"name": "Action 6","color": "transparent","type": "components"}, {"name": "Action 1","color": "transparent","type": "components"}]

function sorter(a, b) {
    return +a.name.match(/\d+/)[0] - +b.name.match(/\d+/)[0];
}

console.log(arr.sort(sorter));