Javascript forEach
5381 단어 javascript
소개
O Javascript contém diversas estruturas de repetição, e uma delas é o forEach. O forEach é utilizado para percorrer um array, que pode ser um array simples, ou um array de objetos.
배열 단순
O forEach funciona da seguinte maneira, a partir de um array, você usa o forEach, e na prática, ele executará uma função para cada elemento do seu array. Essa função é chamada de função de callback. Vamos ver um 예시:
let array_de_pessoas = ['João', 'Maria', 'José']; array_de_pessoas.forEach((valorAtual, indice, array) => { console.log(`${valorAtual}, ${indice}, ${array}`); //irá imprimir o resultado no console: //João, 0, João,Maria //Maria, 1, João,Maria });
Vamos entender melhor o que acontece nessa função. Naprimeira linha, eu tenho o array de pessoas no qual será percorrido pela função foreach. Na linha 2 eu faço o array de pessoas chamar a função forEach, e depois do primeiro parênteses, é a função que é executada para cada valor do array, a função de callback.
A função de callback pode receber até 3 parametros, e eles não são obrigatórios, caso queira, pode utilizar somente o Primeiro e não passar mais nenhum.
O Primeiro parametro, é o valor atual, esse valor vai ser cada item do array, no nosso exemplo, temos um array com 3 posições, o forEach ele vai executar a função de callback uma vez para cada posição do array Primeira vez que executar, o nosso valor atual conterá o nome do João, na segunda terá Maria, e na terceira José.
O segundo é o índice, todo array, tem um índice, que é utilizado para marcar cada posição do array, e o índice começa semper em 0.
O terceiro é o array propriamente dito, caso você precision, você pode utilizar esse terceiro parametro para realizar algum processamento com esses dados, porém normalmente não é comum precisar desse parametro.
Então dessa forma você pode percorrer todo um array, e manipular os dados desejados, e com esses parametros você pode utilizar melhor sua lógica para resolver determinado problema.
오브제 배열
Os arrays de objetos são muito comuns, e há momentos que precisamos percorrer esses dados, e funciona da mesma maneira do array simples, a única diferença é que em cada posição, que seria o valorAtual, string um objeto literal, e dessa forma você pode acessar cada posição do objeto, por exemplo:
let pessoas = [ { nome: 'Joao', idade: 30 }, { nome: 'Maria', idade: 20 } ]; pessoas.forEach((pessoa, index, array) => { console.log(`O nome é: ${pessoa.nome} e tem a idade ${pessoa.idade}`) //vai aparecer no console //O nome é: João e tem a idade 30 //O nome é: Maria e tem a idade 20 });
break foreach, parando o 루프
Há momentos nos quais você pode querer parar a execução de um loop, por exemplo, você está procurando por um valor dentro de um array, e quando você o acha, você não quer continuar passando pelo loop, preporcis fazer isso com o foreach.
Caso você 정확한 fazer isso, é necessário utilizar o loop for que com ele é possível ter o controle de parada com o break.
Pulando para a próxima posição "계속"
아니요 forEach não é possível dar um continue e pular para a próxima posição do array, mas o que da para fazer, é colocar um return na função, que no caso, quando a função estiver exevocêando em determinado vai parar a execução naquela posição e vai para a próxima, por exemplo:
let pessoas = [ { nome: 'Joao', idade: 30 }, { nome: 'Maria', idade: 20 } ]; pessoas.forEach((pessoa, index, array) => { if(idade > 25){ return; } console.log(`O nome é: ${pessoa.nome} e tem a idade ${pessoa.idade}`) //vai aparecer no console //O nome é: Maria e tem a idade 20 });
Nesse caso, o forEach pulou o João, porque ele tem idade maior que 25, e então o forEach pulou essa posição no array e foi executar a próxima posição.
파라 세이버 메스
Caso você queira ver uma explicação detalhada e com um exemplo prático e real que pode ser utilizado no dia-a-dia, gravei um vídeo que vou deixar aqui abaixo:
https://youtu.be/Q3tiAEvWhOE
결론
O forEach é uma estrutura de repetição, que se bem utilizada, pode ser muito útil. Se estiver precisando percorrer um array para realizar algument processamento e não esperar nenhum retorno, essa é uma opção Ideal para solucionar o seu problema. Espero que tenha gostado, até o próximo post :)
참조:
https://developer.mozilla.org/pt-BR/docs/Web/JavaScript/Reference/Global_Objects/Array/forEach
뉴스 레터
http://programandosolucoes.dev.br/assinar-a-newsletter/
Reference
이 문제에 관하여(Javascript forEach), 우리는 이곳에서 더 많은 자료를 발견하고 링크를 클릭하여 보았다 https://dev.to/vitorceron/javascript-foreach-ea3텍스트를 자유롭게 공유하거나 복사할 수 있습니다.하지만 이 문서의 URL은 참조 URL로 남겨 두십시오.
우수한 개발자 콘텐츠 발견에 전념 (Collection and Share based on the CC Protocol.)