Os métodos map,find,filter,fill,some e every do objeto array no Javascript
- #JavaScript
MAP()
O método map() cria um novo array,onde seus elementos são resultados da chamada de uma função,que por sua vez é parâmetro do método map.A função é chamada para cada elemento do array e o resultado é inserido em um novo array .
Uma ' arrow function '* é usada como parâmetro do método map .
const numbers = [1, 4, 9,10,1000,1000000];
const roots = numbers.map((num) => Math.sqrt(num).toFixed(2));
Resultado:
console.log(roots);
[ '1.00', '2.00', '3.00', '3.16', '31.62', '1000.00' ]
console.log(numbers);
[ 1, 4, 9, 10, 1000,1000000 ]
const numbers = [1, 4, 9,10,,1000000];
const roots = numbers.map((num) => Math.sqrt(num).toFixed(2));
Resultado:
console.log(roots);
[ '1.00', '2.00', '3.00', '3.16', <1 empty item>, '1000.00' ]
console.log(numbers);
[ 1, 4, 9, 10, <1 empty item>,,1000000 ]
FIND()
Este método retorna o primeiro elemento do array que satisfaz o teste que é executado por função.Esta é fornecida como parâmetro deste método .Caso não encontre,retorna undefined .
A posição do array que esteja vazia é tratada como undefined .
find( (elemento) => { /* … */ } )
find( (elemento, índice) => { /* … */ } )
find( (elemento, índice, array) => { /* … */ } )
const numbers = [1, 4, 9,10,,1000000];
const num = numbers.find(elemento => elemento > 10);
console.log(num);
Resultado: 1000000
numbers.find((valor,indice) => console.log('Valor: '+valor+' Índice: '+indice) );
Resultado:
Valor: 1 Índice: 0
Valor: 4 Índice: 1
Valor: 9 Índice: 2
Valor: 10 Índice: 3
Valor: undefined Índice: 4 posição vazia
Valor: 1000000 Índice: 5
const arrayobj= [ {fruta:'abacate'},{fruta:'maça'},{fruta:'banana'} ];
arrayobj.find( ({fruta}) => console.log('Fruta: '+fruta) );
Resultado:
Fruta: abacate
Fruta: maça
Fruta: banana
arrayobj.find( ({fruta}) => console.log(fruta === 'banana') );
Resultado:
false
false
true
const saida=arrayobj.find( ({fruta}) => fruta === 'banana' );
console.log(saida);
Resultado: { fruta: 'banana' }
const numbers = [1, 4, 9,10,,1000000]; -> uma posição vazia
numbers.find(elemento => console.log(elemento === 10))
Resultado:
false
false
false
true
false
false
console.log(numbers);
[ 1, 4, 9, 10, <1 empty item>,,1000000 ]
FILTER()
Este método cria uma cópia de uma porção de um dado array.Os elementos desta porção são os que passaram em um teste implementado por um função(geralmente 'arrow function') .
Um array vazio será retornado caso nenhum elemento do array dado passe no teste .
A função é chamada uma única vez para cada elemento do array,e,constrói um novo array com os elementos que passam no teste,ou seja,a função retorne 'true' para cada elemento do array .
As posições do array dado que são vazias,não são reconhecidas .
filter((elemento) => { /* … */ })
filter((elemento, índice) => { /* … */ })
filter((elemento, índice, array) => { /* … */ })
const numbers = [1, 4, 9,10,,1000000];
console.log(numbers.filter(elemento => elemento >=4));
Resultado: [ 4, 9, 10, 1000000 ]
console.log('numbers: '+numbers);
numbers: 1,4,9,10,,1000000
console.log(numbers.filter(elemento => elemento %2 != 0));
Resultado: [ 1, 9 ]
console.log('numbers: '+numbers);
numbers: 1,4,9,10,,1000000
console.log(numbers.filter(elemento => elemento %2 == 0));
Resultado: [ 4, 10, 1000000 ]
console.log('numbers: '+numbers);
numbers: 1,4,9,10,,1000000
FILL()
Este método muda todos elementos de um array com um valor estático,desde do índice inicial(default=0) até índice final que é o tamanho do array (array.length) .
O método é mutável .
fill(valor,índice inicial,índice final)
const numbers = [1, 4, 9,10,,1000000];
console.log( numbers.fill(10,3) );
Resultado: [ 1, 4, 9, 10, 10, 10 ]
console.log( numbers.fill(10,3,4) );
Resultado: [ 1, 4, 9, 10, <1 empty item>, 1000000 ]
console.log(numbers.fill(10,3,5));
Resultado: [ 1, 4, 9, 10, 10, 1000000 ]
console.log(numbers.fill(10));
Resultado: [ 10, 10, 10, 10, 10, 10 ]
SOME()
Este método devolve 'true' se pelo menos um elemento do array passa no teste de uma função fornecida como parâmetro dele .Caso não exista,devolve 'false' .
Se o algum elemento passa no teste,então para a iteração com o array .
Para um array vazio,então retorna 'false' .
some((element) => { /* … */ })
some((element, index) => { /* … */ })
some((element, index, array) => { /* … */ })
const str=['Carlos','Joseph','Eliane','Samuel','Tiago',,'Robert'];
console.log(str.some(elemento => elemento === 'Carlos'));
Resultado: true (verdadeiro)
console.log(str);
[
'Carlos',
'Joseph',
'Eliane',
'Samuel',
'Tiago',
<1 empty item>,
'Robert'
]
console.log(str.some(elemento => elemento === 'tiago'));
Resultado: false (falso)
console.log([2,7,16,100,40,1,0,-1].some(elemento => elemento == -1));
Resultado: true
console.log([2,7,16,100,40,1,0,-1].some(elemento => elemento < -1));
Resultado: false
EVERY()
Este método verifica se todos elementos de um array passa no teste de uma função fornecida como parâmetro dele,devolvendo um valor booleano( true ou false exclusivo) .
o método percorre o array,elemento por elemento,executando a função de teste .
O métdo não reconhece posições do array que são vazias .
every((element) => { /* … */ })
every((element, index) => { /* … */ })
every((element, index, array) => { /* … */ })
numbers=[ 1, 4, 9, 10, <1 empty item>, 1000000 ];
console.log(numbers.every(elemento => elemento >= 1));
Resultado: true (verdadeiro)
console.log(numbers);
[ 1, 4, 9, 10, <1 empty item>, 1000000 ]
console.log(numbers.every(elemento => elemento > 1));
Resultado: false (falso)
*
Arrow function é uma forma compacta de escrever uma função tradicional .
Escrita de uma função anônima tradicional para'arrow function'
( function (a){
return a+100;
}
);
(a) => { return a+100;};
(a) => a+100;
a => a+100; -> arrow function
Ref:
https://developer.mozilla.org/en-US/docs/Web/JavaScript/Reference/Global_Objects/Array
https://developer.mozilla.org/en-US/docs/Web/JavaScript/Reference/Functions/Arrow_functions
