Javascript：包含值對象數組的對象數組 - 最高效的方式？

期望：循環遍歷單個對象數組，並基於這些對象中的鍵以最簡潔和高效的方式構建多個數組以分配給對象。有兩種方法：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次操作。關鍵問題選項是「哪個（或者還有其他更優雅的）選項（哪個）最具性能？」

來源

2017-03-08 Dan

爲什麼問題如果你已經知道答案？它是1圈vs 3圈。最高效的方式是'for'循環。 – estus

我想也許'.push'可能是一個昂貴的操作（每個循環有更多的操作）... – Dan

你一定需要用例如jsperf在你的目標javascript引擎上。關於性能的問題沒有明顯的答案，除了estus提到的功能風格函數比迭代循環更慢以外。 –

好吧，我上了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。

來源

2017-03-08 22:57:30 Dan

Javascript：包含值對象數組的對象數組 - 最高效的方式？

回答

相關問題