Estes são chamados de operadores bitwise. Eles fazem operações diretamente nos bits do dado numérico.
Os dois primeiros são o or e o and e funcionam de forma semelhante ao ||
e &&
mas o cálculo booleano é feito bit por bit do número. A grosso modo podemos dizer que o or faz uma soma dos bits e o and faz uma multiplicação. Tabela verdade destas e outras operações.
Os dois seguintes são operadores de shift ou deslocamento de bits. O primeiro vai empurrando os bits para a direita complementando o espaço que fica na esquerda com 0. Os bits que vão mais à direita vão sendo descartados. E o segundo faz em direção oposta. Cada bit deslocado à esquerda multiplica o número por 2 e no deslocamento à direita ele é dividido por 2.
Como pode ser vista na documentação da MDN linkada acima ainda existem os operadores de xor (ou exclusivo) e de not que é a negação. Lembrando que sempre é feito bit a bit.
Todas estas operações são feitas sempre em números 32 bits.
Um uso muito comum é para acumular flags como demostrado abaixo. Também é usado em manipulações de dados científicos, imagens (principalmente cores) e outras formas de mídia, criptografia, compressão, checksum para comunicação de dados, máquinas de estados, enfim, é só usar a criatividade.
Em geral é considerada programação de baixo nível e inclusive muitas vezes é usado como forma de otimização, apesar que às vezes há abusos. x / 2
é equivalente à z >> 1
e x & 1 == 0
é equivalente à x % 2 == 0
É possível entender em detalhes como o cálculo é feito no artigo da Wikipédia (em inglês).
var flags = 5; // em binário equivale a 0101
var FLAG_A = 1; // 0001
var FLAG_B = 2; // 0010
var FLAG_C = 4; // 0100
var FLAG_D = 8; // 1000
var mask = FLAG_A | FLAG_B | FLAG_D; // 0001 | 0010 | 1000 => 1011
if (flags & FLAG_C) { // 0101 & 0100 => 0100 => true
// faz alguma coisa
}
if ((flags & FLAG_B) || (flags & FLAG_C)) {
// faz alguma coisa
}
var mask = FLAG_B | FLAG_C; // 0010 | 0100 => 0110
if (flags & mask) { // 0101 & 0110 => 0100 => true
// faz alguma coisa
}
var mask = FLAG_C | FLAG_D; // 0100 | 1000 => 1100
flags |= mask; // 0101 | 1100 => 1101
var mask = ~(FLAG_A | FLAG_C); // ~0101 => 1010
flags &= mask; // 1101 & 1010 => 1000
var mask = ~FLAG_A & ~FLAG_C;
flags &= mask; // 1101 & 1010 => 1000
var mask = FLAG_B | FLAG_C;
flags = flags ^ mask; // 1100 ^ 0110 => 1010
Coloquei no GitHub para referência futura.
Exemplos retirados da documentação da MDN.