Sei que já foi resolvido (e provavelmente quase ninguém vai ler, pois o site só dá destaque para os posts criados recentemente, e respostas dadas em tópicos antigos ficam "enterradas"), mas enfim, se a ideia é simplificar, então não precisa de map
e nem reduce
. Um único for
simples já resolve:
const data = [
{ "id": 2, "nomeUsuario": "Roberto", "senhaUsuario": 55555 },
{ "id": 3, "nomeUsuario": "Gabriel", "senhaUsuario": 546165 },
{ "id": 4, "nomeUsuario": "Roh", "senhaUsuario": 6465 },
{ "id": 5, "nomeUsuario": "Robertoo", "senhaUsuario": 645572 }
];
var ids = [], names = [], passwords = [];
for (const item of data) {
ids.push(item.id);
names.push(item.nomeUsuario);
passwords.push(item.senhaUsuario);
}
console.log(ids, names, passwords);
Também mudei os nomes dos arrays para ids
, names
e passwords
(no plural). Afinal, o primeiro contém vários id's, o segundo, vários nomes, e o terceiro, várias senhas. Pode parecer um detalhe besta, mas dar nomes melhores ajuda na hora de programar.
Se quiser um único objeto contendo os 3 arrays, basta mudar para:
const data = [
{ "id": 2, "nomeUsuario": "Roberto", "senhaUsuario": 55555 },
{ "id": 3, "nomeUsuario": "Gabriel", "senhaUsuario": 546165 },
{ "id": 4, "nomeUsuario": "Roh", "senhaUsuario": 6465 },
{ "id": 5, "nomeUsuario": "Robertoo", "senhaUsuario": 645572 }
];
var result = { ids: [], names: [], passwords: [] };
for (const item of data) {
result.ids.push(item.id);
result.names.push(item.nomeUsuario);
result.passwords.push(item.senhaUsuario);
}
console.log(result);
E claro, também tem o for
"tradicional":
var ids = [], names = [], passwords = [];
for (var i = 0; i < data.length; i++) {
ids.push(data[i].id);
names.push(data[i].nomeUsuario);
passwords.push(data[i].senhaUsuario);
}
Pronto. Usar map
, como já explicaram, não é uma boa nesse caso porque cada chamada percorre o array, então você estará percorrendo o mesmo array 3 vezes sem necessidade (sim, o map
tem um for
implícito, ou "escondido").
Já reduce
, apesar de só percorrer uma vez (também tem um for
implícito), faz várias chamadas de função (sim, o (acc, el) => { etc
é uma função que é chamada para cada elemento do array). E chamar funções têm o seu custo. Tudo bem que para poucos arrays pequenos, a diferença será insignificante, mas para muitos arrays grandes, pode começar a fazer diferença (veja neste teste como reduce
e map
são bem mais lentos - embora para arrays pequenos nem sempre é verdade, para arrays grandes é uma boa diferença). Também fiz testes na minha máquina usando o Benchmark.js e os resultados foram similares.
Não estou criticando map
e reduce
, somente alertando que nem sempre a solução "com menos código", ou "funcional", ou seja lá o que for, é necessariamente a "melhor". É preciso conhecer as opções e saber avaliar quando uma pode ser melhor que outra (por exemplo, se vc já tivesse as funções prontas, poderia compensar chamar reduce
, ou se o framework "obriga" a usar esses métodos, aí não tem escolha, etc)