Aninhamento de loops e condicionais
Quando usamos loops dentro de loops e condicionais dentro de condicionais, isto é chamado de aninhamento (nesting). Vamos ver abaixo dois exemplos.
Aninhamento de Condicionais
Digamos que um formulário receba duas informações sobre uma pessoa: a idade e se ela é ou não sócia de um clube. Baseado nestas informações, temos que apresentar o preço de um evento para este perfil. Temos 4 faixas de preço:
Vamos primeiro abrir um condicional para testar se é sócio ou a idade é superior a 65 anos, se o teste retornar positivo, o ingresso é grátis. Senão, chegamos à situação de não sócios menores de 65 anos. Mas dentro desta condição ainda temos preços diferentes para maiores e menores de 18 anos, portanto teremos que aninhar um condicional.
var socio = false;
var idade = 25;
if (socio == true || idade >= 65) {
console.log('O ingresso é grátis');
} else {
if (idade < 18) {
console.log('O ingresso custa: R$ 6,00');
} else {
console.log('O ingresso custa: R$ 12,00');
}
}
// O console mostrará 'O ingresso custa: R$ 12,00'
Aninhamento de Loops
Muitas vezes é comum ter que usar loops aninhados. Quando queremos percorrer os elementos de um array ou de um objeto, usamos um loop. Mas caso algum elemento deste array/objeto seja também um array ou objeto, teremos que aninhar outro loop para percorrer seus elementos.
Como exemplo, temos uma lista de funcionários. Cada funcionário é um objeto com algumas propriedades. Uma destas propriedades é a lista de filhos. Para criar uma lista de filhos de funcionários, precisamos aninhar dois loops:
<p>
Lista de filhos dos funcionários:
<ul id="filhos">
</ul>
</p>
var funcionarios = [
{
'nome': 'Carlos Henrique da Silva',
'idade': 45,
'filhos': ['Mariana Alves da Silva', 'Fernanda Alves da Silva']
},
{
'nome': 'Maria Helena Pereira',
'idade': 32,
'filhos': ['João Pedro Pereira de Souza']
},
{
'nome': 'José Feliciano Maia',
'idade': 39,
'filhos': ['Felipe Ferreira Maia', 'Fábio Ferreira Maia', 'João Ferreira Maia']
}
];
var list_element = document.getElementById("filhos");
for (var a = 0 ; a < funcionarios.length ; a++) {
if (funcionarios[a].filhos) {
var lista_filhos = funcionarios[a].filhos;
for (var b = 0 ; b < lista_filhos.length ; b++) {
list_element.innerHTML += '<li>' + lista_filhos[b] + ' - Filho(a) de ' + funcionarios[a].nome + '</li>';
}
}
}
Lista de filhos dos funcionários:
- Solte os nomes aqui