Question

Desired：循环遍历单个对象数组，并以最简洁和高效的方式基于这些对象中的键构造多个数组以分配给对象。两种方法：

一：

const arrayOfObjectsToObjectOfArraysOfValues = items => {
  const newArrayOne = []
  const newArrayTwo = []
  const newArrayThree = []

  items.forEach(({ value1, value2, value3 }) => {
    newArrayOne.push(value1)
    newArrayTwo.push(value2)
    newArrayThree.push(value3)
  })

  return { newArrayOne, newArrayTwo, newArrayThree }
}

二：

const arrayOfObjectsToObjectOfArraysOfValues = items => ({
   newArrayOne: items.map(({ value1 }) => value1),
   newArrayTwo: items.map(({ value2 }) => value2),
   newArrayThree: items.map(({ value3 }) => value3),
})

编辑（也有此选项）：

const arrayOfObjectsToObjectOfArraysOfValues = items => {
  return items.reduce((r, { value1, value2, value3 }, i) => {
    r.newArrayOne[i] = value1;
    r.newArrayTwo[i] = value2;
    r.newArrayThree[i] = value3;
    return r;
  }, { newArrayOne: [], newArrayTwo: [], newArrayThree: [] });
}

显然第二个更简洁，但可以批评做三个循环，只需要一个循环。另一方面，第一个是每个循环周期进行3次操作。关键问题选项是“哪个（或者是另一个更优雅）选项（哪个）最具性能？”

Answer 1

好的，我第一次参加了jsperf的行列......看起来这里的答案取决于客户：

https://jsperf.com/arrayofobjectstoobjectofarraysofvalues/1

在Firefox上，选项1慢了23％。（每秒832,000次操作基线）
在Chrome上，选项2的速度要慢88％。（每秒248,000次操作基线）
在Safari上，选项2的速度要慢48％。（每秒158,000次操作基线）

编辑：Chrome选项中的reduce选项慢了2％ Safari，但在Firefox中慢了50％。

所以，可能是的，在大多数情况下，选项1更好。可怜的简洁......另外，去Firefox吧 - 这么快！

最后，我认为选项一可以使用reduce变得有点简洁。

Javascript：包含值数组的对象数组 - 最高效的方式？

1 个答案: