通过遍历数组将方法分配给对象答案

【问题标题】：Assign methods to object by iterating over an array通过遍历数组将方法分配给对象
【发布时间】：2016-03-02 19:55:55
【问题描述】：

在 ES5 中，我知道可以通过以下方式使用 forEach 循环将方法分配给对象：

var myMethods = [
  {
    name: 'start',
    src: someFn
  },
  {
    name: 'stop',
    src: someOtherFn
  }
];

var myObject = {};

myMethods.forEach(function(method) {
  myObject[method.name] = method.src;
});

在 ES2015（或 ES6）中，是否可以在创建对象的同时定义这些方法？以下是我可能期望它如何工作的示例：

// example
const myObject = {
  [...myMethods.map((method) => method.name)]: [...myMethods.map(method) => method.src)]
}

最终结果如下所示：

const myObject = {
  start: someFn,
  stop: someOtherFn
}

如果有一种方法可以遍历这些方法并将它们分配给myObject，我会很高兴地重组myMethods 数组，以便实现这一点。

最终目标是能够在外部模块中分配这些方法中的每一个，而不必重复定义。

【问题讨论】：

标签： javascript arrays object ecmascript-6

【解决方案1】：

是的，您可以使用 Object.assign 和扩展运算符与计算的属性名称一起做

var myObject = Object.assign({}, ...myMethods.map(({name, src}) => ({[name]: src})));

首先，我们将myMethods 映射到一个小的单一属性对象数组，其键由name 属性的值和src 属性的值给出。然后我们使用扩展运算符... 将这些作为参数传递给Object.assign。 Object.assign 然后为我们将它们粘在一起。

【讨论】：

A+ 不错的单行本详细说明
切勿在生产中使用此代码。可以在几个符号中完成，这很好，但它会浪费大量计算机时间来创建不必要的对象：jsperf.com/assign-vs-reduce/4Reduce 可能更适合这种情况

【解决方案2】：

Reduce 应该为您解决问题。请注意，可选的第二个参数用于以空对象开头。

var myMethods = [{
  name: 'start',
  src: function() {
    console.log('started')
  }
}, {
  name: 'stop',
  src: function() {
    console.log('stopped')
  }
}];

var myObject = myMethods.reduce((obj, method) => {
  obj[method.name] = method.src;
  return obj;
}, {})


console.log(myObject)
myObject.start()
myObject.stop()

【讨论】：

很公平，但我将继续假设使用 reduce 对 OP 来说是新的，否则他已经使用它而不是 forEach 解决方案
您也可以使用Object.assign。例如myMethods.reduce((obj, method) => Object.assign(obj, {[method.name]: method.src}), {}); 所以你会得到一些 ES6 的好处。

【解决方案3】：

尝试在myMethodsassignnemts 的同一行分配给myObject

var myObject = {};

someFn = function(){console.log(this)};
someOtherFn = function(){console.log(this)};

var myObject = {};

someFn = function(){};
someOtherFn = function(){}

var myMethods = [
  {
    name: (myObject["start"] = "start"),
    src: (myObject["start"] = someFn)
  },
  {
    name: (myObject["stop"] = "stop"),
    src: (myObject["stop"] = someOtherFn)
  }
];

【讨论】：