如何基于动态对象的值对数组排序？兼容IE解决方案

既然原来用Object.values()的方案在IE里跑不通，那咱们换个IE支持的方式来获取对象里的数值——用Object.keys()就可以啦，IE9及以上都原生支持这个方法。

看你的数组里每个元素都只有一对键值，所以咱们可以通过取对象的第一个键来拿到对应的值，再用这个值做排序比较。修改后的完整代码如下：

$scope.data = [ { Type: 6 }, { Path: 1 }, { Text: 2 }, { Name: 3 }, { Icon: 5 }, { Case: 4 } ];

$scope.data.sort(function(a, b) {
    // 获取a对象的唯一键对应的值
    var valA = a[Object.keys(a)[0]];
    // 获取b对象的唯一键对应的值
    var valB = b[Object.keys(b)[0]];
    // 升序排序（1到6）
    return valA - valB;
});

方案兼容性说明 #

• Object.keys()是IE9及以上原生支持的API，完美避开Object.values()不兼容IE的问题；
• 因为每个对象只有一个动态键，所以Object.keys(a)[0]能精准定位到那个唯一键，再通过a[key]就能拿到我们用来排序的数值。

要是需要兼容IE8及以下？ #

如果项目还得支持IE8，只需要在代码最前面加一段Object.keys()的polyfill就行：

if (!Object.keys) {
    Object.keys = function(obj) {
        var keys = [];
        for (var i in obj) {
            if (obj.hasOwnProperty(i)) {
                keys.push(i);
            }
        }
        return keys;
    };
}

这样不管是IE8还是更高版本的浏览器，这段排序逻辑都能正常运行啦。

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