Chegamos a mais um post da minha saga de estudos em JavaScript.
No post de hoje irei falar sobre Array.
Este tipo de dado é usado para armazenar uma lista de valores, que geralmente tem uma relação entre si. Como por exemplo, uma lista de strings, numbers, entre outros valores.
A anotação de um array se da por meio da utilização de colchetes [], devendo separar os itens por meio de vírgulas ,.
Array de strings:
const heroes = ['Batman', 'Superman', 'Iron Man']
console.log(heroes) // Array(3) [ "Batman", "Superman", "Iron Man" ]
Array de Numbers:
const ages = [31, 25, 39, 40, 25]
console.log(ages) // Array(5) [31, 25, 39, 40, 25]
Existe também a possibilidade de termos mais de um tipo de dados dentro do mesmo array, não é muito comum, mas é perfeitamente possível.
const randomArray = ['Fernando', 35, true, 'Juliana']
console.log(randomArray) // Array(4) ['Fernando', 35, true, 'Juliana']
Acessando os itens do array
Para acessarmos os itens dentro do array, devemos utilizar a anotação de colchetes [], passando o index do item.
const heroes = ['Batman', 'Superman', 'Iron Man']
console.log(heroes[1]) // Superman
console.log(heroes[0]) // Batman
console.log(heroes[2]) // Iron Man
Atribuindo novo valor a item de um array
É possível reatribuir o valor de um item presente em um array, também buscando o item pelo índice, usando a anotação de colchetes [].
const heroes = ['Batman', 'Superman', 'Iron Man']
heroes[0] = 'Spiderman'
console.log(heroes) // Array(3) ['Spiderman', 'Superman', 'Iron Man']
Propriedades e Métodos
Length
A propriedade length é usada para retornar o número de itens presentes no array.
const heroes = ['Batman', 'Superman', 'Iron Man']
console.log(heroes.length) // 3
Join
O método join() irá retornar uma string com todos os elementos do array concatenados e separados por vírgula ,.
const heroes = ['Batman', 'Superman', 'Iron Man']
const joinHeroes = heroes.join()
console.log(joinHeroes) // Batman,Superman,Iron Man
O método join(), pode receber um argumento opcional, esse argumento é o separador.
const heroes = ['Batman', 'Superman', 'Iron Man']
const joinHeroesPipe = heroes.join('|')
console.log(joinHeroesPipe) // Batman|Superman|Iron Man
const joinHeroesHifen = heroes.join('-')
console.log(joinHeroesHifen) // Batman-Superman-Iron Man
const joinHeroesHifenWithSpace = heroes.join(' - ')
console.log(joinHeroesHifenWithSpace) // Batman - Superman - Iron Man
IndexOf
O método indexOf(), tem o mesmo comportamento quando utilizado em strings, ele irá retornar a primeira ocorrência do valor passado por argumento.
const ages = [30, 25, 40, 50, 70, 25]
const indexOf25 = ages.indexOf(25)
console.log(indexOf25) // 1
Caso o valor passado por argumento não seja encontrado no array, o indexOf() irá retornar sempre -1.
const ages = [30, 25, 40, 50, 70, 25]
const indexOf100 = ages.indexOf(100)
console.log(indexOf100) // -1
Concat
O método concat(), serve para juntar, concatenar dois arrays.
Vale ressaltar que o método concat não modifica o array original.
const maleDogs = ['Zeca', 'Thor']
const femaleDogs = ['Nina', 'Mel']
const allDogs = maleDogs.concat(femaleDogs)
console.log(allDogs) // (4) ["Zeca", "Thor", "Nina", "Mel"]
Push
O método push(), irá adicionar os itens passados como argumento ao final do array.
Além de adicionar os itens ao final do array, ele retorna o número de itens dentro do array.
Com isso, fica claro que este método modifica o array original.
const heroes = ['Batman', 'Spiderman', 'Iron Man']
const anotherHeroes = heroes.push('Catwoman', 'Superman') // 5
console.log(heroes) // (5) ["Batman", "Spiderman", "Iron Man", "Catwoman", "Superman"]
Pop
O método pop(), irá retirar o último item do array e irá retorna-lo no console.
Assim como o método push(), o método pop() também modifica o array original.
const heroes = ['Batman', 'Spiderman', 'Iron Man']
heroes.pop() // Iron Man
console.log(heroes) // (2) ["Batman", "Spiderman"]
Para se aprofundar ainda mais nos arrays.
Esse foi mais um post da minha saga de estudos em JavaScript Vanilla. Espero que estejam gostando!
Qualquer dúvida ou sugestão, vocês me encontram nas minhas redes sociais:
Top comments (0)