-
2.1 Propriedades
2.2 Métodos
-
Arrays Parte 2 Explorando os Elementos da Array
4.1 Conhecendo Quantos Elementos Tem na Array
let array = [
'equipamento',
'móvel',
'ferramenta'
]
let objeto = {
equipamento: 'computador',
móvel: 'mesa',
ferramenta: 'alicate'
}
Arrays armazenam elementos. Objetos armazenam conjuntos chave-valor. [Arrays usam colchetes]. {Objetos usam chaves}.
Antes de entrar na conversa sobre arrays e objetos, é necessário conhecer algumas ferramentas usadas em tipos primitivos que servem para descrevê-los, mas que também são muito úteis na manipulação de arrays e objetos.
Guarde no coração: Todos os valores JS possuem propriedades, sejam strings, números, arrays, objetos... exceto null e undefined.
As propriedades são as características de algum valor. Por exemplo, quando escrevemos:
let computador = "computador"
console.log(computador.length)
ou
console.log(computador['length'])
estamos querendo saber qual o tamanho da string "computador", que foi guardada na variável computador
. O retorno no console, então, será 10
, pois computador tem 10 letras.
Ou seja:
- computador .length: propriedade do tipo primitivo string "computador".
Já os métodos sempre fazem alguma coisa. Seja colocar uma string em maiúsculo, retirar o último item de uma lista (array) ou filtrar um conjunto de informações (objetos). Existe sempre uma ação envolvida.
Array é uma lista de elementos. Cada elemento possui o seu índice, que é a posição que ele ocupa na array. Veja o exemplo:
let minhaPrimeiraMatriz = ['doce', 'salgado', 'amargo']
- doce, salgado e amargo são os elementos da array;
- 0, 1 e 2 são os índices (e não 1, 2 e 3 como poderíamos imaginar, pois o primeiro índice da array é sempre 0).
Como vimos, as arrays têm elementos e índices. Então assim fica a estrutura:
[ elemento1 , elemento2, elemento3, ...]
É importante destacar que, em JavaScript, as arrays aceitam qualquer tipo de elemento - números, strings, conjuntos chave-valor (objetos), etc. Dessa forma, a array deixa aquele formato mais simples que vimos no último tópico.
Veja um exemplo de array mais variada:
let arrayVariada = [
"mariana",
29,
["Recife", "Jaboatao", "São paulo"],
{curso: "backend", instituicao: "reprograma"}
]
É possível fazer isso apenas escrevendo os itens no seu VSCode usando a estrutura vista anteriormente. A outra forma é "empurrando" cada elemento dentro de cada índice.
Olhe esse exemplo para entender melhor do que estamos falando:
const novaArray = []
novaArray[0] = "banana"
novaArray[1] = "geleia"
novaArray[2] = true
- Declaramos uma constante novaArray, que é uma array vazia;
- Adicionamos banana no índice 0;
- geleia no índice 1;
- true no índice 2.
// novaArray = ['banana', 'geleia', true]
Além de adicionar item numa array vazia, é possível adicionar também numa array já existente ou editar os elementos que já estão lá. É só atribuir valor àquele índice. Exemplo:
const novaArray = ["banana", "geleia", true]
novaArray[0] = "maçã"
novaArray[3] = "marília"
novaArray[20] = "recife"
// novaArray = ["maçã", "geleia", true, "marília", <16 empty itens>, "recife"]
Ou seja: Se usar um índice que já está preenchido na array, ele será substituído. Se usar um que ainda não tem na array, ele será incluído.
const papelaria = ['lápis', 'borracha', 'caneta']
console.log(papelaria.length)
// 3
Tenha a array e referencie seu índice. Será mostrado o que está guardado naquele índice.
const papelaria = ['lápis', 'borracha', 'caneta']
console.log(papelaria[2])
// 'caneta'
"índice 2 de papelaria" ou "papelaria índice 2"
const nome = "mariana"
console.log(nome[95-93])
// "r"
Afinal string é uma array de caracteres!
É possível imprimir na tela todos os itens da array em linhas separadas, índice por índice, com a ajuda do for:
// Declarando a Array
const tarefas = ["Estudar", "Assistir vídeo", "Pesquisar Cursos"]
//Função
function imprimeTarefas(arr){
for (i = 0; i < arr.length; i++){
console.log(`índice: ${i} - tarefa: ${arr[i]}`)
}
}
//Chamando a função
imprimeTarefas(tarefas)
Lembra que falamos lá no começo dos métodos? O que são os métodos? São formas de fazer coisas dentro de um array. Métodos sempre envolvem uma ação que vai mudar alguma coisa.
Os métodos e suas descrições está nesta planilha ainda em construção e os exemplos dos usos está neste repositório com os nomes metodo-NOMEDOMÉTODO-exercicios.js.
Não se preocupe: métodos são coisas para se aprender à parte, dedicando vários dias e fazendo bastante exercício e merece um repositório só para eles, mas aqui vai um resuminho sobre os principais métodos e o que eles podem fazer por nós:
- Para agregar ou retirar elementos: push, pop, shift, unshift, slice, splice e concat.
- Para buscar elementos dentro da array: indexOf, lastIndexOf, includes, find, findIndex e filter.
- Para transformar arrays: map, reduce, sort, reverse, split e join.
Site com todos os métodos: https://developer.mozilla.org/pt-BR/docs/Web/JavaScript/Reference/Global_Objects/Array
Os objetos são conjuntos de chave-valor. Exemplo:
const pessoa1 = {
fname: 'Mariana', // conjunto chave-valor
age: '29',
lname: 'Souza',
cities: ['Recife', 'Jaboatao', 'Sao Paulo'],
}
const pessoa1 = {
fname: 'Mariana', // conjunto chave-valor
age: '29',
lname: 'Souza',
cities: ['Recife', 'Jaboatao', 'Sao Paulo'],
}
pessoa1.cor = 'lilás'
console.log(pessoa1)
// {
// fname: 'Mariana',
// [...]
// cities: [ 'Recife', 'Jaboatao', 'Sao Paulo' ],
//cor: 'lilás'
//}
function criaObjeto (valor1, valor2) {
let objeto = { // É preciso nomear esse "objeto". Pode ser "aluna", "pessoa"...
nome: valor1,
sobrenome: valor2,
}
return objeto
}
console.log(criaObjeto("Mariana", "Vieira"))
Ou se os nomes que aparecem também são os nomes dos parametros:
function criaObjeto(nome, idade){
let objeto = {
nome,
idade,
}
return objeto
}
console.log(criaObjeto("Mariana", 29))
Existem duas formas de saber qual o valor está dentro de cada chave de um objeto.
sintaxe: nomeDoObjeto.aChaveQueVocêQuer
console.log(`O nome da pessoa no objeto é ${pessoa1.fname}`)
É possível colocar vários pontos, caso o objeto tenha mais e mais objetos dentro dele. Exemplo:
const televisao = {
emissora: "globo",
sedes: {
atuacao: "Rio de Janeiro",
jornalismo: {
jornalismo1: "Amazonas",
jornalismo2: {
subsede1: "Recife",
subsede2: "Caruaru",
}
}
}
}
console.log(televisao.sedes.jornalismo.jornalismo2.subsede2) // Terminal: Caruaru
sintaxe: nomeDoObjeto*['aChaveQueVocêQuer']['indiceDoQueVocêQuer']*
Esse caso é melhor que o de cima, pois permite variáveis! Isso pode trazer muitas opções!
//nome do objeto['aChaveQueVocêQuer']['indiceDoQueVocêQuer']
console.log(`Uma das cidades que a ${pessoa1['fname']} esteve é ${pessoa1['cities'][2]}`)
:
Para localizar informações de um objeto, podemos fazer isso de duas formas. Afinal, essa é a função dos objetos: permitir que as informações sejam guardadas, acessadas e disponibilizadas.
Lembra que em array usamos o índice para achar algo? Em objetos, usamos uma string chamada chave.
É bem parecido com empurrar na array, só que um pouquinho mais simples!
const pessoa2 = {}
console.log(pessoa2) // terminal: {}
pessoa2['name'] = "Leonardo"
pessoa2['age'] = 35
pessoa2['lname'] = "Vieira"
console.log(pessoa2) // terminal: { name: 'Leonardo', age: 35, lname: 'Vieira' }
Ou seja, as chaves são uma grande tela em branco em que podemos colocar qualquer informação, desde que sigamos a sintaxe certa, que é nomeDoObjeto['chave']=valor: a chave nome que o objeto pessoa2 recebeu foi o valor Leonardo.
O map pega um objeto e retorna um outro objeto novinho, mas com as características que você pediu. Vamos começar com um exemplo mais simples, com uma array.
let arrayBase = [1, 10, 100] // terminal: [1, 10, 100]
let arrayNova = arrayBase.map(parametro => 2*parametro) // terminal: [2, 20, 200]
//arraynova = arraybase .map (como era na antiga => como quero que fique na nova)
O map é uma forma mais rápida e elegante de fazer isso:
let arrayBase = [1, 10, 100]
let arrayNova = []
for (i = 0; i < arrayBase.length; i++){
arrayNova.push(arrayBase[i]*2)
}
console.log(arrayNova)
Entendeu o que aconteceu? O Map, com a ajuda da função entre parênteses, transformou cada elemento da array antiga nele mesmo multiplicado por 2 e criou uma array nova.
const objeto = {
nome: 'Mariana',
sobrenome: 'Vieira',
contatos: {
pessoa1: "Iasmin",
pessoa2: "Leonardo",
}
}
const objetoNovo = objeto.map(objeto => objeto.pessoa2)
let objeto = {
nome: 'renata',
idade: 30,
}
objeto['Cidade'] = 'Recife' // Adicionei mais uma propriedade (mais uma chave-valor) no objeto.
console.log(objeto)
// { Nome: 'Renata', Idade: 30, Cidade: 'Recife' }
Importante: Strings, numbers e booleans não são objetos. Sendo assim, não podemos atribuir propriedades a strings, numbers e booleans como fizemos no tópico passado com os objetos. Exemplo:
let pessoa = "Mariana"
pessoa.idade = 29
// Tentando atribuir a idade para a string pessoa "Mariana"
console.log(pessoa.idade)
// undefined
console.log(pessoa)
// "Mariana". Nada foi acrescentado à string.
Mas, ainda assim, é possível "jogar" nas strings, numbers e booleans algumas propriedades, métodos e funções nativas que nos retornam valores como o tamanho da string, a string toda escrita em maiúsculo, o boolean (a resposta) se a entrada é um "não-número"... Exemplos:
// length: propriedade
// (associação entre chave e valor)
let nome = 'Mariana'
console.log("Essa propriedade retorna o tamanho da string: " + nome.length) // 7
// toUpperCase: método
// (função que trabalha com string e recebe parâmetro)
console.log("Maiúsculo " + nome.toUpperCase(nome))
// push: método
[X] EXCLUSIVO DE OBJETOS [X]
// indexOf: método
let string = "Mariana"
console.log(string.indexOf("i"))
// isNan: função (função que trabalha com número)
let numero = 5848545
console.log('Essa propriedade retorna se a entrada é um "não-número" [' + isNaN(numero) + "]")
// false
Saiba o que tem guardado dentro de cada variável.
Uma comparação sempre retorna "true" ou "false":
Saiba o que tem guardado dentro de cada variável
console.log(índice: ${i} - tarefa: ${arr[i]}
)