协慌网

登录 贡献 社区

对象的映射函数(而不是数组)

我有一个对象:

myObject = { 'a': 1, 'b': 2, 'c': 3 }

我正在寻找一个本机方法,类似于Array.prototype.map ,将使用如下:

newObject = myObject.map(function (value, label) {
    return value * value;
});

// newObject is now { 'a': 1, 'b': 4, 'c': 9 }

JavaScript 是否为对象提供了这样的map函数? (我想将它用于 Node.JS,所以我不关心跨浏览器问题。)

答案

Object对象没有本地map ,但是如何:

var myObject = { 'a': 1, 'b': 2, 'c': 3 };

Object.keys(myObject).map(function(key, index) {
  myObject[key] *= 2;
});

console.log(myObject);
// => { 'a': 2, 'b': 4, 'c': 6 }

但你可以使用for ... in来轻松迭代一个对象:

var myObject = { 'a': 1, 'b': 2, 'c': 3 };

for (var key in myObject) {
  if (myObject.hasOwnProperty(key)) {
    myObject[key] *= 2;
  }
}

console.log(myObject);
// { 'a': 2, 'b': 4, 'c': 6 }

更新

很多人都提到以前的方法不返回新对象,而是操作对象本身。就此而言,我想添加另一个返回新对象的解决方案,并保留原始对象:

var myObject = { 'a': 1, 'b': 2, 'c': 3 };

// returns a new object with the values at each key mapped using mapFn(value)
function objectMap(object, mapFn) {
  return Object.keys(object).reduce(function(result, key) {
    result[key] = mapFn(object[key])
    return result
  }, {})
}

var newObject = objectMap(myObject, function(value) {
  return value * 2
})

console.log(newObject);
// => { 'a': 1, 'b': 4, 'c': 6 }

console.log(myObject);
// => { 'a': 1, 'b': 2, 'c': 3 }

Array.prototype.reduce通过稍微合并先前的值和当前值将数组减少为单个值。该链由空对象{}初始化。在每次迭代时,都会添加myObject的新键,其 square 作为值。

如何在普通 JS( ES6 / ES2015 )中使用即时变量赋值的单行程怎么样?

利用spread 运算符计算出的键名语法:

let newObj = Object.assign({}, ...Object.keys(obj).map(k => ({[k]: obj[k] * obj[k]})));

jsbin

使用 reduce 的另一个版本:

let newObj = Object.keys(obj).reduce((p, c) => ({...p, [c]: obj[c] * obj[c]}), {});

jsbin

作为函数的第一个例子:

const oMap = (o, f) => Object.assign({}, ...Object.keys(o).map(k => ({ [k]: f(o[k]) })));

// To square each value you can call it like this:
let mappedObj = oMap(myObj, (x) => x * x);

jsbin

如果要以函数样式递归地映射嵌套对象,可以这样做:

const sqrObjRecursive = (obj) => 
  Object.keys(obj).reduce((newObj, key) => 
    (obj[key] && typeof obj[key] === 'object') ?
      {...newObj, [key]: sqrObjRecursive(obj[key])} :  // recurse.
      {...newObj, [key]: obj[key] * obj[key]}          // square val.
    ,{})

jsbin

或者更重要的是,像这样:

const sqrObjRecursive = (obj) => {
  Object.keys(obj).forEach(key => {
    if (typeof obj[key] === 'object') obj[key] = sqrObjRecursive(obj[key]);
    else obj[key] = obj[key] * obj[key]
  });
  return obj;
};

jsbin

ES7 / ES2016 开始,您可以使用Object.entries而不是Object.keys例如:

let newObj = Object.assign(...Object.entries(obj).map(([k, v]) => ({[k]: v * v})));


继承的属性和原型链:

在极少数情况下,您可能需要映射类似于对象的对象,该对象在其原型链上包含继承对象的属性。在这种情况下, Object.keys()将不起作用,因为Object.keys()不枚举继承的属性。如果需要映射继承的属性,则应使用for (key in myObj) {...}

下面是一个继承另一个对象属性的对象示例,以及Object.keys()在这种情况下不起作用的示例。

const obj1 = { 'a': 1, 'b': 2, 'c': 3}
const obj2 = Object.create(obj1);  // One of multiple ways to inherit an object in JS.

// Here you see how the properties of obj1 sit on the 'prototype' of obj2
console.log(obj2)  // Prints: obj2.__proto__ = { 'a': 1, 'b': 2, 'c': 3}

console.log(Object.keys(obj2));  // Prints: an empty Array.

for (key in obj2) {
  console.log(key);              // Prints: 'a', 'b', 'c'
}

jsbin

但是,请帮我一个忙,避免继承 。 :-)

没有本地方法,但是lodash#mapValues可以很好地完成工作

_.mapValues({ 'a': 1, 'b': 2, 'c': 3} , function(num) { return num * 3; });
// → { 'a': 3, 'b': 6, 'c': 9 }