按值对对象属性进行排序

IT技术 javascript sorting properties object
2020-12-09 15:51:41

如果我有一个 JavaScript 对象,例如:

var list = {
  "you": 100, 
  "me": 75, 
  "foo": 116, 
  "bar": 15
};

有没有办法根据值对属性进行排序?所以我最终得到

list = {
  "bar": 15, 
  "me": 75, 
  "you": 100, 
  "foo": 116
};
6个回答

将它们移动到一个数组,对该数组进行排序,然后将该数组用于您的目的。这是一个解决方案:

var maxSpeed = {
    car: 300, 
    bike: 60, 
    motorbike: 200, 
    airplane: 1000,
    helicopter: 400, 
    rocket: 8 * 60 * 60
};
var sortable = [];
for (var vehicle in maxSpeed) {
    sortable.push([vehicle, maxSpeed[vehicle]]);
}

sortable.sort(function(a, b) {
    return a[1] - b[1];
});

//[["bike", 60], ["motorbike", 200], ["car", 300],
//["helicopter", 400], ["airplane", 1000], ["rocket", 28800]]

一旦你有了数组,你就可以按照你喜欢的顺序从数组中重建对象,从而实现你想要做的事情。这将适用于我所知道的所有浏览器,但它取决于实现的怪癖,并且可能随时中断。你永远不应该对 JavaScript 对象中元素的顺序做出假设。

var objSorted = {}
sortable.forEach(function(item){
    objSorted[item[0]]=item[1]
})

在 ES8 中,您可以使用Object.entries()将对象转换为数组:

const maxSpeed = {
    car: 300, 
    bike: 60, 
    motorbike: 200, 
    airplane: 1000,
    helicopter: 400, 
    rocket: 8 * 60 * 60
};

const sortable = Object.entries(maxSpeed)
    .sort(([,a],[,b]) => a-b)
    .reduce((r, [k, v]) => ({ ...r, [k]: v }), {});

console.log(sortable);


在 ES10 中,您可以使用Object.fromEntries()将数组转换为对象。那么代码可以简化为:

const maxSpeed = {
    car: 300, 
    bike: 60, 
    motorbike: 200, 
    airplane: 1000,
    helicopter: 400, 
    rocket: 8 * 60 * 60
};

const sortable = Object.fromEntries(
    Object.entries(maxSpeed).sort(([,a],[,b]) => a-b)
);

console.log(sortable);

我的项目需要对象键来干净地合并,但也需要显式排序,因为元数据驱动 UI。我遵循了类似的方法,只是我添加了一个 hasOwnProperty 检查以避免爬上原型链。这是一篇关于在 JS 中迭代对象属性的好文章hackernoon.com/...
2021-02-08 15:51:41
您能否将“您可以重建”重新表述为“您可以使用数组来维护键的顺序并从对象中提取值”?不仅它是非标准的,正如你自己提到的,这个错误的假设被更多的浏览器打破,而不仅仅是今天的 Chrome,所以最好不要鼓励用户尝试它。
2021-02-14 15:51:41
这是您的代码的更紧凑版本。Object.keys(maxSpeed).sort(function(a, b) {return -(maxSpeed[a] - maxSpeed[b])});
2021-02-20 15:51:41
_.pairs将对象转换为 [ [key1, value1], [key2, value2] ]。然后调用 sort 。然后调用_.object它把它转回来。
2021-02-21 15:51:41
@TheBrain:补充keys()一点,如果有问题仅 IE9+(和其他现代浏览器)支持。keys()从元素原型链中排除可枚举的属性(与 for..in 不同)——但这通常更可取。
2021-02-25 15:51:41

我们不想复制整个数据结构,也不想在需要关联数组的地方使用数组。

这是与 bonna 执行相同操作的另一种方法:

var list = {"you": 100, "me": 75, "foo": 116, "bar": 15};
keysSorted = Object.keys(list).sort(function(a,b){return list[a]-list[b]})
console.log(keysSorted);     // bar,me,you,foo

如果添加.map(key => list[key]);到排序的末尾,它将返回整个对象而不仅仅是键
2021-02-16 15:51:41
JavaScript 中不保证对象属性顺序,因此排序应该在数组中完成,而不是对象(这就是您所说的“关联数组”)。
2021-03-01 15:51:41
它按值排序,并显示键——但是当它打印出来时我们会丢失值计数,因为它只打印键。
2021-03-06 15:51:41
不要忘记。keysSorted是一个数组!不是对象!
2021-03-06 15:51:41
这似乎是按键排序,而不是按值排序,这不是问题所要求的?
2021-03-07 15:51:41

你的对象可以有任意数量的属性,如果你把对象放在一个数组中,你可以选择按你想要的任何对象属性排序,数字或字符串。考虑这个数组:

