javascript - сортировка - массив объектов js




Сортировка массива объектов по значению свойства string (20)

У меня есть массив объектов JavaScript:

var objs = [ 
    { first_nom: 'Lazslo', last_nom: 'Jamf'     },
    { first_nom: 'Pig',    last_nom: 'Bodine'   },
    { first_nom: 'Pirate', last_nom: 'Prentice' }
];

Как я могу отсортировать их по значению last_nom в JavaScript?

Я знаю о sort(a,b) , но это, похоже, работает только на строки и числа. Нужно ли добавлять к объектам метод toString() ?


Сортировка (подробнее) Комплексные массивы объектов

Поскольку вы, вероятно, сталкиваетесь с более сложными структурами данных, такими как этот массив, я бы расширил решение.

TL; DR

Более плавная версия основана на очень симпатичном answer @ege-Özcan .

проблема

Я столкнулся с ниже и не мог изменить его. Я также не хотел временно сгладить объект. Я также не хотел использовать underscore / lodash, главным образом по соображениям производительности и забавой для его реализации.

var People = [
   {Name: {name: "Name", surname: "Surname"}, Middlename: "JJ"},
   {Name: {name: "AAA", surname: "ZZZ"}, Middlename:"Abrams"},
   {Name: {name: "Name", surname: "AAA"}, Middlename: "Wars"}
];

Цель

Цель состоит в том, чтобы отсортировать его в основном с помощью People.Name.name и, во-вторых, с помощью People.Name.surname

Препятствия

Теперь в базовом решении используется нотация нот для вычисления свойств для динамического сортировки. Здесь, однако, нам также придется динамически People['Name.name'] обозначения скобок, так как вы ожидаете, что такие People['Name.name'] как People['Name.name'] будут работать, а это не так.

С другой стороны, People['Name']['name'] является статическим и позволяет вам спуститься на n-й уровень.

Решение

Основное дополнение здесь - это спуститься по дереву объектов и определить значение последнего листа, вы должны указать, а также любой промежуточный лист.

var People = [
   {Name: {name: "Name", surname: "Surname"}, Middlename: "JJ"},
   {Name: {name: "AAA", surname: "ZZZ"}, Middlename:"Abrams"},
   {Name: {name: "Name", surname: "AAA"}, Middlename: "Wars"}
];

People.sort(dynamicMultiSort(['Name','name'], ['Name', '-surname']));
// Results in...
// [ { Name: { name: 'AAA', surname: 'ZZZ' }, Middlename: 'Abrams' },
//   { Name: { name: 'Name', surname: 'Surname' }, Middlename: 'JJ' },
//   { Name: { name: 'Name', surname: 'AAA' }, Middlename: 'Wars' } ]

// same logic as above, but strong deviation for dynamic properties 
function dynamicSort(properties) {
  var sortOrder = 1;
  // determine sort order by checking sign of last element of array
  if(properties[properties.length - 1][0] === "-") {
    sortOrder = -1;
    // Chop off sign
    properties[properties.length - 1] = properties[properties.length - 1].substr(1);
  }
  return function (a,b) {
    propertyOfA = recurseObjProp(a, properties)
    propertyOfB = recurseObjProp(b, properties)
    var result = (propertyOfA < propertyOfB) ? -1 : (propertyOfA > propertyOfB) ? 1 : 0;
    return result * sortOrder;
  };
}

/**
 * Takes an object and recurses down the tree to a target leaf and returns it value
 * @param  {Object} root - Object to be traversed.
 * @param  {Array} leafs - Array of downwards traversal. To access the value: {parent:{ child: 'value'}} -> ['parent','child']
 * @param  {Number} index - Must not be set, since it is implicit.
 * @return {String|Number}       The property, which is to be compared by sort.
 */
function recurseObjProp(root, leafs, index) {
  index ? index : index = 0
  var upper = root
  // walk down one level
  lower = upper[leafs[index]]
  // Check if last leaf has been hit by having gone one step too far.
  // If so, return result from last step.
  if (!lower) {
    return upper
  }
  // Else: recurse!
  index++
  // HINT: Bug was here, for not explicitly returning function
  // https://.com/a/17528613/3580261
  return recurseObjProp(lower, leafs, index)
}

/**
 * Multi-sort your array by a set of properties
 * @param {...Array} Arrays to access values in the form of: {parent:{ child: 'value'}} -> ['parent','child']
 * @return {Number} Number - number for sort algorithm
 */
