javascript - 如何通过ID简洁地传播对象数组？

Question

我有一系列项目:

const arr = [
  { id: 'abc', value: 2 },
  { id: 'def', value: 3 },
];

我想通过 id 创建一个项目对象:

const obj = {
  abc: { id: 'abc', value: 2 },
  def: { id: 'def', value: 3 },
};

<小时/>

据我所知，最高效、最简洁的方法是通过 Array.prototype.reduce

const obj = arr.reduce((obj, entry) => {
  obj[entry.id] = entry;
  return obj;
}, {});

<小时/>

是否有性能更高和更简洁的方法来执行操作？它们是什么？

我知道这是相对主观的，并且我愿意接受如何更好地表达问题的建议。谢谢。

Answer 1

您可以利用comma operator将其变成一句台词。 :

const arr = [
  { id: 'abc', value: 2 },
  { id: 'def', value: 3 },
];

const obj = arr.reduce((obj, entry) => (obj[entry.id] = entry, obj), {});

console.log(obj);

它的可读性较差，但更简洁。这取决于你是否值得。既然您提到您对 spread 感兴趣， ，这是该解决方案，但请参阅下面的性能:

const arr = [
  { id: 'abc', value: 2 },
  { id: 'def', value: 3 },
];

const obj = arr.reduce((obj, entry) => ({ ...obj, [entry.id]: entry }), {});

console.log(obj);

还有一个解决方案，使用 Object.assign 进行参数传播，但这段代码对我来说有点笨拙，请参阅下面的性能:

const arr = [
  { id: 'abc', value: 2 },
  { id: 'def', value: 3 },
];

const obj = Object.assign({}, ...arr.map(a => ({ [a.id]: a })));

console.log(obj);

<小时/>

至于性能最佳的解决方案，很难击败 for 循环:

const arr = [
  { id: 'abc', value: 2 },
  { id: 'def', value: 3 },
];

const obj = {}, len = arr.length;
for(let i = 0; i < len; i++) {
  let a = arr[i];
  obj[a.id] = a;
}

console.log(obj);

我的机器上的快速基准测试得出以下结果(在 Firefox 66 上):

test case     | ops/s             | result
reduce-comma  | 22,248,622 ±2.83% |  6.89% slower
reduce-spread |  4,149,590 ±2.84% | 82.63% slower
object-assign |  1,809,170 ±0.69% | 92.43% slower
for-loop      | 23,895,193 ±2.51% | fastest

由于使用了对象扩展运算符，第二个解决方案要慢得多，该运算符在每次迭代时都会克隆对象。老实说，我不确定为什么 Object.assign 甚至更慢，因为大多数对象传播的实现都只是 Object.assign 在幕后。

最后两个选项之间的差异很小，但在优化不佳的旧浏览器上可能会更显着。如果这确实是一个性能关键型应用程序，我建议您运行自己的基准测试。