如何用JavaScript按对象键顺序排序映射后的数组？

这个需求很常见，其实利用ES6+对象保留插入顺序的特性，就能简洁地实现，而且完全可以用链式调用搞定，不用each函数~

核心思路 #

我们需要先拿到ops对象的键的定义顺序，再从中筛选出selected数组里包含的键，最后映射成对应的标签。这样就能保证最终的labels严格按照ops里键的出现顺序排列。

简洁实现（ES6+） #

var ops = { '1':'Label 1', '2':'Label 2', '3':'Label 3' }; 
var selected = ['3','1']; 
var labels = Object.keys(ops)
  .filter(key => selected.includes(key))
  .map(key => ops[key]); 

console.log(labels); // 输出: ["Label 1", "Label 3"]

代码解释 #

• Object.keys(ops)：返回ops对象的键数组，顺序就是你定义对象时的插入顺序（即['1','2','3']）
• filter(key => selected.includes(key))：过滤掉不在selected中的键，只保留选中项，且顺序依然遵循ops的键顺序
• map(key => ops[key])：将筛选后的键映射为对应的标签文本

兼容旧环境的写法 #

如果你的运行环境不支持ES6箭头函数和includes，可以换成以下写法：

var labels = Object.keys(ops)
  .filter(function(key) {
    return selected.indexOf(key) !== -1;
  })
  .map(function(key) {
    return ops[key];
  });

更紧凑的reduce写法（可选） #

如果想把过滤和映射合并成一步，可以用reduce，不过可读性稍弱：

var labels = Object.keys(ops)
  .reduce(function(acc, key) {
    if (selected.indexOf(key) !== -1) acc.push(ops[key]);
    return acc;
  }, []);

内容的提问来源于stack exchange，提问作者Works for a Living