function dynamicMultiSort() {
  var args = Array.prototype.slice.call(arguments); // slight deviation to base

  return function (a, b) {
    var i = 0, result = 0, numberOfProperties = args.length;
    // REVIEW: slightly verbose; maybe no way around because of `.sort`-'s nature
    // Consider: `.forEach()`
    while(result === 0 && i < numberOfProperties) {
      result = dynamicSort(args[i])(a, b);
      i++;
    }
    return result;
  }
}

пример

Рабочий пример для JSBin


В ES6 / ES2015 или более поздней версии вы можете сделать так:

objs.sort((a, b) => a.last_nom.localeCompare(b.last_nom));

Вместо использования специальной функции сравнения вы также можете создать тип объекта с помощью специального метода toString() (который вызывается функцией сравнения по умолчанию):

function Person(firstName, lastName) {
    this.firtName = firstName;
    this.lastName = lastName;
}

Person.prototype.toString = function() {
    return this.lastName + ', ' + this.firstName;
}

var persons = [ new Person('Lazslo', 'Jamf'), ...]
persons.sort();

Вы также можете создать динамическую функцию сортировки, которая сортирует объекты по их значению, которое вы передаете:

function dynamicSort(property) {
    var sortOrder = 1;
    if(property[0] === "-") {
        sortOrder = -1;
        property = property.substr(1);
    }
    return function (a,b) {
        var result = (a[property] < b[property]) ? -1 : (a[property] > b[property]) ? 1 : 0;
        return result * sortOrder;
    }
}

Таким образом, у вас может быть массив таких объектов:

var People = [
    {Name: "Name", Surname: "Surname"},
    {Name:"AAA", Surname:"ZZZ"},
    {Name: "Name", Surname: "AAA"}
];

... и он будет работать, когда вы это сделаете:

People.sort(dynamicSort("Name"));
People.sort(dynamicSort("Surname"));
People.sort(dynamicSort("-Surname"));

На самом деле это уже отвечает на вопрос. Ниже часть написана, потому что многие люди связались со мной, жалуясь, что она не работает с несколькими параметрами .

Несколько параметров

Вы можете использовать приведенную ниже функцию для создания функций сортировки с несколькими параметрами сортировки.

function dynamicSortMultiple() {
    /*
     * save the arguments object as it will be overwritten
     * note that arguments object is an array-like object
     * consisting of the names of the properties to sort by
     */
    var props = arguments;
    return function (obj1, obj2) {
        var i = 0, result = 0, numberOfProperties = props.length;
        /* try getting a different result from 0 (equal)
         * as long as we have extra properties to compare
         */
        while(result === 0 && i < numberOfProperties) {
            result = dynamicSort(props[i])(obj1, obj2);
            i++;
        }
        return result;
    }
}

Что позволит вам сделать что-то вроде этого:

People.sort(dynamicSortMultiple("Name", "-Surname"));

Добавление его в прототип

(Реализация, которая чуть ниже, вдохновлена answer Майка Р. )

Я бы не рекомендовал изменить собственный прототип объекта, а просто привести пример, чтобы вы могли реализовать его на своих собственных объектах (для сред, которые его поддерживают, вы также можете использовать Object.defineProperty как показано в следующем разделе, который, по крайней мере, не имеет отрицательного побочного эффекта перечислимого, как описано в последней части)

Реализация прототипа будет примерно такой: ( Вот пример работы ):

//Don't just copy-paste this code. You will break the "for-in" loops
!function() {
    function _dynamicSortMultiple(attr) {
       /* dynamicSortMultiple function body comes here */
    }
    function _dynamicSort(property) {
        /* dynamicSort function body comes here */
    }
    Array.prototype.sortBy = function() {
        return this.sort(_dynamicSortMultiple.apply(null, arguments));
    }
}();

«OK» способ добавления его к прототипу

Если вы нацеливаете IE v9.0 и выше, то, как я уже упоминал ранее, используйте Object.defineProperty как это ( рабочий пример ):

//Won't work below IE9, but totally safe otherwise
!function() {
    function _dynamicSortMultiple(attr) {
       /* dynamicSortMultiple function body comes here */
    }
    function _dynamicSort(property) {
        /* dynamicSort function body comes here */
    }
    Object.defineProperty(Array.prototype, "sortBy", {
        enumerable: false,
        writable: true,
        value: function() {
            return this.sort(_dynamicSortMultiple.apply(null, arguments));
        }
    });
}();

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

Все эти прототипы позволяют:

People.sortBy("Name", "-Surname");

Вы должны прочитать это

Если вы используете метод прямого прототипа доступа (Object.defineProperty в порядке), а другой код не проверяет hasOwnProperty , котята умирают! Хорошо, честно говоря, никакого вреда для котенка не наносит никакого вреда, но, вероятно, все сломается, и каждый другой разработчик в вашей команде будет вас ненавидеть:

