経緯
react-loopsというHooksを使ってJSXでForループをやるというアプローチのライブラリが出ていたので見ていた。
実装どうやってるんだろうな〜って思ってソース見てたらなんかPropsオブジェクトのプロパティをチェックしていて、あんまり見ないビット演算子でXORしていた。
(props.hasOwnProperty("as") ^ props.hasOwnProperty("children")) === 0
なんで^ってるんだろうなっていう疑問と、自分なら&&かあるいはそもそもプロパティが特定なのだから論理演算子の変換!!(&&)で書く気がするという気持ちになった。
こう書けるのでは？
ただなんとなく『XORすると速度面で有利なのでは？』という気もしたのでパフォーマンスを調べる気持ちになって調べていた。
さて速度的にどうなんでしょう。
結論をいいますと
XOR別に速くなさそう…？
jsPerfたてた
みなさんもrun testsしてお手元のブラウザでチェックしてみてください
僕の環境でモダンブラウザ3種(Chrome+FF+Safari)を実行してみたら
!!(baseProps.foo && baseProps.bar)
baseProps.hasOwnProperty('foo') && baseProps.hasOwnProperty('bar')
(baseProps.hasOwnProperty('foo') ^ baseProps.hasOwnProperty('bar')) === 0
の順番で早かった。
hasOwnPropertyするならわずかに^(ビット演算子XOR)するより&&(論理演算子AND)したほうが速かった。
手元にいまWindowsないのでWindows環境のテストはやれてない。
XORのメリットよくわかってない
速度面で速いのではという予想をしていたけどそうでもなさそうで、それ以外になにかメリットがあるのかどうかはよくわかっていない。
Conditionalの場面でXORあんまり見ないのと、ググっても明確にこういうメリットがありますというのが出てこなかった。
こういうメリットがありますっていうのご存知の方は教えてください.
jsPerfはテストするたび結果のスナップショットがグラフに反映されていくので、ぜひみなさんもテストしてみてください。
