如何用纯JavaScript实现Underscore.js的对象Map功能？

嘿，我懂你想要的——Underscore的_.map处理对象时太顺手了，现在想换成纯原生JS来实现对吧？毕竟原生Array.map()只认数组，没法直接处理对象。我来给你一步步搞定这个需求，还能完美适配你现有的代码逻辑。

核心思路 #

Underscore的_.map处理对象时，本质是：

1. 取出对象的所有自身可枚举属性的键
2. 遍历这些键，把每个键对应的值、键本身、原对象传给回调函数
3. 收集回调函数的返回值，最终返回一个数组

基于这个逻辑，我们可以写出自己的实现函数。

基础实现代码 #

先写一个最基础的版本，和Underscore处理对象的行为一致：

function objectMap(obj, callback) {
  // 获取对象自身的所有可枚举键
  const keys = Object.keys(obj);
  // 遍历键数组，执行回调并收集结果
  return keys.map(key => callback(obj[key], key, obj));
}

适配你的现有代码 #

把你原来用_.map的代码，直接替换成这个objectMap就行。注意原代码里好像没写return（可能是你漏了），我帮你补上了返回处理后的对象：

var fields = objectMap(data.filters, function(values, key) { 
  var name = key.replace(/(_Range|_Options)$/, ""); 
  var data = values[0]; 
  var min = data.min; 
  // 返回处理后的对象，这样fields才会是你想要的对象数组
  return { name: name, min: min };
});

进阶：支持上下文绑定（更贴近Underscore） #

如果你的回调函数需要指定this上下文，可以给函数加第三个参数，和Underscore的_.map对齐：

function objectMap(obj, callback, context) {
  const keys = Object.keys(obj);
  return keys.map(key => {
    // 如果传入了context，就把回调的this绑定到它上面
    return callback.call(context, obj[key], key, obj);
  });
}

举个使用上下文的例子：

const contextObj = { prefix: "filter_" };
var fields = objectMap(data.filters, function(values, key) { 
  var name = this.prefix + key.replace(/(_Range|_Options)$/, ""); 
  var data = values[0]; 
  var min = data.min; 
  return { name: name, min: min };
}, contextObj);

额外说明 #

• 如果需要遍历对象原型链上的属性，可以把Object.keys()换成Object.getOwnPropertyNames()或者Reflect.ownKeys()，但一般场景下Object.keys()足够（Underscore的_.map也默认只遍历自身可枚举属性）。
• 这个实现完全基于原生JS API，没有任何外部依赖，兼容性覆盖所有现代浏览器和Node.js环境。

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