Nesta postagem, aprenderemos sobre métodos de array Javascript comumente usados que usam função de iteração e retorno de chamada para arquivar sua funcionalidade.
iteração refere-se à execução repetida de um conjunto de instruções ou blocos de código, o que nos permite realizar a mesma operação várias vezes.
Em termos simples, um retorno de chamada é uma definição de função passada como argumento para outra função.
Para manter as coisas simples, vamos nos concentrar nesses três pontos.
Antes de prosseguirmos, vamos entender como esses métodos de array são estruturados.
// Método Array(callback(a condição que queremos executar em cada item em nosso array))
Cada um desses métodos de array é uma função que recebe um retorno de chamada como argumento, é nesse retorno de chamada que especificamos as condições que queremos executar em cada item do nosso array.
Usaremos esse array de objetos em nossos exemplos.
`const dados = [
{
"userId": 1,
"nome de usuário": "Francisco",
"message": "Ei, como vai?",
"carimbo de data/hora": "2024-02-18T12:30:00Z",
"status": "on-line",
"mensagemEnviada": 28,
"função": "usuário",
"senha": "293087O7764"
},
{
"userId": 2,
"nome de usuário": "Moisés",
"message": "Nada mal, apenas trabalhando em um projeto.",
"carimbo de data/hora": "2024-02-18T12:35:00Z",
"status": "ausente",
"mensagemEnviada": 74,
"função": "usuário",
"senha": "675147O2234"
},
{
"userId": 3,
"nome de usuário": "Vicky",
"message": "Ei pessoal! Quais são as últimas fofocas?",
"carimbo de data/hora": "2024-02-18T12:40:00Z",
"status": "on-line",
"mensagemEnviada": 271,
"papel": "moderador",
"senha": "76352O8069"
},
{
"userId": 4,
"nome de usuário": "Júnior",
"message": "Não muito, apenas relaxando. E você?",
"carimbo de data/hora": "2024-02-18T12:45:00Z",
"status": "off-line",
"mensagemEnviada": 125,
"função": "administrador",
"senha": "21876O3483"
}
]`
forEach: forEach é usado quando queremos executar uma condição em todos os itens do nosso array. forEach retorna indefinido.
função getMessageSent(usuários){
deixe sumMessageSent = 0;
usuários.forEach(função(usuário){
sumMessageSent = user.messageSent;
})
return sumMessageSent;
}
getMessageSent(dados) // saída: 498
reduce: reduzir é usado para reduzir uma matriz a um único valor, por exemplo, esta matriz [8, 7, 3] pode ser reduzida ao número 18. um redutor retorna um único valor.
A função redutor recebe dois parâmetros, primeiro o redutor (que é feito do total e do atual) e segundo o valor inicial
O total: é popularmente chamado de acumulador. o total, como eu chamo, é o último valor computado da função redutora.
O atual refere-se a um único item da matriz. no nosso caso temos quatro itens (atual).
O InitialValue é o valor que atribuímos ao total na primeira chamada. simplesmente diga que initalValue é o valor padrão do total
const getMessageSent = (usuários) => {
retornar usuários.reduce((total, atual) => total = current.messageSent, 0)
}
getMessageSent(dados) // saída: 498
filter: Array.filter é usado quando queremos coletar apenas itens no array que atendam a uma condição específica. array.filter retorna um array.
const onlineUsers = (usuários) => {
retornar usuários.filter(usuário => usuário.status === "online")
}
onlineUsers(data) // saída: [objeto objeto]
find Array.find é usado quando queremos obter apenas o primeiro item do array que atenda à condição definida dentro do retorno de chamada. array.find retorna o primeiro item NÃO em um array, mas no formato do item, em nosso caso será um objeto ou indefinido se nenhuma correspondência for encontrada.
const getUserRole = (usuários) => {
retornar usuários.find(usuário => usuário.role === "usuário")
}
getUserRole(data) // saída: {userId: 1, nome de usuário: 'Francis', mensagem: "Ei, como vai?", timestamp: '2024-02-18T12:30:00Z', status: ' on-line', …}
Observe como apenas o primeiro usuário que atendeu à condição foi retornado.
map Array.map é usado quando queremos transformar os itens do array. array.map retorna uma matriz de itens transformados que satisfazem a condição em nosso retorno de chamada.
const getUserNameAndPass = (usuários) => {
retornar usuários.map((usuário) => {
const userPassCode = user.passCode.slice(-4);
return${usuário.nomedeusuário} ${userPassCode.padStart(
usuário.passCode.length,
"★"
)};
});
};
getUserNameAndPass(data)// saída:['Francis ★★★★★★★7764', 'Moses ★★★★★★★2234', 'Vicky ★★★★★★8069', 'Junior ★ ★★★★★3483']
every array.every é usado quando queremos verificar se todos os itens do array passaram em nossa condição definida. array.every retorna um booleano. verdadeiro se todos os itens passarem na condição e falso se algum dos itens falhar na condição.
const isOnline = data.every(user => dataItem.status === 'online')
console.log(isOnline) // saída:false
Some array.some é usado quando queremos verificar se alguns dos itens do array passam em uma determinada condição. array.some retorna um booleano. verdadeiro se alguns dos itens passaram na condição e falso se todos os itens foram aprovados ou reprovados.
const isOnline = data.every(user => dataItem.status === 'online')
console.log(isOnline) // saída: verdadeiro
Esses são alguns dos métodos de array amplamente usados.
Isenção de responsabilidade: Todos os recursos fornecidos são parcialmente provenientes da Internet. Se houver qualquer violação de seus direitos autorais ou outros direitos e interesses, explique os motivos detalhados e forneça prova de direitos autorais ou direitos e interesses e envie-a para o e-mail: [email protected]. Nós cuidaremos disso para você o mais rápido possível.
Copyright© 2022 湘ICP备2022001581号-3