Посмотрите, что последний «SortBy»? Да уж. Не круто. Используйте Object.defineProperty, где вы можете, и оставите Array.prototype в одиночку.


Если у вас есть дубликаты фамилий, вы можете отсортировать их по имени -

obj.sort(function(a,b){
  if(a.last_nom< b.last_nom) return -1;
  if(a.last_nom >b.last_nom) return 1;
  if(a.first_nom< b.first_nom) return -1;
  if(a.first_nom >b.first_nom) return 1;
  return 0;
});

Еще один вариант:

var someArray = [...];

function generateSortFn(prop, reverse) {
    return function (a, b) {
        if (a[prop] < b[prop]) return reverse ? 1 : -1;
        if (a[prop] > b[prop]) return reverse ? -1 : 1;
        return 0;
    };
}

someArray.sort(generateSortFn('name', true));

сортирует по возрастанию по умолчанию.


Не поймите, почему люди делают это настолько сложным:

objs.sort(function(a, b){
  return a.last_nom > b.last_nom;
});

Для более строгих двигателей:

objs.sort(function(a, b){
  return a.last_nom == b.last_nom ? 0 : +(a.last_nom > b.last_nom) || -1;
});

Переведите оператор, чтобы он отсортировался по обратному алфавитному порядку.


Объединяя динамическое решение Ege с идеей Vinay, вы получаете хорошее надежное решение:

Array.prototype.sortBy = function() {
    function _sortByAttr(attr) {
        var sortOrder = 1;
        if (attr[0] == "-") {
            sortOrder = -1;
            attr = attr.substr(1);
        }
        return function(a, b) {
            var result = (a[attr] < b[attr]) ? -1 : (a[attr] > b[attr]) ? 1 : 0;
            return result * sortOrder;
        }
    }
    function _getSortFunc() {
        if (arguments.length == 0) {
            throw "Zero length arguments not allowed for Array.sortBy()";
        }
        var args = arguments;
        return function(a, b) {
            for (var result = 0, i = 0; result == 0 && i < args.length; i++) {
                result = _sortByAttr(args[i])(a, b);
            }
            return result;
        }
    }
    return this.sort(_getSortFunc.apply(null, arguments));
}

Использование:

// Utility for printing objects
Array.prototype.print = function(title) {
    console.log("************************************************************************");
    console.log("**** "+title);
    console.log("************************************************************************");
    for (var i = 0; i < this.length; i++) {
        console.log("Name: "+this[i].FirstName, this[i].LastName, "Age: "+this[i].Age);
    }
}

// Setup sample data
var arrObj = [
    {FirstName: "Zach", LastName: "Emergency", Age: 35},
    {FirstName: "Nancy", LastName: "Nurse", Age: 27},
    {FirstName: "Ethel", LastName: "Emergency", Age: 42},
    {FirstName: "Nina", LastName: "Nurse", Age: 48},
    {FirstName: "Anthony", LastName: "Emergency", Age: 44},
    {FirstName: "Nina", LastName: "Nurse", Age: 32},
    {FirstName: "Ed", LastName: "Emergency", Age: 28},
    {FirstName: "Peter", LastName: "Physician", Age: 58},
    {FirstName: "Al", LastName: "Emergency", Age: 51},
    {FirstName: "Ruth", LastName: "Registration", Age: 62},
    {FirstName: "Ed", LastName: "Emergency", Age: 38},
    {FirstName: "Tammy", LastName: "Triage", Age: 29},
    {FirstName: "Alan", LastName: "Emergency", Age: 60},
    {FirstName: "Nina", LastName: "Nurse", Age: 54}
];

//Unit Tests
arrObj.sortBy("LastName").print("LastName Ascending");
arrObj.sortBy("-LastName").print("LastName Descending");
arrObj.sortBy("LastName", "FirstName", "-Age").print("LastName Ascending, FirstName Ascending, Age Descending");
arrObj.sortBy("-FirstName", "Age").print("FirstName Descending, Age Ascending");
arrObj.sortBy("-Age").print("Age Descending");

Простое и быстрое решение этой проблемы с использованием наследования прототипов:

Array.prototype.sortBy = function(p) {
  return this.slice(0).sort(function(a,b) {
    return (a[p] > b[p]) ? 1 : (a[p] < b[p]) ? -1 : 0;
  });
}

Пример / использование

objs = [{age:44,name:'vinay'},{age:24,name:'deepak'},{age:74,name:'suresh'}];

objs.sortBy('age');
// Returns
// [{"age":24,"name":"deepak"},{"age":44,"name":"vinay"},{"age":74,"name":"suresh"}]

