Aula 19 Array. Desenvolvimento Web I Prof. Filipe Arantes Fernandes

(1)

(2)

Array

• Array é um objeto destinado a armazenar uma coleção ordenada de dados

indexado;

• Por padrão, os índices são números ordenados de forma crescente e inicia

com 0.

• Sintaxe 1:

var nomeVariavel = new Array(); //declara um array

nomeVariavel[índice0] = valor; //seta um valor ao índice 0 nomeVariavel[índice1] = valor; //seta um valor ao índice 1 ...

(3)

Array

• Sintaxe 2:

var nomeVariavel = new Array(valor1, valor2, ... , valorN);

(4)

Array

• Para manipular um array, basta chamar pelo índice;

• Sintaxe:

nomeVariavel[índice];

• Exemplo:

var meuArray = new Array(“Pão”,”Bolo”);

(5)

Array e objetos

• Arrays podem conter dados do tipo objeto;

• Exemplo:

var

meuArray =

new

Array(“casa”,”rio”, {x:14, y:”mar”} );

//lendo um objeto no array (1)

console.log( meuArray[2].x );

//retorna o número 14

(6)

Array associativo

• Um array associativo é um array que contém nomes nos índices, ao

invés de números;

• Exemplo:

var jose = new Array(); jose[“nome”] = “José”;

(7)

Array aninhado

• São array contidos em outros arrays;

• Exemplo:

var arr = new Array( new Array(0,1,2) , new Array("a","b","c") );

