Как естественным образом отсортировать коллекцию объектов в JavaScript?

Question

Belong является примером моей коллекции объектов.

const a = [
    {name: "John", size: "100"},
    {name: "John", size: "80"},
    {name: "John", size: "82"},
    {name: "John", size: "110"},
    {name: "John", size: "70"},
    {name: "John", size: "M"},
    {name: "John", size: "S"},
    {name: "John", size: "XS"},
    {name: "John", size: "L"},
    {name: "John", size: "XL"},
]

Как я могу естественным образом отсортировать в JavaScript, что 100 больше 80 и что 100 следует после 80 в качестве примера ?

Проблема заключается в том, что значение размера представляет собой смесь чисел и строк.

Желаемый результат в порядке возрастания:

[
    {name: "John", size: "70"},
    {name: "John", size: "80"},
    {name: "John", size: "82"},
    {name: "John", size: "100"},
    {name: "John", size: "110"},
    {name: "John", size: "L"},
    {name: "John", size: "M"},
    {name: "John", size: "S"},
    {name: "John", size: "XL"},
    {name: "John", size: "XS"},
]

Требуемый результат в порядке убывания:

[
    {name: "John", size: "XS"},
    {name: "John", size: "XL"},
    {name: "John", size: "S"},
    {name: "John", size: "M"},
    {name: "John", size: "L"},
    {name: "John", size: "110"},
    {name: "John", size: "100"},
    {name: "John", size: "82"},
    {name: "John", size: "80"},
    {name: "John", size: "70"},
]

Я пробовал Loda sh JavaScript Библиотеку таким образом в порядке возрастания, но она не сортирует ее правильно, потому что видит 100 меньше 80, потому что 100 начинается с 1.

_.orderBy(a, ["size"], ["asc"])

Answer 1

Поскольку вы уже используете load sh. Просто напишите функцию, которая оценивает, имеет ли размер значение String или Integer, и затем она будет сортироваться как c для вас.

для des c, вы можете просто изменить массив c.

const a = [ {name: "John", size: "100"}, {name: "John", size: "80"}, {name: "John", size: "82"}, {name: "John", size: "110"}, {name: "John", size: "70"}, {name: "John", size: "M"},    {name: "John", size: "S"}, {name: "John", size: "XS"}, {name: "John", size: "L"}, {name: "John", size: "XL"} ];

// ascednding
const b = _.orderBy(a, function(e) { return isNaN(e.size) ? e.size: parseInt(e.size)}, ["asc"]);
console.log("ASCENDING::");
console.log(b);

//descending
const c = _.reverse(b);
console.log("DESCENDING::");
console.log(c);

<script src="https://cdnjs.cloudflare.com/ajax/libs/lodash.js/4.17.11/lodash.min.js"></script>

Answer 2

По возрастанию и по убыванию

const arr = [{name: "John", size: "100"},{name: "John", size: "80"},{name: "John", size: "82"},{name: "John", size: "110"},{name: "John", size: "70"},{name: "John", size: "M"},{name: "John", size: "S"},{name: "John", size: "XS"},{name: "John", size: "L"},{name: "John", size: "XL"}],
      handler = (a, b, desc) => {
        if (isNaN(+a) && isNaN(+b)) return (desc ? b.localeCompare(a) : a.localeCompare(b));
        else if (!isNaN(+a) && !isNaN(+b)) return (desc ? (+b - +a) : (+a - +b));
        else if (isNaN(+a)) return (desc ? -1 : 1); 
        else return (desc ? 1 : -1);
      },
      descending = arr.sort(({size: a}, {size: b}) => handler(a, b, true)),
      ascending = [...arr].sort(({size: a}, {size: b}) => handler(a, b));

console.log("Ascending")
console.log(ascending);
console.log("Descending")
console.log(descending);

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

Answer 3

const a = [
		{name: "John", size: "100"},
		{name: "John", size: "80"},
		{name: "John", size: "82"},
		{name: "John", size: "110"},
		{name: "John", size: "70"},
		{name: "John", size: "M"},
		{name: "John", size: "S"},
		{name: "John", size: "XS"},
		{name: "John", size: "L"},
		{name: "John", size: "XL"},
	]
// ascending
const sorted = arr => [...arr].sort((a, b) => a.size.localeCompare(b.size, 'en', {numeric: true}))
console.log(sorted(a))

Answer 4

  let array_data = [
    {name: "John", size: "70"},
    {name: "John", size: "80"},
    {name: "John", size: "82"},
    {name: "John", size: "100"},
    {name: "John", size: "110"},
    {name: "John", size: "L"},
    {name: "John", size: "M"},
    {name: "John", size: "S"},
    {name: "John", size: "XL"},
    {name: "John", size: "XS"},
];

    let  sorted = array_data.sort((a, b) => {return parseInt(a.size) - parseInt(b.size);});
    console.log(sorted);

Будет работать нормальная сортировка javascript.

Answer 5

Этого можно добиться с помощью обычной JavaScript логики c. Вы можете явно создать отображение размеров, которое поможет вам отсортировать значения в соответствии с требованием:

const a = [
    {name: "John", size: "100"},
    {name: "John", size: "80"},
    {name: "John", size: "82"},
    {name: "John", size: "110"},
    {name: "John", size: "70"},
    {name: "John", size: "M"},
    {name: "John", size: "S"},
    {name: "John", size: "XS"},
    {name: "John", size: "L"},
    {name: "John", size: "XL"},
];
var sizes = {
  '100': 3,
  '80': 1,
  '82': 2,
  '110': 4,
  '70': 0,
  'M': 6,
  'S': 7,
  'XS': 9,
  'L': 5,
  'XL': 8,
}
//ascending
a.sort((x, y) => {
  return sizes[x.size] - sizes[y.size];
});

console.log(a);

//descending
a.sort((x, y) => {
  return sizes[y.size] - sizes[x.size];
});

console.log(a);