javascriptのバーティカルバー1本の使い道

質問

宜しくお願い申し上げます。

javascriptでバーティカルバー1本は、バイナリビット演算子で、ビット論理和 (OR) だと言う事と、ビット演算子は、そのオペランドを 32 ビット (0 と 1) の並びとして扱い、標準の JavaScript 数値を返すということは、こちらのページで読んだのですが、その挙動と使い道が分かりません。

https://developer.mozilla.org/ja/docs/Web/JavaScript/Reference/Operators

例えば、以下のようにコードを書くと、
console.log(10 | 10);
console.log(10 | 9);
console.log(10 | 8);
console.log(10 | 7);
console.log(10 | 6);
console.log(10 | 5);
console.log(10 | 4);
console.log(10 | 3);
console.log(10 | 2);
console.log(10 | 1);
console.log(10 | 0);

このような謎（私にとってだけだと思いますが）の数値が戻ります。
[Log] 10
[Log] 11
[Log] 10
[Log] 15
[Log] 14
[Log] 15
[Log] 14
[Log] 11
[Log] 10
[Log] 11
[Log] 10

数学が苦手な私にも分かるようなページをご存知の方、もしくは解説をして頂ける方がいらっしゃいましたら、是非ご教示を宜しくお願い申し上げます。

回答No.1

notnot · ベストアンサー

二進数で書くと分かるかと思います。二進数の定数は、先頭に二進数であることを示すためにゼロとbを書きます。

console.log(0b1010 | 0b1010); ⇒ 0b1010 ⇒ 10
console.log(0b1010 | 0b1001); ⇒ 0b1001 ⇒ 11
console.log(0b1010 | 0b1000); ⇒ 0b1010 ⇒ 10
console.log(0b1010 | 0b0111); ⇒ 0b1111 ⇒ 15
console.log(0b1010 | 0b0110); ⇒ 0b1110 ⇒ 14
console.log(0b1010 | 0b0101); ⇒ 0b1111 ⇒ 15
console.log(0b1010 | 0b0100); ⇒ 0b1110 ⇒ 14
console.log(0b1010 | 0b0011); ⇒ 0b1011 ⇒ 11
console.log(0b1010 | 0b0010); ⇒ 0b1010 ⇒ 10
console.log(0b1010 | 0b0001); ⇒ 0b1011 ⇒ 11
console.log(0b1010 | 0b0000); ⇒ 0b1010 ⇒ 10

二進数で表示したいときは、
console.log((0b1010 | 0b1010).toString(2));
のようにします。

二進数と十進数の変換は中学で学びますが、忘れているようなら、
Windows付属の電卓でも変換できます(表示メニューでプログラマを選ぶ）。

お礼

ありがとうございます！
なるほど、いっきに理解が深まりました。
確かに！頂いたご回答を参考にして以下のようなコード書いてみたら、

var fix = 10;
for(var flw=15; flw>=0; flw--)
{
　var fix_str02 = (fix).toString(2);
　var flw_str02 = (flw).toString(2);

　var exp_str10 = fix + ' | ' + ("0" + flw).slice(-2);
　var exp_str02 = fix_str02 + ' | ' + ("000" + flw_str02).slice(-4);

　var result10 = fix | flw;
　var result02 = result10.toString(2);

　console.log(exp_str10+' -> '+result10+' , '+exp_str02+' -> '+result02);
}

こんな風に出力されて、使い道も少し見えてきました。

[Log]
10 | 15 -> 15 , 1010 | 1111 -> 1111
10 | 14 -> 14 , 1010 | 1110 -> 1110
10 | 13 -> 15 , 1010 | 1101 -> 1111
10 | 12 -> 14 , 1010 | 1100 -> 1110
10 | 11 -> 11 , 1010 | 1011 -> 1011
10 | 10 -> 10 , 1010 | 1010 -> 1010
10 | 09 -> 11 , 1010 | 1001 -> 1011
10 | 08 -> 10 , 1010 | 1000 -> 1010
10 | 07 -> 15 , 1010 | 0111 -> 1111
10 | 06 -> 14 , 1010 | 0110 -> 1110
10 | 05 -> 15 , 1010 | 0101 -> 1111
10 | 04 -> 14 , 1010 | 0100 -> 1110
10 | 03 -> 11 , 1010 | 0011 -> 1011
10 | 02 -> 10 , 1010 | 0010 -> 1010
10 | 01 -> 11 , 1010 | 0001 -> 1011
10 | 00 -> 10 , 1010 | 0000 -> 1010

複数条件の真偽をメモるフラグにしたり、色の指定などにも使えそうですね！
ありがとうございました。