2017-03-08 60 views
0

期望:循环遍历单个对象数组,并基于这些对象中的键以最简洁和高效的方式构建多个数组以分配给对象。有两种方法:Javascript:包含值对象数组的对象数组 - 最高效的方式?

一:

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次操作。关键问题选项是“哪个(或者还有其他更优雅的)选项(哪个)最具性能?”

+0

为什么问题如果你已经知道答案?它是1圈vs 3圈。最高效的方式是'for'循环。 – estus

+0

我想也许'.push'可能是一个昂贵的操作(每个循环有更多的操作)... – Dan

+2

你一定需要用例如jsperf在你的目标javascript引擎上。关于性能的问题没有明显的答案,除了estus提到的功能风格函数比迭代循环更慢以外。 –

回答

0

好吧,我上了jsperf行列的我第一次......貌似答案这里是它取决于客户端:

https://jsperf.com/arrayofobjectstoobjectofarraysofvalues/1

在Firefox选项1是比较慢23%。 (832,000 ops per second baseline)
在Chrome上,选项2的速度慢了88%。 (248,000 ops每秒基线)
在Safari选项2上慢了48%。 (158,000 ops per second baseline)

编辑:减少选项在Chrome浏览器中速度减慢2%& Safari,但在Firefox中速度减慢50%。

所以,可能是的,选项1在大多数情况下更好。可惜的简明...另外,去Firefox - 太快了!

最后,我想选项一可以使用减少变得有点conciser。

相关问题