Javascript array.filter ejemplo

los filter() método crea un nuevo array con todos los elementos que pasan la prueba implementada por la función proporcionada.

Sintaxis

// Arrow functionfilter((element)=>...)filter((element, index)=>...)filter((element, index, array)=>...)// Callback functionfilter(callbackFn)filter(callbackFn, thisArg)// Inline callback functionfilter(functioncallbackFn(element)...)filter(functioncallbackFn(element, index)...)filter(functioncallbackFn(element, index, array)...)filter(functioncallbackFn(element, index, array)..., thisArg)

Parámetros

callbackFn

La función es un predicado, para probar cada elemento del array. Devuelve un valor que coacciona a true para mantener el elemento, o para false de lo contrario.

Acepta tres argumentos:

element

El elemento actual que se está procesando en el array.

indexOpcional

El índice del elemento actual que se está procesando en el array.

arrayOpcional

los array filter fue llamado.

thisArgOpcional

Valor para usar como this al ejecutar callbackFn.

Valor devuelto

Un nuevo array con los elementos que pasan la prueba. Si ningún elemento pasa la prueba, un vacío array Será devuelto.

Descripción

filter() llama a un proporcionado callbackFn funcionar una vez para cada elemento en un arrayy construye un nuevo array de todos los valores para los que callbackFn devoluciones un valor que obliga a true. callbackFn se invoca solo para índices de la array que tienen valores asignados; no se invoca para índices que se han eliminado o a los que nunca se les han asignado valores. Elementos de matriz que no pasan el callbackFn prueba se omiten y no se incluyen en el nuevo array.

callbackFn se invoca con tres argumentos:

1. el valor del elemento
2. el índice del elemento
3. el objeto Array que se atraviesa

Si un thisArg El parámetro se proporciona a filter, se utilizará como devolución de llamada this valor. De lo contrario, el valor undefined será utilizado como su this valor. los this valor finalmente observable por callback se determina de acuerdo con las reglas habituales para determinar la this visto por una función.

filter() no muta el array en el que se llama.

La gama de elementos procesados ​​por filter() se establece antes de la primera invocación de callbackFn. Los elementos que se añaden al array (de callbackFn) después de la llamada a filter() comienza no será visitado por callbackFn. Si los elementos existentes del array se eliminan de la misma manera que no se visitarán.

Polyfill

filter() se agregó al estándar ECMA-262 en la quinta edición. Por lo tanto, es posible que no esté presente en todas las implementaciones del estándar.

Puede solucionar esto insertando el siguiente código al comienzo de sus scripts, permitiendo el uso de filter() en implementaciones ECMA-262 que no lo admiten de forma nativa. Este algoritmo es exactamente equivalente al especificado en ECMA-262, 5ta edición, asumiendo que fn.call evalúa el valor original de Function.prototype.bind(), y eso Array.prototype.push() tiene su valor original.

if(!Array.prototype.filter)Array.prototype.filter=function(func, thisArg)'use strict';if(!((typeof func ==='Function';

Ejemplos de

Filtrar todos los valores pequeños

El siguiente ejemplo utiliza filter() para crear un filtrado array que tiene todos los elementos con valores menores que 10 remoto.

functionisBigEnough(value)return value >=10let filtered =[12,5,8,130,44].filter(isBigEnough)// filtered is [12, 130, 44]

Encuentra todos los números primos en un array

El siguiente ejemplo devuelve todos los números primos en el array:

const array =[-3,-2,-1,0,1,2,3,4,5,6,7,8,9,10,11,12,13];functionisPrime(num)for(let i =2; num > i; i++)if(num % i ==0)returnfalse;return num >1;

console.log(array.filter(isPrime));// [2, 3, 5, 7, 11, 13]

Filtrado de entradas no válidas de JSON

El siguiente ejemplo utiliza filter() para crear un json filtrado de todos los elementos con numérico distinto de cero id.

let arr =[ id:15, id:-1, id:0, id:3, id:12.2,, id:null, id:NaN, id:'undefined']let invalidEntries =0functionfilterByID(item)if(Number.isFinite(item.id)&& item.id !==0)returntrue
  invalidEntries++returnfalse;let arrByID = arr.filter(filterByID)

console.log('Filtered Arrayn', arrByID)// Filtered Array// [ id: 15 ,  id: -1 ,  id: 3 ,  id: 12.2 ]

console.log('Number of Invalid Entries = ', invalidEntries)// Number of Invalid Entries = 5

Buscando en array

El siguiente ejemplo utiliza filter() Filtrar array contenido basado en criterios de búsqueda.

let fruits =['apple','banana','grapes','mango','orange']/**
 * Filter array items based on search criteria (query)
 */functionfilterItems(arr, query)return arr.filter(function(el)return el.toLowerCase().indexOf(query.toLowerCase())!==-1)

console.log(filterItems(fruits,'ap'))// ['apple', 'grapes']
console.log(filterItems(fruits,'an'))// ['banana', 'mango', 'orange']

Implementación ES2015

const fruits =['apple','banana','grapes','mango','orange']/**
 * Filter array items based on search criteria (query)
 */constfilterItems=(arr, query)=>return arr.filter(el=> el.toLowerCase().indexOf(query.toLowerCase())!==-1)

console.log(filterItems(fruits,'ap'))// ['apple', 'grapes']
console.log(filterItems(fruits,'an'))// ['banana', 'mango', 'orange']

Afectando a la matriz inicial (modificando, añadiendo y eliminando)

Los siguientes ejemplos prueban el comportamiento del filter método cuando el array es modificado.

// Modifying each wordslet words =['spray','limit','exuberant','destruction','elite','present']const modifiedWords = words.filter((word, index, arr)=>
  arr[index+1]+=' extra'return word.length <6)

console.log(modifiedWords)// Notice there are three words below length 6, but since they've been modified one is returned// ["spray"]// Appending new words
words =['spray','limit','exuberant','destruction','elite','present']const appendedWords = words.filter((word, index, arr)=>
  arr.push('new')return word.length <6)

console.log(appendedWords)// Only three fits the condition even though the `words` itself now has a lot more words with character length less than 6// ["spray" ,"limit" ,"elite"]// Deleting words
words =['spray','limit','exuberant','destruction','elite','present']const deleteWords = words.filter((word, index, arr)=>
  arr.pop()return word.length <6)

console.log(deleteWords)// Notice 'elite' is not even obtained as its been popped off `words` before filter can even get there// ["spray" ,"limit"]

Especificaciones

Compatibilidad del navegador

Ver también

• Array.prototype.forEach()
• Array.prototype.every()
• Array.prototype.some()
• Array.prototype.reduce()
• Array.prototype.find()