var arrayOfObjects = [   
    {
        name: 'Diana',
        born: 1373925600000, // Mon, Jul 15 2013
        num: 4,
        sex: 'female'
    },
    {

        name: 'Beyonce',
        born: 1366832953000, // Wed, Apr 24 2013
        num: 2,
        sex: 'female'
    },
    {            
        name: 'Albert',
        born: 1370288700000, // Mon, Jun 3 2013
        num: 3,
        sex: 'male'
    },    
    {
        name: 'Doris',
        born: 1354412087000, // Sat, Dec 1 2012
        num: 1,
        sex: 'female'
    }
];

按出生日期排序,最老的在前

// use slice() to copy the array and not just make a reference
var byDate = arrayOfObjects.slice(0);
byDate.sort(function(a,b) {
    return a.born - b.born;
});
console.log('by date:');
console.log(byDate);

按名称分类

var byName = arrayOfObjects.slice(0);
byName.sort(function(a,b) {
    var x = a.name.toLowerCase();
    var y = b.name.toLowerCase();
    return x < y ? -1 : x > y ? 1 : 0;
});

console.log('by name:');
console.log(byName);

http://jsfiddle.net/xsM5s/16/

这看起来不错,但请注意,要比较字符串,您可以只使用 x.localeCompare(y)
2021-02-07 15:51:41
这是一个对象数组,这不是 OP 要求的(具有多个属性的对象)
2021-02-07 15:51:41
@JemarJoneslocalCompare看起来是一个非常有用的功能!请注意,并非所有浏览器都支持它 - IE 10 及更低版本、Safari Mobile 9 及更低版本。
2021-02-20 15:51:41
按名称排序不应substr出第一个字符;elseDiana并且Debra有一个未定义的顺序。此外,您的byDate排序实际上使用num,而不是born
2021-03-02 15:51:41
@inorganik 对那些需要支持这些浏览器的人来说是很好的说明
2021-03-02 15:51:41

ECMAScript 2017 引入了Object.values / Object.entries. 顾名思义,前者将一个对象的所有值聚合成一个数组,后者将整个对象聚合成一个数组[key, value]数组;Python 等价于dict.values()dict.items()

这些功能使将任何散列排序为有序对象变得非常容易。截至目前,只有一小部分 JavaScript 平台支持它们,但您可以在 Firefox 47+ 上试用。

编辑:现在所有现代浏览器都支持

let obj = {"you": 100, "me": 75, "foo": 116, "bar": 15};

let entries = Object.entries(obj);
// [["you",100],["me",75],["foo",116],["bar",15]]

let sorted = entries.sort((a, b) => a[1] - b[1]);
// [["bar",15],["me",75],["you",100],["foo",116]]
仅在 ff 中,而不是 ie 中,也不再是 chrome 中,它们会自动对对象进行排序。武侠
2021-02-14 15:51:41
请注意,这不会保留密钥。
2021-02-14 15:51:41
@vsync 这个答案给出的结果与接受的答案相同,但代码更少,没有临时变量。
2021-02-20 15:51:41
FWIW,这个答案很干净,是唯一对我有帮助的答案。
2021-02-21 15:51:41
这怎么可能回答问题的标题Sorting JavaScript Object by property value您误解了我认为的问题,因为您要更改原始对象而不是从中创建新数组。
2021-03-02 15:51:41

为了完整起见,此函数返回对象属性的排序数组

function sortObject(obj) {
    var arr = [];
    for (var prop in obj) {
        if (obj.hasOwnProperty(prop)) {
            arr.push({
                'key': prop,
                'value': obj[prop]
            });
        }
    }
    arr.sort(function(a, b) { return a.value - b.value; });
    //arr.sort(function(a, b) { a.value.toLowerCase().localeCompare(b.value.toLowerCase()); }); //use this to sort as strings
    return arr; // returns array
}

var list = {"you": 100, "me": 75, "foo": 116, "bar": 15};
var arr = sortObject(list);
console.log(arr); // [{key:"bar", value:15}, {key:"me", value:75}, {key:"you", value:100}, {key:"foo", value:116}]

上面代码的 Jsfiddle 在这里此解决方案基于本文

用于排序字符串的更新小提琴在这里。您可以从中删除两个额外的 .toLowerCase() 转换以进行区分大小写的字符串比较。

对象数组呢?[ {name:Will}, {name:Bill}, {name:Ben} ]
2021-02-08 15:51:41
您好,您可以使用localeCompare 函数进行此比较。将其添加到上面的答案中。
2021-02-25 15:51:41
很好的解决方案。字符串排序需要返回
2021-02-26 15:51:41
@Stano 正确且简单的解决方案。非常感谢。
2021-03-08 15:51:41