var arr = [ [0,1,2] , ["a","b","c"] ]; for (var i=0; i<arr.length; i++) {

for (var j=0; j<arr[i].length; j++) { console.log(arr[i][j]);

(8)

Array aninhado

• São array contidos em outros arrays;

• Exemplo:

for (var j=0; j<arr[i].length; j++) { console.log(arr[i][j]); } } 8

Duas formas

diferentes de criar

arrays aninhados

(9)

Array aninhado

• São array contidos em outros arrays;

• Exemplo:

for (var j=0; j<arr[i].length; j++) { console.log(arr[i][j]); }

1

2

3 a

b

(10)

Exercício

• Crie um array de 0 a 4 e mostre seus valores usando um

(11)

Resposta 1

var notas = [10,9,8,7,9];

var i = 0;

while ( i <= 4 ) {

(12)

Resposta 2

var notas = [10,9,8,7,9]; var i = 0; do { console.log( notas[i] ); i++; } while( i<=4 );

(13)

Resposta 3

var notas = [10,9,8,7,9];

for ( var i = 0; i <= 4; i++ ) { console.log( notas[i] ); }

(14)

Resposta 4

var notas = [10,9,8,7,9]; for ( var i in notas ) {

console.log( notas[i] ); }

(15)

Resposta 5 (a propriedade length)

var notas = [10,9,8,7,9];

for ( var i = 0; i <= notas.length; i++ ) { console.log( notas[i] );

(16)

Resposta 5 (a propriedade length)

var notas = [10,9,8,7,9];

for ( var i = 0; i <= notas.length; i++ ) { console.log( notas[i] ); }

10

9

8

7

9 undefined

(17)

Resposta 5 (a propriedade length)

var notas = [10,9,8,7,9];

for ( var i = 0; i < notas.length; i++ ) { console.log( notas[i] );

(18)

Resposta 5 (a propriedade length)

var notas = [10,9,8,7,9];

for ( var i = 0; i < notas.length; i++ ) { console.log( notas[i] ); }

10

9

8

7

9

(19)

(20)

concat()

• Acrescenta os elementos definidos como argumentos;

• Exemplo:

var a0 = [1, 2];

(21)

every()

• Este método destina-se percorrer cada um dos elementos de um

array e executar uma função callback;

• Retorna true se todos os elementos satisfaçam uma condição e false

caso não satisfaçam a condição.

(22)

every()

• Exemplo 1:

var a0 = [1,2];

function funcaoVerifica (elem, ind, obj) { return ( typeof elem == "number" ) ; }

var x = a0.every( funcaoVerifica ); console.log( x ); //retorna true

(23)

every()

• Exemplo 2:

var a0 = [1,2,”a”];

var x = a0.every( function (e, i, o) { return ( typeof e == "number" ) ; });

(24)

filter()

• Destina-se a filtrar elementos de um array e retornar o array após

aplicação do filtro.

• Exemplo:

var a0 = [1,2,3,4,5,6,7,8,9,10];

function filtrarArray ( elem, ind, obj ) { return ( elem >= 5 );

}

(25)

forEach()

• Destina-se percorrer cada um dos elementos de um array e executar

uma função callback.

• Exemplo 1:

var a0 = [21,67,462,35];

function parser ( valor, indice, objeto) { console.log( indice + " : " + valor ); }

(26)

forEach()

• Destina-se percorrer cada um dos elementos de um array e executar

uma função callback.

• Exemplo 1:

var a0 = [21,67,462,35];

function parser ( valor, indice, objeto) { console.log( indice + " : " + valor ); } a0.forEach( parser );

0 : 21

1 : 67

2 : 462

3 : 35

(27)

forEach()

• Exemplo 2:

var a0 = [21,67,462,35];

function parser ( valor, indice, objeto) { console.log( indice + " : " + valor ); }

(28)

forEach()

• Exemplo 2:

var a0 = [21,67,462,35];

function parser ( valor, indice, objeto) { console.log( indice + " : " + valor ); } a0.forEach( parser );

0 : 21

1 : 67

2 : 462

3 : 35

(29)

forEach()

• Exemplo 3:

var a0 = [21,67,462,35];

function parser ( valor ) { console.log( valor ); }

(30)

forEach()

• Exemplo 3:

var a0 = [21,67,462,35];

function parser ( valor ) { console.log( valor ); } a0.forEach( parser );

21

67

462

35

(31)

indexOf()

• Retorna o índice do primeiro elemento encontrado de um array;

• Exemplo 1:

var a0 = [1,2,"a","b","1","2",1,2,3,4,5,6]; console.log( a0.indexOf(2) ); //Retorna 1

(32)

indexOf()

• Exemplo 2:

var a0 = [1,2,"a","b","1","2",1,2,3,4,5,6]; console.log( a0.indexOf(2, 5) ); //Retorna 7

(33)

indexOf()

• Exemplo 2:

var a0 = [1,2,"a","b","1","2",1,2,3,4,5,6]; console.log( a0.indexOf(2, 5) ); //Retorna 7

(34)

lastIndexOf()

• Parecido com IndexOf(), porém retorna o índice do último elemento

encontrado;

• Exemplo:

var a0 = [1,2,"a","b","1","2",1,2,3,4,5,6]; console.log( a0.lastIndexOf(2) ); //Retorna 7

(35)

join()

• Transforma os elementos de um array em string;

• Exemplo 1:

var a0 = [1,2,"a","b"];

console.log( a0.join() ); //Retorna 1,2,a,b

(36)

map()

• Este método destina-se a percorrer cada um dos elementos de um

array e modifica-os conforme uma função callback definida;

• Exemplo:

var a0 = [21,3,18,290];

function multiplica ( valor ) {

return ( valor = valor * 10 ); }

(37)

shift()

• Remove o PRIMEIRO elemento de um array e retorna um valor que

foi removido;

• Exemplo:

(38)

pop()

• Remove o ÚLTIMO elemento de um array e retorna um valor que foi

removido;

• Exemplo:

var a0 = [1,2,"a","b"];

console.log( a0.pop() ); //Retorna b

(39)

unshift()

• Adiciona um elemento ao INÍCIO de um array e retorna um valor que

foi adicionado;

• Exemplo:

(40)

push()

• Adiciona os argumentos no final de um array e retorna a nova

quantidade de elementos;

• Exemplo:

var a0 = [1,2,"a","b"];

console.log( a0.push(5,6,7,"m") ); //Retorna 8

(41)

reduce()

• Executa para cada um dos elementos e retorna um valor único

resultante da aplicação da função callback;

• Exemplo:

var a0 = [1,4,7,15];

function somar ( v1 , v2 ) { return ( v1 + v2 );

(42)

reduce()

• Executa para cada um dos elementos e retorna um valor único

resultante da aplicação da função callback;

• Exemplo:

var a0 = [1,4,7,15];

function somar ( v1 , v2 ) { return ( v1 + v2 );

}

console.log( a0.reduce( somar ) ); //Retorna 27

1 , 4, 7 , 15

5 7

12 15

27

(43)

reverse()

• Altera a ordem os elementos do array invertendo-os, ou seja, “os

últimos serão os primeiros”;

• Exemplo:

(44)

slice()

• Retorna um subarray do array;

• Admite dois argumentos que definem o índice inicial e o final;

• As diretrizes de extração são:

1. O subarray extraído contém o elemento definido no índice inicial, mas não

o elemento definido no índice final;

2. Se for definido apenas um índice, o subarray extraído começa com o

elemento do índice inicial e vai até o último elemento;

3. Argumentos negativos revertem o início de contagem do índice para o

último elemento, ou seja, -1 é o último elemento, -2 é o penúltimo, e assim

por diante.

(45)

slice()

• Exemplos:

var a0 = [1,2,3,4,"a","b","c"];

console.log( a0.slice(2,5) ); //resulta em [ 3,4,"a" ]

(46)

some()

• Retorna true se algum elemento satisfazer as condições impostas na

função callback;

• Exemplo:

var a0 = [21,3,18,"a",290]; function acharString(valor) {

return ( typeof valor == "string" ); }

(47)

sort()

• Ordena os valores de um array.

• Exemplos:

var frutas = [ "maçã" , "laranja" , "banana" ];

console.log( frutas.sort() ); // Resulta em [ 'banana', 'laranja', 'maçã' ]

(48)

sort()

• Ordena os valores de um array.

• Exemplos:

var frutas = [ "maçã" , "laranja" , "banana" ];

console.log( frutas.sort() ); // Resulta em [ 'banana', 'laranja', 'maçã' ]

var numeros = [ 2, 128, 34, 111 ];

console.log( numeros.sort() ); //Resulta em [ 111, 128, 2, 34 ]

(49)

sort()

• Para ordenar valores numéricos é preciso declarar uma função callback;

• Exemplos:

var numeros = [ 3, 5, 4, 1, 2 ]; function ordenarCrescente(a,b){ return (a-b); } function ordenarDecrescente(a,b){ return (b-a); }

(50)

toString()

• Converte cada elemento de um array em string.

• Exemplo:

var a0 = [3,45,8];

(51)