OBJETOS
Array
Arrays
Arrays armazenam uma coleção de elementos. Estes podem ser
strings, arrays, boolean, number, functions, objects e mais.
const instrumentos = ['Guitarra', 'Baixo', 'Violão'];
const precos = [49, 99, 69, 89];
const dados = [new String('Tipo 1'), ['Carro', 'Portas', {cor:
'Azul', preco: 2000}], function andar(nome) { [Link](nome)
}];
dados[2]('Ford');
dados[1][2].cor; // azul
Construção de Arrays
Toda array herda os métodos e propriedades do protótipo do
construtor Array.
const instrumentos = ['Guitarra', 'Baixo', 'Violão'];
const carros = new Array('Corola', 'Mustang', 'Honda');
carros[1] // Mustang
carros[2] = 'Ferrari';
carros[10] = 'Parati';
[Link]; // 11
Os valores das array's não são
estáticos
[Link]()
[Link]() é um método utilizado para transformar array-like
objects, em uma array.
let li = [Link]('li'); // NodeList
li = [Link](li); // Array
const carros = {
0: 'Fiat',
1: 'Honda',
2: 'Ford',
length: 4,
}
const carrosArray = [Link](carros);
[Link]()
Veri ca se o valor passado é uma array e retorna um valor
booleano.
let li = [Link]('li'); // NodeList
[Link](li); // false
li = [Link](li); // Array
[Link](li); // true
[Link](), Array() e new Array()
Veri ca se o valor passado é uma array e retorna um valor
booleano. A palavra chave new não é necessária para utilizar o
construtor Array.
[Link](10); // [10]
[Link](1,2,3,4); // [1,2,3,4]
new Array(5); // [,,,,]
Array(5); // [,,,,]
Array(1,2,3,4); // [1,2,3,4]
Propriedades e Métodos do Prototype
[].length retorna o tamanho da array.
const frutas = ['Banana', 'Pêra', ['Uva Roxa', 'Uva Verde']];
[Link]; // 3
frutas[0].length; // 6
frutas[1].length; // 5
frutas[2].length; // 2
Métodos Modi cadores [].sort()
Os próximos métodos que vamos falar sobre, são métodos
modi cadores (mutator methods). Além de retornarem um valor,
eles modi cam a array original. [].sort() organiza a pelo
unicode.
const instrumentos = ['Guitarra', 'Baixo', 'Violão'];
[Link]();
instrumentos; // ['Baixo', 'Guitarra', Violão]
const idades = [32,21,33,43,1,12,8];
[Link]();
idades; // [1, 12, 21, 32, 33, 43, 8]
[].unshift() e [].push()
[].unshift() adiciona elementos ao início da array e retorna o
length da mesma. [].push() adiciona elementos ao nal da
array e retorna o length da mesma.
const carros = ['Ford', 'Fiat', 'VW'];
[Link]('Honda', 'Kia'); // 5
carros; // ['Honda', 'Kia', 'Ford', 'Fiat', 'VW'];
[Link]('Ferrari'); // 6
carros; // ['Honda', 'Kia', 'Ford', 'Fiat', 'VW', 'Ferrari'];
[].shift() e [].pop()
[].shift() remove o primeiro elemento da array e retorna o
mesmo. [].pop() remove o último elemento da array e retorna o
mesmo.
const carros = ['Ford', 'Fiat', 'VW', 'Honda'];
const primeiroCarro = [Link](); // 'Ford'
carros; // ['Fiat', 'VW', 'Honda'];
const ultimoCarro = [Link](); // 'Honda'
carros; // ['Fiat', 'VW'];
[].reverse()
[].reverse() inverte os itens da array e retorna a nova array.
const carros = ['Ford', 'Fiat', 'VW', 'Honda'];
[Link](); // ['Honda', 'VW', 'Fiat', 'Ford'];
[].splice()
[].splice(index, remover, item1, item2, ...) adiciona
valores na array a partir do index. Remove a quantidade de itens
que for passada no segundo parâmetro (retorna esses itens).
const carros = ['Ford', 'Fiat', 'VW', 'Honda'];
[Link](1, 0, 'Kia', 'Mustang'); // []
carros; // ['Ford', 'Kia', 'Mustang', 'Fiat', 'VW', 'Honda']
[Link](3, 2, 'Ferrari'); // ['Fiat', 'VW']
carros; // ['Ford', 'Kia', 'Mustang', 'Ferrari', 'Honda']
[].copyWithin()
[].copyWithin(alvo, inicio, final) a partir do alvo, ele
irá copiar a array começando do inicio até o nal e vai preencher a
mesma com essa cópia. Caso omita os valores de início e nal, ele
irá utilizar como inicio o 0 e nal o valor total da array.
['Item1', 'Item2', 'Item3', 'Item4'].copyWithin(2, 0, 3);
// ['Item1', 'Item2', 'Item1', 'Item2']
['Item1', 'Item2', 'Item3', 'Item4'].copyWithin(-1);
// ['Item1', 'Item2', 'Item3', 'Item1']
[]. ll()
[].fill(valor, inicio, final) preenche a array com o
valor, do início até o m.
['Item1', 'Item2', 'Item3', 'Item4'].fill('Banana');
// ['Banana', 'Banana', 'Banana', 'Banana']
['Item1', 'Item2', 'Item3', 'Item4'].fill('Banana', 2);
// ['Item1', 'Item2', 'Banana', 'Banana']
['Item1', 'Item2', 'Item3', 'Item4'].fill('Banana', 1, 3);
// ['Item1', 'Banana', 'Banana', 'Item4']
[]. ll()
[].fill(valor, inicio, final) preenche a array com o
valor, do início até o m.
['Item1', 'Item2', 'Item3', 'Item4'].fill('Banana');
// ['Banana', 'Banana', 'Banana', 'Banana']
['Item1', 'Item2', 'Item3', 'Item4'].fill('Banana', 2);
// ['Item1', 'Item2', 'Banana', 'Banana']
['Item1', 'Item2', 'Item3', 'Item4'].fill('Banana', 1, 3);
// ['Item1', 'Banana', 'Banana', 'Item4']
Métodos de Acesso [].concat()
Os métodos abaixo não modi cam a array original, apenas
retornam uma array modi cada. [].concat() irá concatenar a
array com o valor passado.
const transporte1 = ['Barco', 'Aviao'];
const transporte2 = ['Carro', 'Moto'];
const transportes = [Link](transporte2);
// ['Barco', 'Aviao', 'Carro', 'Moto'];
const maisTransportes = [].concat(transporte1, transporte2,
'Van');
// ['Barco', 'Aviao', 'Carro', 'Moto', 'Van'];
[].includes(), [].indexOf() e [].lastIndexOf()
[].includes(valor) veri ca se a array possui o valor e retorna
true ou false. [].indexOf(valor) veri ca se a array possui o
valor e retorna o index do primeiro valor na array. Já o
[].lastIndexOf(valor) retorna o index do último.
const linguagens = ['html', 'css', 'js', 'php', 'python',
'js'];
[Link]('css'); // true
[Link]('ruby'); // false
[Link]('python'); // 4
[Link]('js'); // 2
[Link]('js'); // 5
[].join()
[].join(separador) junta todos os valores da array e retorna
uma string com eles. Se você passar um valor como parâmetro,
este será utilizado durante a junção de cada item da array.
const linguagens = ['html', 'css', 'js', 'php', 'python'];
[Link](); // 'html,css,js,php,python'
[Link](' '); // 'html css js php python'
[Link]('-_-'); // 'html-_-css-_-js-_-php-_-python'
let htmlString = '<h2>Título Principal</h2>'
htmlString = [Link]('h2');
// ['<', '>Título Principal</', '>']
htmlString = [Link]('h1');
// <h1>Título Principal</h1>
[].slice()
[].slice(inicio, final) retorna os itens da array
começando pelo início e indo até o valor de nal.
const linguagens = ['html', 'css', 'js', 'php', 'python'];
[Link](3); // ['php', 'python']
[Link](1, 4); // ['css', 'js', 'php']
const cloneLinguagens = [Link]();
Exercícios
const comidas = ['Pizza', 'Frango', 'Carne', 'Macarrão'];
// Remova o primeiro valor de comidas e coloque em uma variável
// Remova o último valor de comidas e coloque em uma variável
// Adicione 'Arroz' ao final da array
// Adicione 'Peixe' e 'Batata' ao início da array
const estudantes = ['Marcio', 'Brenda', 'Joana', 'Kleber',
'Julia'];
// Arrume os estudantes em ordem alfabética
// Inverta a ordem dos estudantes
// Verifique se Joana faz parte dos estudantes
// Verifique se Juliana faz parte dos estudantes
let html = `<section>
<div>Sobre</div>
<div>Produtos</div>
<div>Contato</div>
</section>`
// Substitua section por ul e div com li,
// utilizando split e join
const carros = ['Ford', 'Fiat', 'VW', 'Honda'];
// Remova o último carro, mas antes de remover
// salve a array original em outra variável