objs.sortBy('name');
// Returns
// [{"age":24,"name":"deepak"},{"age":74,"name":"suresh"},{"age":44,"name":"vinay"}]

Обновление: больше не изменяет исходный массив.


Простой способ:

objs.sort(function(a,b) {
  return b.last_nom.toLowerCase() < a.last_nom.toLowerCase();
});

Смотрите, что '.toLowerCase()' необходимо для предотвращения erros при сравнении строк.


Ты можешь использовать

Самый простой способ: Lodash

( https://lodash.com/docs/4.17.10#orderBy )

Этот метод похож на _.sortBy, за исключением того, что он позволяет указывать сортировку сортиров. Если заказы не указаны, все значения сортируются в порядке возрастания. В противном случае укажите порядок «desc» для нисходящего или «asc» для возрастающего порядка сортировки соответствующих значений.

аргументы

collection (Array | Object): коллекция перебирается. [iteratees = [_. identity]] (Array [] | Function [] | Object [] | string []): Итерирует сортировку. [orders] (string []): порядки сортировки итераций.

Возвращает

(Array): возвращает новый отсортированный массив.

var _ = require('lodash');
var homes = [
    {"h_id":"3",
     "city":"Dallas",
     "state":"TX",
     "zip":"75201",
     "price":"162500"},
    {"h_id":"4",
     "city":"Bevery Hills",
     "state":"CA",
     "zip":"90210",
     "price":"319250"},
    {"h_id":"6",
     "city":"Dallas",
     "state":"TX",
     "zip":"75000",
     "price":"556699"},
    {"h_id":"5",
     "city":"New York",
     "state":"NY",
     "zip":"00010",
     "price":"962500"}
    ];

_.orderBy(homes, ['city', 'state', 'zip'], ['asc', 'desc', 'asc']);

У меня есть код, который работает для меня:

arr.sort((a, b) => a.name > b.name)

ОБНОВЛЕНИЕ: Не работает всегда, так что это неверно :(


Я не видел, чтобы этот конкретный подход предлагался, так что вот примерный метод сравнения, который мне нравится использовать для string и number :

const objs = [ 
  { first_nom: 'Lazslo', last_nom: 'Jamf'     },
  { first_nom: 'Pig',    last_nom: 'Bodine'   },
  { first_nom: 'Pirate', last_nom: 'Prentice' }
];

const sortBy = fn => (a, b) => -(fn(a) < fn(b)) || +(fn(a) > fn(b))
const getLastName = o => o.last_nom
const sortByLastName = sortBy(getLastName)

objs.sort(sortByLastName)
console.log(objs.map(getLastName))

Вот объяснение sortBy() :

sortBy() принимает fn который выбирает какое значение для объекта для использования в качестве сравнения и возвращает функцию, которая может быть передана непосредственно в Array.prototype.sort() .В этом примере мы используем o.last_nomв качестве значения для сравнения, поэтому всякий раз, когда мы получаем два объекта, Array.prototype.sort()например,

{ first_nom: 'Lazslo', last_nom: 'Jamf' }

а также

{ first_nom: 'Pig', last_nom: 'Bodine' }

мы используем

(a, b) => -(fn(a) < fn(b)) || +(fn(a) > fn(b))

сравнить их.

Помня об этом fn = o => o.last_nom, мы можем расширить функцию сравнения до эквивалентной

(a, b) => -(a.last_nom < b.last_nom) || +(a.last_nom > b.last_nom)

Логический ||оператор OR имеет функцию короткого замыкания, которая здесь очень полезна. Из-за того, как это работает, тело функции выше означает

if (a.last_nom < b.last_nom) return -1
return +(a.last_nom > b.last_nom)

Поэтому, если a < bмы вернемся -1, иначе, если a > bмы вернемся +1, но если a == b, то a < bи a > bложны, значит, он возвращается +0.

В качестве дополнительного бонуса здесь эквивалент в ECMAScript 5.1 без функций стрелок, что, к сожалению, не совсем так:

var objs = [ 
  { first_nom: 'Lazslo', last_nom: 'Jamf'     },
  { first_nom: 'Pig',    last_nom: 'Bodine'   },
  { first_nom: 'Pirate', last_nom: 'Prentice' }
];

var sortBy = function (fn) {
  return function (a, b) {
    return -(fn(a) < fn(b)) || +(fn(a) > fn(b))
  }
}

var getLastName = function (o) { return o.last_nom }
var sortByLastName = sortBy(getLastName)

objs.sort(sortByLastName)
console.log(objs.map(getLastName))


дополнительные параметры desc для кода Ege Özcan

function dynamicSort(property, desc) {
    if (desc) {
        return function (a, b) {
            return (a[property] > b[property]) ? -1 : (a[property] < b[property]) ? 1 : 0;
        }   
    }
    return function (a, b) {
        return (a[property] < b[property]) ? -1 : (a[property] > b[property]) ? 1 : 0;
    }
}

Lodash.js (надмножество Underscore.js )

Не стоит добавлять фреймворк для каждой простой логики, но, опираясь на хорошо проверенные среды утилиты, ускоряйте разработку и уменьшайте количество написанных ошибок, не стыдно.

Lodash производит очень чистый код и способствует более функциональному стилю программирования , что приводит к меньшему количеству ошибок. В одном взгляде становится ясно, что это за намерение, если код.

Вопрос OP может быть просто решен как:

const sortedObjs = _.sortBy(objs, 'last_nom');

Больше информации? Например, у нас есть следующий вложенный объект:

const users = [
  { 'user': {'name':'fred', 'age': 48}},
  { 'user': {'name':'barney', 'age': 36 }},
  { 'user': {'name':'wilma'}},
  { 'user': {'name':'betty', 'age': 32}}
];

Теперь мы можем использовать сокращенный user.age чтобы указать путь к свойству, которое должно быть сопоставлено. Мы будем сортировать объекты пользователя по вложенному возрасту. Да, это позволяет сопоставлять вложенные свойства!

const sortedObjs = _.sortBy(users, ['user.age']);

Хотите, чтобы это изменилось? Нет проблем. Используйте _.reverse .

const sortedObjs = _.reverse(_.sortBy(users, ['user.age']));

Хотите объединить оба с помощью Chaining ?

const sortedObjs = _.chain(users).sortBy('user.age').reverse().value();

Возможно, вам понадобится преобразовать их в нижний регистр, чтобы предотвратить путаницу.

objs.sort(function (a,b) {

var nameA=a.last_nom.toLowerCase(), nameB=b.last_nom.toLowerCase()

if (nameA < nameB)
  return -1;
if (nameA > nameB)
  return 1;
return 0;  //no sorting

})

Используя lodash или Underscore, его кусок пирога

> const sortedList = _.orderBy(objs, [last_nom], [asc]); // asc or desc

Учитывая исходный пример:

var objs = [ 
    { first_nom: 'Lazslo', last_nom: 'Jamf'     },
    { first_nom: 'Pig',    last_nom: 'Bodine'   },
    { first_nom: 'Pirate', last_nom: 'Prentice' }
];

Сортировка по нескольким полям:

objs.sort(function(left, right) {
    var last_nom_order = left.last_nom.localeCompare(right.last_nom);
    var first_nom_order = left.first_nom.localeCompare(right.first_nom);
    return last_nom_order || first_nom_order;
});

Заметки

  • a.localeCompare(b)является общепринятым и возвращает -1,0,1 если a<b, a==b, a>bсоответственно.
  • ||в последней строке last_nomприоритет отдается first_nom.
  • Вычитание работает с числовыми полями: var age_order = left.age - right.age;
  • Отменить для отмены порядка, return -last_nom_order || -first_nom_order || -age_order;

Я просто увеличил динамическую сортировку Ege Özcan для погружения глубоко внутри объектов. Если Data выглядит так:

obj = [
    {
        a: { a: 1, b: 2, c: 3 },
        b: { a: 4, b: 5, c: 6 }
    },
    { 
        a: { a: 3, b: 2, c: 1 },
        b: { a: 6, b: 5, c: 4 }
}];

и если вы хотите отсортировать его по аа свойства я думаю , что мое повышение помогает очень хорошо. Я добавляю новые функции для таких объектов:

Object.defineProperty(Object.prototype, 'deepVal', {
    enumerable: false,
    writable: true,
    value: function (propertyChain) {
        var levels = propertyChain.split('.');
        parent = this;
        for (var i = 0; i < levels.length; i++) {
            if (!parent[levels[i]])
                return undefined;
            parent = parent[levels[i]];
        }
        return parent;
    }
});

и изменил _dynamicSort «s возвращение функции:

return function (a,b) {
        var result = ((a.deepVal(property) > b.deepVal(property)) - (a.deepVal(property) < b.deepVal(property)));
        return result * sortOrder;
    }

И теперь вы можете сортировать аа так:

obj.sortBy('a.a');

См. Полный сценарий в JSFiddle


function compare(propName) {
    return function(a,b) {
        if (a[propName] < b[propName])
            return -1;
        if (a[propName] > b[propName])
            return 1;
        return 0;
    };
}

objs.sort(compare("last_nom"));






sorting