Operador de vírgula JavaScript

Resumo : neste tutorial, você aprenderá sobre o operador vírgula JavaScript e seu uso.

Introdução ao operador vírgula JavaScript

JavaScript usa uma vírgula ( ,) para representar o operador vírgula. Um operador vírgula pega duas expressões, avalia-as da esquerda para a direita e retorna o valor da expressão certa.

Aqui está a sintaxe do operador vírgula:

leftExpression, rightExpression

Por exemplo:

let result = (10, 10 + 20);
console.log(result);Linguagem de código:  JavaScript  ( javascript )

Saída:

30

Neste exemplo, 10, 10+20 retorna o valor da expressão correta, que é 10+20. Portanto, o valor do resultado é 30.

Veja o exemplo a seguir:

let x = 10;
let y = (x++, x + 1);

console.log(x, y);Linguagem de código:  JavaScript  ( javascript )

Saída:

11 12

Neste exemplo, aumentamos o valor de xem um ( x++), adicionamos um a x( x+1) e atribuímos xa y. Portanto, xis 11e yis 12após a declaração.

Entretanto, para tornar o código mais explícito, você pode usar duas instruções em vez de uma instrução com um operador de vírgula como este:

let x = 10;
x++;
let y = x + 1;

console.log(x, y);Linguagem de código:  JavaScript  ( javascript )

Este código é mais explícito.

Na prática, você pode querer usar o operador vírgula dentro de um forloop para atualizar múltiplas variáveis ​​a cada vez que passa pelo loop.

O exemplo a seguir usa o operador vírgula em um loop for para exibir uma matriz de nove elementos como uma matriz de 3 linhas e três colunas:

let board = [1, 2, 3, 4, 5, 6, 7, 8, 9];

let s = '';
for (let i = 0, j = 1; i < board.length; i++, j++) {
  s += board[i] + ' ';
  if (j % 3 == 0) {
    console.log(s);
    s = '';
  }
}Linguagem de código:  JavaScript  ( javascript )

Saída:

1 2 3
4 5 6
7 8 9

Como funciona.

• Inicialize a placa:
  • O código começa definindo um array chamado boardcom valores de 1 a 9. Este array representa um quadro ou grade simples.
• Percorrer o quadro:
  • O código então inicializa uma string vazia se entra em um forloop.
  • Dentro do loop, duas variáveis ​​são declaradas: ie j. ié usado para iterar sobre os elementos da boardmatriz e jé um contador que aumenta a cada iteração.
• Construindo uma String:
  • Dentro do loop, cada elemento da boardmatriz é anexado à string sseguida por um espaço.
• Verifique cada terceiro elemento:
  • Depois de anexar um elemento à string, o código verifica se j(o contador) é divisível igualmente por 3 usando o operador de módulo ( %). Esta condição ( j % 3 == 0) verifica se a iteração atual é o terceiro elemento.
• Imprimir e redefinir:
  • Se a condição for verdadeira (ou seja, é o terceiro elemento), a string atual sserá impressa no console usando console.log(s). Isso efetivamente imprime uma linha de três elementos do arquivo board.
  • A string sé então redefinida para uma string vazia para a próxima linha.
• O ciclo continua:
  • O loop continua até que todos os elementos do boardarray tenham sido processados.
• Saída:
  • A saída final é uma série de linhas, cada uma contendo três elementos do boardarray.

Resumo

• Um operador vírgula pega duas expressões, avalia-as da esquerda para a direita e retorna o valor da expressão certa.
• Use o operador vírgula ( ,) dentro de um forloop para atualizar múltiplas variáveis ​​uma vez.
• Use duas instruções em vez do operador vírgula em outros lugares para tornar o código mais explícito e fácil de entender.